/* ============================================================
   CLEANERS — DESIGN TOKENS · v2.0
   Single source of truth. Generated from the new branding.
   
   Brand: Cool Premium (Light) + Optional Dark
   Primary Accent: Deep Turquoise #097F91 (for text, CTAs, links)
   Pure Accent:    Bright Turquoise #0ED2E8 (for logo dot, chips, glow)
   Surface:        Cool grey #E1E3E5 (warm enough, cool enough)
   ============================================================ */


/* ============================================================
   1. BRAND · Raw color scales (theme-agnostic)
   ============================================================ */
:root {
  /* ---------- Turquoise scale (primary accent) ---------- */
  --turquoise-50:  #E6FAFD;
  --turquoise-100: #BFF2F9;
  --turquoise-200: #7FE5F3;
  --turquoise-300: #3FD8ED;
  --turquoise-400: #0ED2E8;   /* ★ PURE BRAND — logo dot, chips, glow */
  --turquoise-500: #0BAAC0;   /* hover */
  --turquoise-600: #097F91;   /* ★ DEEP BRAND — text, CTAs, links (AA on light) */
  --turquoise-700: #076474;
  --turquoise-800: #054954;
  --turquoise-900: #032E35;

  /* ---------- Neutral scale (Cool Premium) ---------- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F7F8F9;
  --neutral-100: #F0F1F3;
  --neutral-150: #E8EAEC;
  --neutral-200: #E1E3E5;   /* ★ PAGE BG · Cool Premium */
  --neutral-300: #CDD0D4;
  --neutral-400: #A5A9AE;
  --neutral-500: #6E7379;
  --neutral-600: #4A4E53;
  --neutral-700: #2E3136;
  --neutral-800: #1F2124;
  --neutral-900: #141518;
  --neutral-950: #0A0B0D;

  /* ---------- Semantic raw ---------- */
  --green-500:  #0E8A5F;
  --green-100:  #D9F2E7;
  --amber-500:  #C77A00;
  --amber-100:  #FAECCC;
  --red-500:    #D13838;
  --red-100:    #F9D9D9;
  --blue-500:   #2563EB;
  --blue-100:   #DBEAFE;
}


/* ============================================================
   2. SEMANTIC TOKENS · LIGHT (default · Cool Premium)
   ============================================================ */
:root,
[data-theme="light"] {
  /* ---- Surfaces ---- */
  --surface-canvas:   var(--neutral-200);   /* page background */
  --surface-raised:   var(--neutral-0);     /* cards */
  --surface-sunken:   var(--neutral-100);   /* subtle wells */
  --surface-overlay:  var(--neutral-0);     /* modals */
  --surface-sidebar:  var(--neutral-0);
  --surface-inverse:  var(--neutral-900);

  /* ---- Lines ---- */
  --line-subtle:  rgba(20, 21, 24, 0.06);
  --line-soft:    rgba(20, 21, 24, 0.10);
  --line-strong:  rgba(20, 21, 24, 0.18);
  --line-bold:    rgba(20, 21, 24, 0.32);

  /* ---- Text ---- */
  --text-primary:    var(--neutral-900);
  --text-secondary:  var(--neutral-600);
  --text-tertiary:   var(--neutral-500);
  --text-disabled:   var(--neutral-400);
  --text-inverse:    var(--neutral-0);
  --text-accent:     var(--turquoise-600);   /* deep turquoise — AA on light */
  --text-on-accent:  var(--neutral-0);

  /* ---- Brand (context-aware) ---- */
  --brand-primary:         var(--turquoise-600);  /* CTAs, links */
  --brand-primary-hover:   var(--turquoise-700);
  --brand-primary-pressed: var(--turquoise-800);
  --brand-accent:          var(--turquoise-400);  /* pure brand — logo dot, chips */
  --brand-accent-hover:    var(--turquoise-500);
  --brand-tint:            rgba(9, 127, 145, 0.08);
  --brand-tint-strong:     rgba(9, 127, 145, 0.14);
  --brand-glow:            rgba(14, 210, 232, 0.22);
  --brand-glow-strong:     rgba(14, 210, 232, 0.38);

  /* ---- Semantic ---- */
  --success:       var(--green-500);
  --success-bg:    var(--green-100);
  --warning:       var(--amber-500);
  --warning-bg:    var(--amber-100);
  --danger:        var(--red-500);
  --danger-bg:     var(--red-100);
  --info:          var(--turquoise-600);
  --info-bg:       rgba(9, 127, 145, 0.08);

  /* ---- Shadows (light) ---- */
  --shadow-xs:  0 1px 2px rgba(20, 21, 24, 0.04);
  --shadow-sm:  0 1px 2px rgba(20, 21, 24, 0.04), 0 2px 8px rgba(20, 21, 24, 0.04);
  --shadow-md:  0 4px 12px rgba(20, 21, 24, 0.06), 0 12px 32px rgba(20, 21, 24, 0.06);
  --shadow-lg:  0 12px 32px rgba(20, 21, 24, 0.08), 0 24px 72px rgba(20, 21, 24, 0.10);
  --shadow-xl:  0 24px 60px rgba(20, 21, 24, 0.12), 0 48px 120px rgba(20, 21, 24, 0.14);

  /* ---- Glow (turquoise, always the pure brand) ---- */
  --glow-brand:        0 0 0 1px rgba(14, 210, 232, 0.40), 0 12px 40px rgba(14, 210, 232, 0.24);
  --glow-brand-strong: 0 0 0 1px rgba(14, 210, 232, 0.60), 0 20px 60px rgba(14, 210, 232, 0.40);

  /* ---- Component tokens (Light) ---- */
  --btn-primary-bg:       var(--turquoise-600);
  --btn-primary-bg-hover: var(--turquoise-700);
  --btn-primary-fg:       var(--neutral-0);

  --btn-secondary-bg:       var(--neutral-0);
  --btn-secondary-bg-hover: var(--neutral-100);
  --btn-secondary-fg:       var(--neutral-900);
  --btn-secondary-border:   var(--line-strong);

  --btn-ghost-fg:       var(--text-primary);
  --btn-ghost-bg-hover: var(--brand-tint);

  --input-bg:         var(--neutral-0);
  --input-border:     var(--line-strong);
  --input-border-hover:  var(--neutral-400);
  --input-border-focus:  var(--turquoise-600);
  --input-placeholder:   var(--text-tertiary);

  --chip-bg:     var(--brand-tint);
  --chip-fg:     var(--turquoise-600);
  --chip-border: rgba(9, 127, 145, 0.24);
}


