/* ==========================================================================
   THEME — 01 tokens
   --------------------------------------------------------------------------
   Single source of truth for colour, type, spacing, radius, shadow and motion.
   Every other file in the theme reads from these custom properties, so the
   whole product can be re-skinned from here alone.

   Colour direction follows the reference: a blue → violet → pink accent ramp
   on a cool slate neutral scale, with a light and a dark surface set.
   ========================================================================== */

:root {
    /* ---- Brand ramp (reference-derived hues, our own values) ---- */
    --c-blue-50:  #eff6ff;
    --c-blue-100: #dbeafe;
    --c-blue-200: #bfdbfe;
    --c-blue-300: #93c5fd;
    --c-blue-400: #60a5fa;
    --c-blue-500: #3b82f6;
    --c-blue-600: #2563eb;
    --c-blue-700: #1d4ed8;
    --c-blue-800: #1e40af;
    --c-blue-900: #1e3a8a;

    --c-violet-400: #a78bfa;
    --c-violet-500: #8b5cf6;
    --c-violet-600: #7c3aed;
    --c-violet-700: #6d28d9;

    --c-pink-400:  #f472b6;
    --c-pink-500:  #ec4899;
    --c-pink-600:  #db2777;

    --c-emerald-400: #34d399;
    --c-emerald-500: #10b981;
    --c-emerald-600: #059669;
    --c-amber-400:   #fbbf24;
    --c-amber-500:   #f59e0b;
    --c-rose-500:    #f43f5e;

    /* ---- Neutral ramp ---- */
    --c-slate-50:  #f8fafc;
    --c-slate-100: #f1f5f9;
    --c-slate-200: #e2e8f0;
    --c-slate-300: #cbd5e1;
    --c-slate-400: #94a3b8;
    --c-slate-500: #64748b;
    --c-slate-600: #475569;
    --c-slate-700: #334155;
    --c-slate-800: #1e293b;
    --c-slate-900: #0f172a;
    --c-slate-950: #020617;

    /* ---- Semantic: light theme (default) ---- */
    --bg-body:        var(--c-slate-50);
    --bg-surface:     #ffffff;
    --bg-surface-2:   var(--c-slate-100);
    --bg-surface-3:   var(--c-slate-200);
    --bg-inverse:     var(--c-slate-900);

    --text-strong:    var(--c-slate-900);
    --text-body:      var(--c-slate-600);
    --text-muted:     var(--c-slate-500);
    --text-inverse:   var(--c-slate-50);
    --text-on-brand:  #ffffff;

    --border-subtle:  var(--c-slate-200);
    --border-default: var(--c-slate-300);
    --border-strong:  var(--c-slate-400);

    --brand:          var(--c-blue-600);
    --brand-hover:    var(--c-blue-700);
    --brand-active:   var(--c-blue-800);
    --brand-soft:     var(--c-blue-50);
    --brand-soft-text:var(--c-blue-700);

    --accent:         var(--c-violet-600);
    --accent-soft:    #f5f3ff;

    --success:        var(--c-emerald-600);
    --success-soft:   #ecfdf5;
    --success-text:   #047857;

    --warning:        var(--c-amber-500);
    --warning-soft:   #fffbeb;
    --warning-text:   #b45309;

    --danger:         var(--c-rose-500);
    --danger-soft:    #fff1f2;
    --danger-text:    #be123c;

    --info:           var(--c-blue-600);
    --info-soft:      var(--c-blue-50);
    --info-text:      var(--c-blue-700);

    /* ---- Semantic: dark theme ---- */
    --dark-bg-body:      var(--c-slate-900);
    --dark-bg-surface:   #111a2e;
    --dark-bg-surface-2: #1a2438;
    --dark-bg-surface-3: #243049;
    --dark-text-strong:  #ffffff;
    --dark-text-body:    var(--c-slate-300);
    --dark-text-muted:   var(--c-slate-400);
    --dark-border:       rgba(255, 255, 255, .09);
    --dark-border-strong:rgba(255, 255, 255, .18);
    --dark-brand:        var(--c-blue-400);
    --dark-brand-soft:   rgba(59, 130, 246, .14);

    /* ---- Gradients ---- */
    --grad-brand:   linear-gradient(135deg, #2563eb 0%, #7c3aed 52%, #db2777 100%);
    --grad-brand-h: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 52%, #be185d 100%);
    --grad-text:    linear-gradient(135deg, #2563eb 0%, #7c3aed 50%, #db2777 100%);
    --grad-surface: linear-gradient(135deg, rgba(37, 99, 235, .08), rgba(219, 39, 119, .06));

    /* ---- Typography ---- */
    --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --fs-2xs:  .6875rem;   /* 11 */
    --fs-xs:   .75rem;     /* 12 */
    --fs-sm:   .875rem;    /* 14 */
    --fs-base: 1rem;       /* 16 */
    --fs-md:   1.0625rem;  /* 17 */
    --fs-lg:   1.125rem;   /* 18 */
    --fs-xl:   1.25rem;    /* 20 */
    --fs-2xl:  1.5rem;     /* 24 */
    --fs-3xl:  1.875rem;   /* 30 */
    --fs-4xl:  2.25rem;    /* 36 */
    --fs-5xl:  3rem;       /* 48 */

    --lh-tight:   1.1;
    --lh-snug:    1.25;
    --lh-normal:  1.6;
    --lh-relaxed: 1.75;

    --tracking-tight: -.02em;
    --tracking-wide:   .06em;
    --tracking-wider:  .14em;

    /* ---- Spacing (4px base) ---- */
    --sp-1:  .25rem;
    --sp-2:  .5rem;
    --sp-3:  .75rem;
    --sp-4:  1rem;
    --sp-5:  1.25rem;
    --sp-6:  1.5rem;
    --sp-8:  2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;
    --sp-20: 5rem;
    --sp-24: 6rem;

    --section-y: 5rem;
    --container:  1200px;
    --container-narrow: 52rem;

    /* ---- Radius ---- */
    --r-xs:   .375rem;
    --r-sm:   .625rem;
    --r-md:   .875rem;
    --r-lg:   1.125rem;
    --r-xl:   1.5rem;
    --r-2xl:  2rem;
    --r-pill: 999px;

    /* ---- Elevation ---- */
    --sh-xs: 0 1px 2px rgba(15, 23, 42, .06);
    --sh-sm: 0 2px 8px rgba(15, 23, 42, .06);
    --sh-md: 0 10px 30px -14px rgba(15, 23, 42, .22);
    --sh-lg: 0 24px 50px -22px rgba(15, 23, 42, .3);
    --sh-xl: 0 38px 70px -30px rgba(15, 23, 42, .38);
    --sh-brand: 0 16px 34px -14px rgba(37, 99, 235, .5);

    /* ---- Motion ---- */
    --ease-out:    cubic-bezier(.22, .61, .36, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --ease-spring: cubic-bezier(.34, 1.4, .64, 1);

    --dur-fast:  .15s;
    --dur-base:  .25s;
    --dur-slow:  .45s;
    --dur-slower:.8s;

    /* ---- Layout ---- */
    --header-h: 4.5rem;
    --z-header: 100;
    --z-drawer: 200;
    --z-modal:  300;
    --z-toast:  400;

    /* ---- v2 extensions: reward + tertiary accents ---- */
    --c-cyan-400: #22d3ee;
    --c-cyan-500: #06b6d4;
    --c-cyan-600: #0891b2;
    --c-gold-400: #fbbf24;
    --c-gold-500: #f59e0b;
    --c-gold-600: #d97706;

    --accent-2:      var(--c-cyan-600);
    --accent-2-soft: #ecfeff;
    --gold:          var(--c-gold-500);
    --gold-soft:     #fffbeb;
    --gold-text:     #b45309;

    /* ---- Premium gradients & surfaces (light) ---- */
    --grad-hero: linear-gradient(135deg,
        rgba(79, 70, 229, .22) 0%,
        rgba(124, 58, 237, .18) 42%,
        rgba(219, 39, 119, .16) 100%);
    --grad-cta: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 50%, #be185d 100%);
    --grad-aurora:
        radial-gradient(60% 60% at 15% 20%, rgba(79, 70, 229, .22), transparent 70%),
        radial-gradient(55% 55% at 85% 15%, rgba(6, 182, 212, .20), transparent 70%),
        radial-gradient(60% 60% at 60% 90%, rgba(219, 39, 119, .18), transparent 70%);
    --grad-conic: conic-gradient(from 180deg,
        #4f46e5, #06b6d4, #7c3aed, #db2777, #4f46e5);
    --grad-glass: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .12));

    --glass-bg: rgba(255, 255, 255, .72);
    --glass-border: rgba(255, 255, 255, .35);
    --glass-blur: 14px;
    --shadow-glow-brand: 0 18px 50px -20px rgba(79, 70, 229, .45);
    --shadow-glow-accent: 0 18px 50px -20px rgba(219, 39, 119, .42);
    --shadow-glow-gold: 0 18px 50px -22px rgba(245, 158, 11, .45);

    --dur-hero: .9s;
    --ease-cinematic: cubic-bezier(.16, 1, .3, 1);

    /* ---- Display type ---- */
    --tracking-display: -.03em;

    /* ---- Premium home upgrades (dark sources) ---- */
    --dark-glass-bg: rgba(15, 23, 42, .58);
    --dark-glass-border: rgba(255, 255, 255, .12);
}

/* Dark theme. Applied by the toggle in theme.js and remembered in
   localStorage; the markup ships without it so first paint stays light. */
[data-theme="dark"] {
    --bg-body:      var(--dark-bg-body);
    --bg-surface:   var(--dark-bg-surface);
    --bg-surface-2: var(--dark-bg-surface-2);
    --bg-surface-3: var(--dark-bg-surface-3);

    --text-strong:  var(--dark-text-strong);
    --text-body:    var(--dark-text-body);
    --text-muted:   var(--dark-text-muted);

    --border-subtle:  var(--dark-border);
    --border-default: var(--dark-border);
    --border-strong:  var(--dark-border-strong);

    --brand:        var(--dark-brand);
    --brand-hover:  var(--c-blue-300);
    --brand-active: var(--c-blue-200);
    --brand-soft:   var(--dark-brand-soft);
    --brand-soft-text: var(--c-blue-300);

    --accent-soft:  rgba(139, 92, 246, .16);
    --accent-2:     var(--c-cyan-400);
    --accent-2-soft: rgba(6, 182, 212, .16);
    --gold:         var(--c-gold-400);
    --gold-soft:    rgba(245, 158, 11, .16);
    --gold-text:    var(--c-gold-400);

    --success-soft: rgba(16, 185, 129, .14);
    --success-text: var(--c-emerald-400);
    --warning-soft: rgba(245, 158, 11, .14);
    --warning-text: var(--c-amber-400);
    --danger-soft:  rgba(244, 63, 94, .14);
    --danger-text:  #fda4af;
    --info-soft:    var(--dark-brand-soft);
    --info-text:    var(--c-blue-300);

    --glass-bg:     var(--dark-glass-bg);
    --glass-border: var(--dark-glass-border);

    /* Darker aurora wash: the hero glow has to read against a deep surface. */
    --grad-hero: linear-gradient(135deg,
        rgba(37, 99, 235, .30) 0%,
        rgba(124, 58, 237, .26) 42%,
        rgba(219, 39, 119, .22) 100%);
    --grad-aurora:
        radial-gradient(60% 60% at 15% 20%, rgba(79, 70, 229, .30), transparent 70%),
        radial-gradient(55% 55% at 85% 15%, rgba(6, 182, 212, .24), transparent 70%),
        radial-gradient(60% 60% at 60% 90%, rgba(219, 39, 119, .24), transparent 70%);
    --grad-glass: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));

    --sh-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --sh-sm: 0 2px 8px rgba(0, 0, 0, .35);
    --sh-md: 0 10px 30px -14px rgba(0, 0, 0, .6);
    --sh-lg: 0 24px 50px -22px rgba(0, 0, 0, .7);
    --sh-xl: 0 38px 70px -30px rgba(0, 0, 0, .75);
    --grad-surface: linear-gradient(135deg, rgba(59, 130, 246, .1), rgba(236, 72, 153, .08));

    color-scheme: dark;
}