/* ============================================================
   DESIGN SYSTEM — TOKENS  (the single source of truth)
   Path: /assets/css/design-system/src/tokens.css

   Rules:
   - Every design value (colour, surface, border, radius, shadow,
     spacing, font, timing) is defined HERE, once. Dark-mode values
     live only in dark.css.
   - Anything else — the app shell (layout.php --lyt-*), dashboard
     (dashboard.css --db-*), sidebars, page styles — may keep its own
     short variable names, but only as aliases: --x: var(--token).
     Never a second hex value.
   - Emails can't use CSS variables: App\Support\EmailLayout reads
     this file to build its inline styles, so it follows too.
   ============================================================ */

:root {

  /* =========================
     TYPOGRAPHY
  ========================= */
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'DM Mono', monospace;

  /* =========================
     TEXT COLORS
  ========================= */
  --color-heading: #1e1b4b;
  --color-body: #374151;
  --color-muted: #64748b;
  --color-faint: #94a3b8;

  /* =========================
     BRAND (INDIGO)
  ========================= */
  --ds-indigo: #4f46e5;
  --ds-indigo-dark: #4338ca;
  --ds-indigo-light: #eef2ff;
  --ds-indigo-border: #c7d2fe;

  /* =========================
     STATUS COLORS
  ========================= */
  --color-green: #10b981;
  --color-green-light: #ecfdf5;
  --color-green-border: #a7f3d0;

  --color-red: #ef4444;
  --color-red-light: #fef2f2;
  --color-red-border: #fecaca;

  --color-amber: #f59e0b;
  --color-amber-light: #fffbeb;
  --color-amber-border: #fde68a;

  --color-blue: #3b82f6;
  --color-blue-light: #dbeafe;
  --color-blue-border: #bfdbfe;

  --color-purple: #7c3aed;
  --color-purple-light: #ede9fe;
  --color-purple-border: #ddd6fe;

  /* Darker fills (hover/pressed states, deep badges); fixed in both themes */
  --color-green-dark: #15803d;
  --color-red-dark: #b91c1c;
  --color-amber-dark: #b45309;
  --color-blue-dark: #1d4ed8;
  --color-purple-dark: #6d28d9;
  --color-orange-dark: #c2410c;
  --color-pink-dark: #be185d;

  --color-orange: #ea580c;
  --color-orange-light: #fff7ed;
  --color-orange-border: #fed7aa;

  --color-pink: #db2777;
  --color-pink-light: #fdf2f8;
  --color-pink-border: #fbcfe8;

  /* Light colours for text/icons on DARK surfaces (dark mode, dark heroes).
     Fixed in both themes; dark.css points the *-text tokens at these. */
  --ds-indigo-text-dark: #a5b4fc;
  --ds-indigo-chip-dark: #c7d2fe;
  --color-green-text-dark: #6ee7b7;
  --color-red-text-dark: #fca5a5;
  --color-amber-text-dark: #fcd34d;
  --color-blue-text-dark: #93c5fd;
  --color-purple-text-dark: #c4b5fd;
  --color-orange-text-dark: #fdba74;
  --color-pink-text-dark: #f9a8d4;

  --color-sky-text-dark: #7dd3fc; /* start of the pastel headline gradient on dark heroes */

  /* Hero-banner navy scale (dashboard and page heroes); fixed in both themes */
  --brand-navy-900: #060e1f;
  --brand-navy-800: #091b42;
  --brand-navy-700: #0e2d80;

  /* Third-party brand colours (kept exact for recognisable buttons) */
  --brand-stripe: #635bff;

  /* Text/icons on a coloured fill (buttons, badges, pills): white in both themes */
  --color-on-accent: #ffffff;

  /* Text on the matching -light tint (dark.css swaps in bright variants) */
  --ds-indigo-text: #3730a3;
  --color-green-text: #065f46;
  --color-red-text: #991b1b;
  --color-amber-text: #92400e;
  --color-blue-text: #1e40af;
  --color-purple-text: #5b21b6;
  --color-orange-text: #9a3412;
  --color-pink-text: #9d174d;

  /* =========================
     SURFACES
  ========================= */
  --surface-page: #f4f6fa; /* the app shell's page background (was layout.php --lyt-bg) */
  --surface-card: #ffffff;
  --surface-subtle: #f8fafc;
  --surface-dark: #0f172a;
  --surface-dark-accent: #1e293b;

  /* =========================
     BORDERS
  ========================= */
  --border-color: #e2e8f0;
  --border-color-strong: #cbd5e1;
  --border-width: 1.5px;
  --border: var(--border-width) solid var(--border-color);

  /* =========================
     RADII
  ========================= */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 28px;
  --radius-pill: 9999px;

  /* =========================
     SHADOWS
  ========================= */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 16px 48px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.05);
  --shadow-btn: 0 4px 14px rgba(79, 70, 229, 0.30);

  /* =========================
     FOCUS
  ========================= */
  --focus-ring: 0 0 0 3px rgba(79, 70, 229, 0.10);

  /* =========================
     SPACING SCALE
  ========================= */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* =========================
     MOTION
  ========================= */
  --transition-fast: .15s ease;
  --transition-med: .25s ease;
}