/*
 * Acequia Design Tokens
 *
 * Shared CSS custom properties for all Acequia apps and components.
 * Import this file or copy these tokens into your app to stay consistent.
 *
 * Usage:
 *   <link rel="stylesheet" href="/styles/acequia-tokens.css">
 *   — or —
 *   @import url('/styles/acequia-tokens.css');
 */

:root {
  color-scheme: dark;

  /* ─── Background ─────────────────────────────────────────────────── */
  --acq-bg-gradient: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  --acq-bg-dark-1: #1a1a2e;
  --acq-bg-dark-2: #16213e;
  --acq-bg-editor: #1e1e1e;
  --acq-bg-editor-surface: #252526;

  /* Surfaces — translucent layers over the gradient */
  --acq-surface-0: rgba(0, 0, 0, 0.2);
  --acq-surface-1: rgba(0, 0, 0, 0.3);
  --acq-surface-2: rgba(255, 255, 255, 0.05);
  --acq-surface-3: rgba(255, 255, 255, 0.1);

  /* ─── Text ───────────────────────────────────────────────────────── */
  --acq-text: #e0e0e0;
  --acq-text-heading: #fff;
  --acq-text-muted: #888;
  --acq-text-dim: #666;
  --acq-text-link: #64b5f6;

  /* ─── Borders ────────────────────────────────────────────────────── */
  --acq-border: rgba(255, 255, 255, 0.1);
  --acq-border-subtle: rgba(255, 255, 255, 0.08);
  --acq-border-strong: rgba(255, 255, 255, 0.15);
  --acq-border-editor: #3c3c3c;

  /* ─── Accent ─────────────────────────────────────────────────────── */
  --acq-accent: #2196f3;
  --acq-accent-hover: #1976d2;
  --acq-accent-bg: rgba(33, 150, 243, 0.15);
  --acq-accent-text: #64b5f6;

  /* ─── Status: Success ────────────────────────────────────────────── */
  --acq-success: #81c784;
  --acq-success-bg: rgba(76, 175, 80, 0.2);
  --acq-success-solid: #4caf50;
  --acq-success-hover: #43a047;

  /* ─── Status: Error ──────────────────────────────────────────────── */
  --acq-error: #e57373;
  --acq-error-bg: rgba(244, 67, 54, 0.2);
  --acq-error-solid: #dc3545;

  /* ─── Status: Warning ────────────────────────────────────────────── */
  --acq-warning: #ffc107;
  --acq-warning-bg: rgba(255, 193, 7, 0.2);

  /* ─── Status: Info ───────────────────────────────────────────────── */
  --acq-info: #64b5f6;
  --acq-info-bg: rgba(33, 150, 243, 0.2);

  /* ─── Role colors ────────────────────────────────────────────────── */
  --acq-role-owner: #64b5f6;
  --acq-role-owner-bg: rgba(33, 150, 243, 0.2);
  --acq-role-editor: #81c784;
  --acq-role-editor-bg: rgba(76, 175, 80, 0.2);
  --acq-role-viewer: #ba68c8;
  --acq-role-viewer-bg: rgba(156, 39, 176, 0.2);
  --acq-role-pending: #ffc107;
  --acq-role-pending-bg: rgba(255, 193, 7, 0.2);

  /* ─── Semantic: Orange ───────────────────────────────────────────── */
  --acq-orange: #ffb74d;
  --acq-orange-bg: rgba(255, 152, 0, 0.2);

  /* ─── Semantic: Pink ─────────────────────────────────────────────── */
  --acq-pink: #f06292;
  --acq-pink-bg: rgba(233, 30, 99, 0.2);

  /* ─── Semantic: Gray ─────────────────────────────────────────────── */
  --acq-gray: #9e9e9e;
  --acq-gray-bg: rgba(158, 158, 158, 0.2);

  /* ─── Typography ─────────────────────────────────────────────────── */
  --acq-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --acq-font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Fira Code', 'Menlo', monospace;
  --acq-font-size: 14px;
  --acq-font-size-sm: 13px;
  --acq-font-size-xs: 12px;
  --acq-font-size-xxs: 11px;
  --acq-font-size-lg: 16px;
  --acq-font-size-xl: 20px;
  --acq-font-size-h1: 1.8rem;
  --acq-line-height: 1.5;

  /* ─── Radius ─────────────────────────────────────────────────────── */
  --acq-radius-xs: 4px;
  --acq-radius-sm: 6px;
  --acq-radius-md: 8px;
  --acq-radius-lg: 12px;
  --acq-radius-xl: 16px;
  --acq-radius-pill: 100px;

  /* ─── Spacing ────────────────────────────────────────────────────── */
  --acq-space-xs: 4px;
  --acq-space-sm: 8px;
  --acq-space-md: 12px;
  --acq-space-lg: 16px;
  --acq-space-xl: 20px;
  --acq-space-2xl: 24px;
  --acq-space-3xl: 32px;
  --acq-space-4xl: 40px;

  /* ─── Shadows ────────────────────────────────────────────────────── */
  --acq-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --acq-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --acq-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.3);
  --acq-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.15);

  /* ─── Transitions ────────────────────────────────────────────────── */
  --acq-transition-fast: 0.15s ease;
  --acq-transition: 0.2s ease;
  --acq-transition-slow: 0.3s ease;

  /* ─── Breakpoints (reference only — use in @media) ───────────────── */
  /* Phone: max-width: 600px  */
  /* Tablet: max-width: 768px */
  /* Desktop-sm: max-width: 1024px */

  /* ─── Touch targets ──────────────────────────────────────────────── */
  --acq-touch-min: 44px;
  --acq-touch-font: 15px;

  /* ─── Z-index layers ─────────────────────────────────────────────── */
  --acq-z-dropdown: 100;
  --acq-z-overlay: 200;
  --acq-z-modal: 300;
  --acq-z-toast: 400;
}

