/* ==========================================================================
   ELS Sales Kit — design tokens (core)
   Theme selection:
     :root[data-theme="dark"]   -> dark
     :root[data-theme="light"]  -> light
     no data-theme / "system"   -> follows prefers-color-scheme (dark is the base)
   Accent helpers: .c-cyan .c-violet .c-pink .c-amber .c-green .c-blue .c-red .c-slate
   set --accent / --accent-2 / --accent-soft / --accent-ink / --accent-glow / --on-accent.
   ========================================================================== */

/* ---------- Fonts (local, variable) ---------- */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../assets/fonts/PlusJakartaSans-latinext-var.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../assets/fonts/PlusJakartaSans-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Theme-independent tokens + dark palette (base) ---------- */
:root {
  color-scheme: dark;

  --font: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Cascadia Code', Consolas, 'SFMono-Regular', Menlo, monospace;

  /* type scale */
  --fs-xs: 0.75rem;     /* 12 */
  --fs-sm: 0.84375rem;  /* 13.5 */
  --fs-base: 0.9375rem; /* 15 */
  --fs-md: 1.03125rem;  /* 16.5 */
  --fs-lg: 1.1875rem;   /* 19 */
  --fs-xl: 1.4375rem;   /* 23 */
  --fs-2xl: clamp(1.5rem, 1.2rem + 1.3vw, 1.875rem);   /* 24 -> 30 */
  --fs-3xl: clamp(1.875rem, 1.4rem + 2vw, 2.375rem);   /* 30 -> 38 */

  /* spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;

  /* radii */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* motion */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: 160ms;
  --dur: 240ms;
  --dur-slow: 320ms;

  /* layout */
  --topbar-h: 60px;
  --bottomnav-h: 66px;
  --sidebar-w: 272px;
  --content-max: 1180px;
  --gutter: 16px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* layers */
  --z-aurora: 0;
  --z-content: 1;
  --z-topbar: 30;
  --z-nav: 40;
  --z-fab: 45;
  --z-overlay: 100;
  --z-sheet: 200;
  --z-celebrate: 300;
  --z-toast: 400;
  --z-float: 450;
  --z-confetti: 500;

  /* ---- dark palette ---- */
  --bg: #050816;
  --bg-2: #0B1130;
  --surface: rgba(13, 19, 52, .78);
  --surface-solid: #0B1130;
  --surface-raised: #10183F;
  --surface-2: rgba(255, 255, 255, .045);
  --surface-3: rgba(255, 255, 255, .08);
  --text: #EEF2FF;
  --muted: #A7B1D6;
  --dim: #8A94BF;
  --stroke: rgba(165, 180, 252, .16);
  --stroke-strong: rgba(165, 180, 252, .30);
  --backdrop: rgba(2, 4, 14, .62);
  --glass: rgba(8, 12, 34, .72);
  --highlight: rgba(255, 255, 255, .06);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 1px 1px rgba(0, 0, 0, .2);
  --shadow: 0 12px 32px -12px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .25);
  --shadow-lg: 0 30px 80px -20px rgba(0, 0, 0, .7), 0 8px 24px rgba(0, 0, 0, .35);

  --aurora-opacity: .22;

  /* brand gradient (raised [+] / FAB) and small shared effects */
  --on-brand: #050816;                      /* icon/text on the cyan -> violet brand gradient */
  --brand-glow: rgba(34, 211, 238, .45);    /* glow under the brand mark */
  --knob: #FFFFFF;                          /* toggle thumb */
  --knob-shadow: 0 2px 6px rgba(0, 0, 0, .28), 0 0 0 .5px rgba(0, 0, 0, .06);
  --inset-hi: rgba(255, 255, 255, .18);     /* top highlight on gradient buttons */
  --shimmer: rgba(255, 255, 255, .35);      /* progress shimmer */
  --shadow-up: 0 -10px 30px -18px rgba(0, 0, 0, .45); /* bottom nav */

  --cyan: #22D3EE;  --cyan-soft: rgba(34, 211, 238, .14);   --cyan-ink: #67E8F9;   --on-cyan: #04121A;   --cyan-glow: rgba(34, 211, 238, .38);
  --violet: #A78BFA; --violet-soft: rgba(167, 139, 250, .15); --violet-ink: #C4B5FD; --on-violet: #0B1030; --violet-glow: rgba(167, 139, 250, .40);
  --pink: #F472B6;   --pink-soft: rgba(244, 114, 182, .14);   --pink-ink: #F9A8D4;   --on-pink: #1A0610;   --pink-glow: rgba(244, 114, 182, .38);
  --amber: #FBBF24;  --amber-soft: rgba(251, 191, 36, .14);   --amber-ink: #FCD34D;  --on-amber: #1A1002;  --amber-glow: rgba(251, 191, 36, .36);
  --green: #34D399;  --green-soft: rgba(52, 211, 153, .14);   --green-ink: #6EE7B7;  --on-green: #031A12;  --green-glow: rgba(52, 211, 153, .36);
  --blue: #60A5FA;   --blue-soft: rgba(96, 165, 250, .15);    --blue-ink: #93C5FD;   --on-blue: #06102A;   --blue-glow: rgba(96, 165, 250, .38);
  --red: #FB7185;    --red-soft: rgba(251, 113, 133, .15);    --red-ink: #FDA4AF;    --on-red: #1F050B;    --red-glow: rgba(251, 113, 133, .38);
  --slate: #94A3B8;  --slate-soft: rgba(148, 163, 184, .15);  --slate-ink: #CBD5E1;  --on-slate: #0B1030;  --slate-glow: rgba(148, 163, 184, .30);

  /* default accent */
  --accent: var(--cyan);
  --accent-2: var(--violet);
  --accent-soft: var(--cyan-soft);
  --accent-ink: var(--cyan-ink);
  --accent-glow: var(--cyan-glow);
  --on-accent: var(--on-cyan);
}