/* ============================================================
   3. SEMANTIC TOKENS · DARK (opt-in via [data-theme="dark"])
   ============================================================ */
[data-theme="dark"] {
  /* ---- Surfaces ---- */
  --surface-canvas:   var(--neutral-900);
  --surface-raised:   var(--neutral-800);
  --surface-sunken:   #17181B;
  --surface-overlay:  var(--neutral-800);
  --surface-sidebar:  var(--neutral-950);
  --surface-inverse:  var(--neutral-0);

  /* ---- Lines ---- */
  --line-subtle:  rgba(255, 255, 255, 0.06);
  --line-soft:    rgba(255, 255, 255, 0.10);
  --line-strong:  rgba(255, 255, 255, 0.18);
  --line-bold:    rgba(255, 255, 255, 0.32);

  /* ---- Text ---- */
  --text-primary:    var(--neutral-0);
  --text-secondary:  rgba(255, 255, 255, 0.72);
  --text-tertiary:   rgba(255, 255, 255, 0.48);
  --text-disabled:   rgba(255, 255, 255, 0.28);
  --text-inverse:    var(--neutral-900);
  --text-accent:     var(--turquoise-400);   /* pure brand readable on dark */
  --text-on-accent:  var(--neutral-900);

  /* ---- Brand ---- */
  --brand-primary:         var(--turquoise-400);
  --brand-primary-hover:   var(--turquoise-300);
  --brand-primary-pressed: var(--turquoise-200);
  --brand-accent:          var(--turquoise-400);
  --brand-accent-hover:    var(--turquoise-300);
  --brand-tint:            rgba(14, 210, 232, 0.12);
  --brand-tint-strong:     rgba(14, 210, 232, 0.20);

  /* ---- Shadows (dark) ---- */
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.32);
  --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.32);
  --shadow-md:  0 8px 24px rgba(0, 0, 0, 0.40);
  --shadow-lg:  0 20px 60px rgba(0, 0, 0, 0.52);
  --shadow-xl:  0 32px 100px rgba(0, 0, 0, 0.64);

  /* ---- Components ---- */
  --btn-primary-bg:       var(--turquoise-400);
  --btn-primary-bg-hover: var(--turquoise-300);
  --btn-primary-fg:       var(--neutral-900);

  --btn-secondary-bg:       var(--neutral-800);
  --btn-secondary-bg-hover: var(--neutral-700);
  --btn-secondary-fg:       var(--neutral-0);
  --btn-secondary-border:   var(--line-strong);

  --input-bg:         var(--neutral-800);
  --input-border:     var(--line-strong);
  --input-border-hover:  var(--line-bold);
  --input-border-focus:  var(--turquoise-400);

  --chip-bg:     var(--brand-tint);
  --chip-fg:     var(--turquoise-300);
  --chip-border: rgba(14, 210, 232, 0.28);
}