/* ═══════════════════════════════════════════════════════════════════════
 * Light Theme
 *
 * Redefines color tokens only — spacing, radii, fonts, transitions,
 * z-index, and touch targets are unchanged.
 *
 * Dark remains the primary theme. Light is available for user preference
 * or OS setting — the surface-level management view, stepping out of
 * the channel to manage the flow.
 * ═══════════════════════════════════════════════════════════════════════ */

:root[data-theme="light"] {
  color-scheme: light;

  /* ─── Background ─────────────────────────────────────────────────── */
  --acq-bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
  --acq-bg-dark-1: #f5f7fa;
  --acq-bg-dark-2: #e8ecf1;
  --acq-bg-editor: #ffffff;
  --acq-bg-editor-surface: #f3f3f3;

  /* Surfaces — light layers darken downward */
  --acq-surface-0: rgba(255, 255, 255, 0.7);
  --acq-surface-1: rgba(255, 255, 255, 0.9);
  --acq-surface-2: rgba(0, 0, 0, 0.03);
  --acq-surface-3: rgba(0, 0, 0, 0.06);

  /* ─── Text ───────────────────────────────────────────────────────── */
  --acq-text: #333333;
  --acq-text-heading: #111111;
  --acq-text-muted: #666666;
  --acq-text-dim: #999999;
  --acq-text-link: #1976d2;

  /* ─── Borders ────────────────────────────────────────────────────── */
  --acq-border: rgba(0, 0, 0, 0.12);
  --acq-border-subtle: rgba(0, 0, 0, 0.06);
  --acq-border-strong: rgba(0, 0, 0, 0.2);
  --acq-border-editor: #d4d4d4;

  /* ─── Accent ─────────────────────────────────────────────────────── */
  --acq-accent: #1976d2;
  --acq-accent-hover: #1565c0;
  --acq-accent-bg: rgba(33, 150, 243, 0.1);
  --acq-accent-text: #1565c0;

  /* ─── Status: Success ────────────────────────────────────────────── */
  --acq-success: #2e7d32;
  --acq-success-bg: rgba(76, 175, 80, 0.12);
  --acq-success-solid: #4caf50;
  --acq-success-hover: #388e3c;

  /* ─── Status: Error ──────────────────────────────────────────────── */
  --acq-error: #c62828;
  --acq-error-bg: rgba(244, 67, 54, 0.1);
  --acq-error-solid: #dc3545;

  /* ─── Status: Warning ────────────────────────────────────────────── */
  --acq-warning: #f57f17;
  --acq-warning-bg: rgba(255, 193, 7, 0.15);

  /* ─── Status: Info ───────────────────────────────────────────────── */
  --acq-info: #1565c0;
  --acq-info-bg: rgba(33, 150, 243, 0.1);

  /* ─── Role colors ────────────────────────────────────────────────── */
  --acq-role-owner: #1565c0;
  --acq-role-owner-bg: rgba(33, 150, 243, 0.1);
  --acq-role-editor: #2e7d32;
  --acq-role-editor-bg: rgba(76, 175, 80, 0.1);
  --acq-role-viewer: #7b1fa2;
  --acq-role-viewer-bg: rgba(156, 39, 176, 0.1);
  --acq-role-pending: #f57f17;
  --acq-role-pending-bg: rgba(255, 193, 7, 0.1);

  /* ─── Semantic: Orange ───────────────────────────────────────────── */
  --acq-orange: #e65100;
  --acq-orange-bg: rgba(255, 152, 0, 0.1);

  /* ─── Semantic: Pink ─────────────────────────────────────────────── */
  --acq-pink: #c2185b;
  --acq-pink-bg: rgba(233, 30, 99, 0.1);

  /* ─── Semantic: Gray ─────────────────────────────────────────────── */
  --acq-gray: #616161;
  --acq-gray-bg: rgba(158, 158, 158, 0.12);

  /* ─── Shadows ────────────────────────────────────────────────────── */
  --acq-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06);
  --acq-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --acq-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.1);
  --acq-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.08);
}