/* ---- light palette: system preference (when no explicit dark) ---- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #F3F6FF;
    --bg-2: #FFFFFF;
    --surface: rgba(255, 255, 255, .86);
    --surface-solid: #FFFFFF;
    --surface-raised: #FFFFFF;
    --surface-2: rgba(11, 16, 48, .035);
    --surface-3: rgba(11, 16, 48, .07);
    --text: #0B1030;
    --muted: #48527D;
    --dim: #5F6991;
    --stroke: rgba(40, 50, 120, .12);
    --stroke-strong: rgba(40, 50, 120, .24);
    --backdrop: rgba(11, 16, 48, .38);
    --glass: rgba(255, 255, 255, .78);
    --highlight: rgba(255, 255, 255, .7);
    --shadow-sm: 0 1px 2px rgba(30, 40, 100, .07), 0 1px 1px rgba(30, 40, 100, .04);
    --shadow: 0 14px 34px -14px rgba(30, 40, 100, .20), 0 2px 6px rgba(30, 40, 100, .05);
    --shadow-lg: 0 30px 70px -20px rgba(30, 40, 100, .32), 0 8px 20px rgba(30, 40, 100, .08);
    --aurora-opacity: .13;
    --on-brand: #FFFFFF;
    --brand-glow: rgba(14, 116, 144, .32);
    --knob-shadow: 0 2px 6px rgba(30, 40, 100, .25), 0 0 0 .5px rgba(30, 40, 100, .08);
    --shimmer: rgba(255, 255, 255, .45);
    --shadow-up: 0 -10px 30px -18px rgba(30, 40, 100, .22);
    --cyan: #0E7490;   --cyan-soft: rgba(14, 116, 144, .10);  --cyan-ink: #155E75;   --on-cyan: #FFFFFF;   --cyan-glow: rgba(14, 116, 144, .28);
    --violet: #7C3AED; --violet-soft: rgba(124, 58, 237, .10); --violet-ink: #6D28D9; --on-violet: #FFFFFF; --violet-glow: rgba(124, 58, 237, .28);
    --pink: #DB2777;   --pink-soft: rgba(219, 39, 119, .10);  --pink-ink: #BE185D;   --on-pink: #FFFFFF;   --pink-glow: rgba(219, 39, 119, .26);
    --amber: #B45309;  --amber-soft: rgba(180, 83, 9, .10);   --amber-ink: #92400E;  --on-amber: #FFFFFF;  --amber-glow: rgba(180, 83, 9, .26);
    --green: #047857;  --green-soft: rgba(4, 120, 87, .10);   --green-ink: #065F46;  --on-green: #FFFFFF;  --green-glow: rgba(4, 120, 87, .26);
    --blue: #2563EB;   --blue-soft: rgba(37, 99, 235, .10);   --blue-ink: #1D4ED8;   --on-blue: #FFFFFF;   --blue-glow: rgba(37, 99, 235, .26);
    --red: #BE123C;    --red-soft: rgba(190, 18, 60, .10);    --red-ink: #9F1239;    --on-red: #FFFFFF;    --red-glow: rgba(190, 18, 60, .26);
    --slate: #475569;  --slate-soft: rgba(71, 85, 105, .10);  --slate-ink: #334155;  --on-slate: #FFFFFF;  --slate-glow: rgba(71, 85, 105, .22);
  }
}

/* ---- light palette: explicit choice ---- */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F3F6FF;
  --bg-2: #FFFFFF;
  --surface: rgba(255, 255, 255, .86);
  --surface-solid: #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-2: rgba(11, 16, 48, .035);
  --surface-3: rgba(11, 16, 48, .07);
  --text: #0B1030;
  --muted: #48527D;
  --dim: #5F6991;
  --stroke: rgba(40, 50, 120, .12);
  --stroke-strong: rgba(40, 50, 120, .24);
  --backdrop: rgba(11, 16, 48, .38);
  --glass: rgba(255, 255, 255, .78);
  --highlight: rgba(255, 255, 255, .7);
  --shadow-sm: 0 1px 2px rgba(30, 40, 100, .07), 0 1px 1px rgba(30, 40, 100, .04);
  --shadow: 0 14px 34px -14px rgba(30, 40, 100, .20), 0 2px 6px rgba(30, 40, 100, .05);
  --shadow-lg: 0 30px 70px -20px rgba(30, 40, 100, .32), 0 8px 20px rgba(30, 40, 100, .08);
  --aurora-opacity: .13;
  --on-brand: #FFFFFF;
  --brand-glow: rgba(14, 116, 144, .32);
  --knob-shadow: 0 2px 6px rgba(30, 40, 100, .25), 0 0 0 .5px rgba(30, 40, 100, .08);
  --shimmer: rgba(255, 255, 255, .45);
  --shadow-up: 0 -10px 30px -18px rgba(30, 40, 100, .22);
  --cyan: #0E7490;   --cyan-soft: rgba(14, 116, 144, .10);  --cyan-ink: #155E75;   --on-cyan: #FFFFFF;   --cyan-glow: rgba(14, 116, 144, .28);
  --violet: #7C3AED; --violet-soft: rgba(124, 58, 237, .10); --violet-ink: #6D28D9; --on-violet: #FFFFFF; --violet-glow: rgba(124, 58, 237, .28);
  --pink: #DB2777;   --pink-soft: rgba(219, 39, 119, .10);  --pink-ink: #BE185D;   --on-pink: #FFFFFF;   --pink-glow: rgba(219, 39, 119, .26);
  --amber: #B45309;  --amber-soft: rgba(180, 83, 9, .10);   --amber-ink: #92400E;  --on-amber: #FFFFFF;  --amber-glow: rgba(180, 83, 9, .26);
  --green: #047857;  --green-soft: rgba(4, 120, 87, .10);   --green-ink: #065F46;  --on-green: #FFFFFF;  --green-glow: rgba(4, 120, 87, .26);
  --blue: #2563EB;   --blue-soft: rgba(37, 99, 235, .10);   --blue-ink: #1D4ED8;   --on-blue: #FFFFFF;   --blue-glow: rgba(37, 99, 235, .26);
  --red: #BE123C;    --red-soft: rgba(190, 18, 60, .10);    --red-ink: #9F1239;    --on-red: #FFFFFF;    --red-glow: rgba(190, 18, 60, .26);
  --slate: #475569;  --slate-soft: rgba(71, 85, 105, .10);  --slate-ink: #334155;  --on-slate: #FFFFFF;  --slate-glow: rgba(71, 85, 105, .22);
}