/* ============================================================
   4. BG VARIANTS (Light only — override canvas)
   ============================================================ */
[data-bg="cool"]  { --surface-canvas: var(--neutral-200); --surface-sunken: var(--neutral-100); }
[data-bg="pure"]  { --surface-canvas: #FFFFFF;             --surface-sunken: var(--neutral-50);  }
[data-bg="warm"]  { --surface-canvas: #FAF8F4;             --surface-sunken: #F2EFEA;            }
[data-bg="soft"]  { --surface-canvas: #F2F2F0;             --surface-sunken: #E8E8E6;            }


/* ============================================================
   5. TYPOGRAPHY
   Changa — one family Latin + Arabic (الدارجة). 400–800.
   JetBrains Mono — meta, labels, numerical data.
   ============================================================ */
:root {
  --font-display: "Changa", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    "Changa", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, monospace;
  --font-arabic:  "Changa", sans-serif;

  /* Weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  /* Scale · modular 1.25, base 16 */
  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-4xl:  64px;
  --text-5xl:  88px;
  --text-6xl:  120px;

  /* Line heights */
  --leading-tight:  1.05;
  --leading-snug:   1.20;
  --leading-normal: 1.45;
  --leading-loose:  1.70;

  /* Letter spacing */
  --track-tight:  -0.03em;
  --track-snug:   -0.02em;
  --track-normal:  0;
  --track-wide:    0.04em;
  --track-wider:   0.08em;
  --track-widest:  0.14em;
}


/* ============================================================
   6. SPACING · 4px base
   ============================================================ */
:root {
  --space-0:   0;
  --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;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;
  --space-48: 192px;
}


/* ============================================================
   7. RADII
   ============================================================ */
:root {
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;
}


/* ============================================================
   8. MOTION
   ============================================================ */
:root {
  --ease-out-quart:    cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring:       cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-instant: 80ms;
  --duration-fast:   120ms;
  --duration-base:   240ms;
  --duration-slow:   480ms;
  --duration-slower: 720ms;
}


/* ============================================================
   9. LAYOUT
   ============================================================ */
:root {
  --container-sm: 720px;
  --container-md: 960px;
  --container-lg: 1200px;
  --container-xl: 1440px;
  --grid-cols:     12;
  --grid-gutter:   24px;

  /* Z-layers */
  --z-base:      0;
  --z-raised:   10;
  --z-sticky:   20;
  --z-dropdown: 40;
  --z-overlay:  80;
  --z-modal:    90;
  --z-toast:   100;
}


/* ============================================================
   10. RESET + BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--surface-canvas);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition:
    background var(--duration-base) var(--ease-out-quart),
    color var(--duration-base) var(--ease-out-quart);
}

h1, h2, h3, h4, h5, h6, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }

::selection {
  background: var(--brand-accent);
  color: var(--neutral-900);
}

/* Utility helpers kept from v1 */
.mono  { font-family: var(--font-mono); }
.muted { color: var(--text-secondary); }
.dim   { color: var(--text-tertiary); }
.turq  { color: var(--brand-primary); }
.turq-pure { color: var(--brand-accent); }


/* ============================================================
   11. LEGACY ALIASES (backwards compat for existing pages)
   Map v1 token names → v2 semantic tokens so old pages still work.
   ============================================================ */
:root, [data-theme="light"] {
  --brand-turquoise:         var(--turquoise-400);
  --brand-turquoise-hover:   var(--turquoise-500);
  --brand-turquoise-pressed: var(--turquoise-600);
  --brand-turquoise-deep:    var(--turquoise-600);
  --brand-turquoise-dim:     var(--brand-tint);
  --brand-turquoise-glow:    var(--brand-glow);

  --brand-dark:         var(--neutral-900);
  --brand-dark-deeper:  var(--neutral-950);
  --brand-dark-deepest: #000000;

  --surface-0: var(--surface-canvas);
  --surface-1: var(--surface-raised);
  --surface-2: var(--surface-sunken);
  --surface-3: var(--surface-overlay);
  --surface-line:        var(--line-soft);
  --surface-line-strong: var(--line-strong);

  --shadow-sm-c: var(--shadow-sm);
  --shadow-md-c: var(--shadow-md);
  --shadow-lg-c: var(--shadow-lg);

  --glow-turquoise:        var(--glow-brand);
  --glow-turquoise-strong: var(--glow-brand-strong);
}