/* =============================================================
   ChatMMM Design Tokens v2
   Loaded BEFORE theme.css. Adds new tokens without overriding
   existing ones. Establishes the global @layer order so every
   subsequent stylesheet can opt into the cascade explicitly.
   ============================================================= */

/* Declare layer order once, app-wide. Later layers win. */
@layer reset, tokens, base, components, utilities, overrides;

@layer tokens {
    :root {
        /* ---------- Brand: Violet ramp (anchors the new identity) ---------- */
        --brand-50:  #f5f3ff;
        --brand-100: #ede9fe;
        --brand-200: #ddd6fe;
        --brand-300: #c4b5fd;
        --brand-400: #a78bfa;
        --brand-500: #8b5cf6;
        --brand-600: #7c3aed;   /* Primary CTA */
        --brand-700: #6d28d9;
        --brand-800: #5b21b6;
        --brand-900: #4c1d95;

        /* ---------- Semantic market colors (direction only) ---------- */
        --bull:        #16a34a;
        --bull-soft:   #dcfce7;
        --bull-strong: #15803d;
        --bear:        #dc2626;
        --bear-soft:   #fee2e2;
        --bear-strong: #b91c1c;
        --neutral:     #64748b;

        /* PRO tier — gold (used as outline, NOT filled) */
        --pro:        #d97706;
        --pro-soft:   #fef3c7;
        --pro-strong: #92400e;

        /* ---------- Elevation (token-driven, dark-mode aware) ---------- */
        --elev-0: none;
        --elev-1: 0 1px 2px rgba(15, 23, 42, 0.06);
        --elev-2: 0 2px 4px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
        --elev-3: 0 8px 16px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
        --elev-4: 0 20px 40px rgba(15, 23, 42, 0.12), 0 8px 16px rgba(15, 23, 42, 0.06);
        --elev-glow-brand: 0 0 0 4px rgba(139, 92, 246, 0.18);
        --elev-glow-bull:  0 0 0 4px rgba(22, 163, 74, 0.16);
        --elev-glow-bear:  0 0 0 4px rgba(220, 38, 38, 0.16);

        /* ---------- Motion ---------- */
        --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
        --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
        --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
        --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

        --dur-instant: 80ms;
        --dur-fast:    140ms;
        --dur-base:    220ms;
        --dur-slow:    340ms;
        --dur-page:    420ms;

        /* ---------- Typography (fluid, anchored on Inter Variable) ---------- */
        --font-sans:  'InterVariable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        --font-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

        /* Fluid type: scales smoothly between 360px and 1440px viewports */
        --fs-xs:   clamp(0.72rem, 0.69rem + 0.15vw, 0.78rem);
        --fs-sm:   clamp(0.82rem, 0.78rem + 0.20vw, 0.90rem);
        --fs-base: clamp(0.94rem, 0.90rem + 0.20vw, 1.02rem);
        --fs-md:   clamp(1.04rem, 0.98rem + 0.30vw, 1.14rem);
        --fs-lg:   clamp(1.18rem, 1.10rem + 0.40vw, 1.32rem);
        --fs-xl:   clamp(1.40rem, 1.28rem + 0.60vw, 1.62rem);
        --fs-2xl:  clamp(1.72rem, 1.52rem + 1.00vw, 2.08rem);
        --fs-3xl:  clamp(2.10rem, 1.80rem + 1.50vw, 2.72rem);

        --lh-tight:   1.15;
        --lh-snug:    1.32;
        --lh-normal:  1.55;
        --lh-relaxed: 1.72;

        --tracking-tight:  -0.015em;
        --tracking-normal:  0;
        --tracking-wide:    0.04em;
        --tracking-caps:    0.12em;

        /* ---------- Layout primitives ---------- */
        --sidebar-w:           248px;
        --sidebar-w-collapsed:  68px;
        --topbar-h:             56px;
        --rightrail-w:         320px;
        --content-max:        1280px;
        --gutter:              clamp(16px, 2vw, 28px);

        /* ---------- Surfaces (mapped on top of existing --bg-* vars) ---------- */
        --surface-page:     var(--bg-page, #ffffff);
        --surface-card:     var(--bg-card, #ffffff);
        --surface-sunken:   var(--color-gray-50, #f9fafb);
        --surface-elevated: #ffffff;
        --surface-glass:    rgba(255, 255, 255, 0.72);
        --surface-glass-strong: rgba(255, 255, 255, 0.86);

        /* ---------- Z-index scale ---------- */
        --z-base:       0;
        --z-raised:     10;
        --z-sticky:     100;
        --z-topbar:     500;
        --z-sidebar:    600;
        --z-dropdown:   1000;
        --z-modal:      2000;
        --z-toast:      3000;
        --z-tooltip:    4000;

        /* ---------- Focus ring (a11y) ---------- */
        --ring-color:  var(--brand-500);
        --ring-offset: var(--surface-page);
        --ring-width:  2px;
        --ring-offset-width: 2px;
    }

    /* Dark-mode token overrides (purely token swaps — NO !important anywhere).
       Palette: "Lifted slate" — page lifted out of near-black so cards read as
       gentle elevation, brand tints remapped to translucent violet so hovers no
       longer flash near-white. Keep in sync with the bg/text token block in
       theme-dark.css. */
    html.theme-dark {
        --bull-soft:   rgba(22, 163, 74, 0.16);
        --bear-soft:   rgba(220, 38, 38, 0.16);
        --pro-soft:    rgba(217, 119, 6, 0.18);

        --elev-1: 0 1px 2px rgba(0, 0, 0, 0.40);
        --elev-2: 0 2px 4px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30);
        --elev-3: 0 8px 16px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.30);
        --elev-4: 0 20px 40px rgba(0, 0, 0, 0.55), 0 8px 16px rgba(0, 0, 0, 0.35);

        --surface-sunken:      #161c2b;
        --surface-elevated:    #232c40;
        --surface-glass:       rgba(19, 24, 38, 0.66);
        --surface-glass-strong: rgba(19, 24, 38, 0.84);

        /* Brand tint ramp — these are used as interactive backgrounds
           (.cmm-nav-item.is-active, .dash-chip:hover, .cmm-search-row:hover,
           .dash-card__tag). In dark mode they must be translucent violet, NOT
           the near-white #f5f3ff/#ede9fe of the light ramp. Paired foregrounds
           are lightened to #c4b5fd in theme-dark.css. */
        --brand-50:  rgba(139, 92, 246, 0.14);
        --brand-100: rgba(139, 92, 246, 0.20);
        --brand-200: rgba(139, 92, 246, 0.30);

        --ring-offset: var(--bg-page);
    }
}

/* =============================================================
   Reduced motion — zero out all durations & disable transforms
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-instant: 0ms;
        --dur-fast:    0ms;
        --dur-base:    0ms;
        --dur-slow:    0ms;
        --dur-page:    0ms;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =============================================================
   Global a11y baseline (focus visible, skip link target)
   ============================================================= */
@layer base {
    :where(a, button, input, select, textarea, [tabindex]):focus-visible {
        outline: var(--ring-width) solid var(--ring-color);
        outline-offset: var(--ring-offset-width);
        border-radius: 4px;
    }

    .cmm-skip-link {
        position: absolute;
        top: -100px;
        left: 8px;
        background: var(--brand-600);
        color: #fff;
        padding: 10px 16px;
        border-radius: 8px;
        font-weight: 600;
        z-index: var(--z-tooltip);
        transition: top var(--dur-fast) var(--ease-out);
    }
    .cmm-skip-link:focus {
        top: 8px;
    }
}