/* ---- explicit dark keeps the base palette (declared for clarity / specificity parity) ---- */
:root[data-theme="dark"] { color-scheme: dark; }

/* ---------- Accent helpers ---------- */
:root, .c-cyan { --accent: var(--cyan); --accent-2: var(--violet); --accent-soft: var(--cyan-soft); --accent-ink: var(--cyan-ink); --accent-glow: var(--cyan-glow); --on-accent: var(--on-cyan); }
.c-violet { --accent: var(--violet); --accent-2: var(--pink);   --accent-soft: var(--violet-soft); --accent-ink: var(--violet-ink); --accent-glow: var(--violet-glow); --on-accent: var(--on-violet); }
.c-pink   { --accent: var(--pink);   --accent-2: var(--violet);  --accent-soft: var(--pink-soft);   --accent-ink: var(--pink-ink);   --accent-glow: var(--pink-glow);   --on-accent: var(--on-pink); }
.c-amber  { --accent: var(--amber);  --accent-2: var(--pink);   --accent-soft: var(--amber-soft);  --accent-ink: var(--amber-ink);  --accent-glow: var(--amber-glow);  --on-accent: var(--on-amber); }
.c-green  { --accent: var(--green);  --accent-2: var(--cyan);   --accent-soft: var(--green-soft);  --accent-ink: var(--green-ink);  --accent-glow: var(--green-glow);  --on-accent: var(--on-green); }
.c-blue   { --accent: var(--blue);   --accent-2: var(--violet); --accent-soft: var(--blue-soft);   --accent-ink: var(--blue-ink);   --accent-glow: var(--blue-glow);   --on-accent: var(--on-blue); }
.c-red    { --accent: var(--red);    --accent-2: var(--pink);   --accent-soft: var(--red-soft);    --accent-ink: var(--red-ink);    --accent-glow: var(--red-glow);    --on-accent: var(--on-red); }
.c-slate  { --accent: var(--slate);  --accent-2: var(--blue);   --accent-soft: var(--slate-soft);  --accent-ink: var(--slate-ink);  --accent-glow: var(--slate-glow);  --on-accent: var(--on-slate); }