/*
 * Asset Manager — cascade layer order + design tokens (Phase 15.0.B).
 *
 * The @layer declaration on the very first line establishes the global
 * priority order — this file is linked BEFORE main.css in base.html, so
 * any later @layer block in any sheet inherits this order.
 */
@layer reset, tokens, base, components, utilities;

/*
 * Asset Manager — design tokens (Phase 15.0.B foundation MVP).
 *
 * Two-tier token architecture per docs/PHASE_15_DESIGN_BRIEF.md §2:
 *
 *   primitives  → palette scales (slate/indigo/green/amber/red/blue)
 *   semantic    → role tokens (--color-bg, --color-text, --color-primary…)
 *   components  → consume only semantic tokens; never reach for primitives
 *
 * Loaded into the `tokens` cascade layer. Anything declared here can be
 * overridden by component-layer rules but always wins against the `base`
 * layer that applies element defaults.
 *
 * The legacy `--clr-*` aliases at the bottom keep pre-15.0.B rules in
 * main.css working unchanged while pages migrate. Do NOT add new uses of
 * `--clr-*` — author new components against `--color-*` only.
 */

@layer tokens {
    :root {
        /* ── Primitives — Slate (neutrals: text, surfaces, borders) ── */
        --slate-25:  #fcfcfd;
        --slate-50:  #f9fafb;
        --slate-100: #f2f4f7;
        --slate-200: #eaecf0;
        --slate-300: #d0d5dd;
        --slate-400: #98a2b3;
        --slate-500: #667085;
        --slate-600: #475467;
        --slate-700: #344054;
        --slate-800: #1d2939;
        --slate-900: #101828;

        /* ── Primitives — Indigo (primary action) ──────────────────── */
        --indigo-50:  #eef4ff;
        --indigo-100: #e0eaff;
        --indigo-500: #6172f3;
        --indigo-600: #444ce7;
        --indigo-700: #3538cd;

        /* ── Primitives — semantic accent palettes ─────────────────── */
        --green-50:  #ecfdf3;
        --green-600: #079455;
        --green-700: #067647;
        --amber-50:  #fffaeb;
        --amber-600: #dc6803;
        --amber-700: #b54708;
        --red-50:    #fef3f2;
        --red-600:   #d92d20;
        --red-700:   #b42318;
        --blue-50:   #eff8ff;
        --blue-600:  #1570ef;
        --blue-700:  #175cd3;

        /* ── Semantic — surfaces ───────────────────────────────────── */
        --color-bg:           var(--slate-50);
        --color-bg-subtle:    var(--slate-100);
        --color-surface:      #ffffff;
        --color-surface-soft: var(--slate-25);

        /* ── Semantic — text ───────────────────────────────────────── */
        --color-text:            var(--slate-900);
        --color-text-muted:      var(--slate-600);
        --color-text-subtle:     var(--slate-500);
        --color-text-on-primary: #ffffff;

        /* ── Semantic — borders ────────────────────────────────────── */
        --color-border:        var(--slate-200);
        --color-border-strong: var(--slate-300);
        --color-border-focus:  var(--indigo-600);

        /* ── Semantic — primary ────────────────────────────────────── */
        --color-primary:       var(--indigo-600);
        --color-primary-hover: var(--indigo-700);
        --color-primary-soft:  var(--indigo-50);

        /* ── Semantic — status / alert / badge backgrounds ─────────── */
        --color-success-bg:   var(--green-50);
        --color-success-text: var(--green-700);
        --color-warning-bg:   var(--amber-50);
        --color-warning-text: var(--amber-700);
        --color-danger:       var(--red-600);
        --color-danger-hover: var(--red-700);
        --color-danger-bg:    var(--red-50);
        --color-danger-text:  var(--red-700);
        --color-info-bg:      var(--blue-50);
        --color-info-text:    var(--blue-700);

        /* ── Typography — font stack (system, no web fonts) ────────── */
        --font-sans:
            -apple-system, BlinkMacSystemFont, "Segoe UI Variable",
            "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
        --font-mono:
            ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,
            Consolas, "DejaVu Sans Mono", monospace;

        /* ── Typography — scale ────────────────────────────────────── */
        --text-xs:   0.75rem;
        --text-sm:   0.875rem;
        --text-base: 0.9375rem;
        --text-md:   1rem;
        --text-lg:   1.125rem;
        --text-xl:   1.25rem;
        --text-2xl:  1.5rem;
        --text-3xl:  1.875rem;

        --font-normal:   400;
        --font-medium:   500;
        --font-semibold: 600;
        --font-bold:     700;

        --leading-tight:   1.2;
        --leading-snug:    1.4;
        --leading-normal:  1.5;
        --leading-relaxed: 1.6;

        --tracking-tight:  -0.011em;
        --tracking-normal: 0;
        --tracking-wide:   0.04em;

        /* ── Spacing — 8px grid ────────────────────────────────────── */
        --space-0:  0;
        --space-1:  0.25rem;
        --space-2:  0.5rem;
        --space-3:  0.75rem;
        --space-4:  1rem;
        --space-5:  1.25rem;
        --space-6:  1.5rem;
        --space-8:  2rem;
        --space-10: 2.5rem;
        --space-12: 3rem;
        --space-16: 4rem;

        /* ── Radii ─────────────────────────────────────────────────── */
        --radius-xs:   0.375rem;
        --radius-sm:   0.5rem;
        --radius-md:   0.625rem;
        --radius-lg:   0.875rem;
        --radius-xl:   1.125rem;
        --radius-2xl:  1.5rem;
        --radius-full: 999px;

        /* ── Shadows — multi-layered, blue-grey tinted (light) ─────── */
        --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
        --shadow-sm:
            0 1px 2px rgba(15, 23, 42, 0.04),
            0 1px 3px rgba(15, 23, 42, 0.06);
        --shadow-md:
            0 2px 4px rgba(15, 23, 42, 0.04),
            0 4px 8px -2px rgba(15, 23, 42, 0.08),
            0 8px 16px -4px rgba(15, 23, 42, 0.04);
        --shadow-lg:
            0 4px 6px rgba(15, 23, 42, 0.04),
            0 12px 20px -4px rgba(15, 23, 42, 0.10),
            0 24px 32px -8px rgba(15, 23, 42, 0.06);
        --shadow-xl:
            0 8px 12px rgba(15, 23, 42, 0.06),
            0 20px 32px -8px rgba(15, 23, 42, 0.12),
            0 40px 56px -12px rgba(15, 23, 42, 0.08);
        --shadow-inner: inset 0 1px 2px rgba(15, 23, 42, 0.04);

        /* ── Focus ring (single source of truth) ───────────────────── */
        --focus-ring: 0 0 0 4px rgba(68, 76, 231, 0.20);

        /* ── Transitions ───────────────────────────────────────────── */
        --transition-fast:   120ms cubic-bezier(0.4, 0, 0.2, 1);
        --transition-medium: 200ms cubic-bezier(0.4, 0, 0.2, 1);
        --transition-slow:   320ms cubic-bezier(0.4, 0, 0.2, 1);

        /* ── Z-index scale (brief §3.6) ────────────────────────────── */
        --z-base:     0;
        --z-sticky:   100;
        --z-dropdown: 200;
        --z-overlay:  300;
        --z-modal:    400;
        --z-toast:    500;
        --z-tooltip:  600;

        /* ── Legacy aliases — pre-15.0.B `--clr-*` tokens ──────────── */
        /* Existing rules in main.css still reference these. New code   */
        /* must use --color-* directly.                                 */
        --font-main: var(--font-sans);
        --radius:    var(--radius-sm);
        --border:    1px solid var(--color-border);
        --clr-bg:           var(--color-bg);
        --clr-surface:      var(--color-surface);
        --clr-surface-2:    var(--color-surface-soft);
        --clr-text:         var(--color-text);
        --clr-muted:        var(--color-text-muted);
        --clr-subtle:       var(--color-text-subtle);
        --clr-border:       var(--color-border);
        --clr-green-text:   var(--color-success-text);
        --clr-amber-text:   var(--color-warning-text);
        --clr-red-text:     var(--color-danger-text);
        --clr-blue-text:    var(--color-info-text);
        --clr-accent:       var(--color-primary);
        --clr-flash-info-bg:     var(--color-info-bg);
        --clr-flash-info-border: #bfdbfe;
        --clr-flash-info-text:   var(--color-info-text);
        --clr-hover:        var(--slate-100);
        --clr-focus-border: var(--slate-400);
        --clr-focus-shadow: rgba(15, 23, 42, 0.06);
        --clr-placeholder:  var(--slate-400);
        --clr-primary-hover: var(--slate-700);
        --clr-overlay:      rgba(15, 23, 42, 0.45);
        --clr-shadow:       rgba(15, 23, 42, 0.06);
        --clr-shadow-lg:    rgba(15, 23, 42, 0.14);
        --clr-row-hover:    var(--slate-50);
        --clr-track-bg:     var(--slate-100);
        --clr-flash-success-bg:     var(--color-success-bg);
        --clr-flash-success-border: #22c55e;
        --clr-flash-success-text:   var(--color-success-text);
        --clr-flash-error-bg:       var(--color-danger-bg);
        --clr-flash-error-border:   var(--color-danger);
        --clr-flash-error-text:     var(--color-danger-text);
        --clr-flash-warning-bg:     var(--color-warning-bg);
        --clr-flash-warning-border: #f59e0b;
        --clr-flash-warning-text:   var(--color-warning-text);
        --clr-danger-text:        var(--color-danger-text);
        --clr-danger-border:      #fca5a5;
        --clr-danger-hover-bg:    var(--color-danger-bg);
        --clr-badge-green-bg:     var(--color-success-bg);
        --clr-badge-amber-bg:     var(--color-warning-bg);
        --clr-badge-red-bg:       var(--color-danger-bg);
        --clr-dot-checkout:       #7c3aed;
        --clr-dot-checkin:        var(--color-success-text);
        --clr-chart-line:         var(--color-text);
        --clr-chart-line-fill:    rgba(15, 23, 42, 0.06);
        --clr-chart-border:       var(--color-surface);
        --clr-chart-grid:         rgba(15, 23, 42, 0.04);
        --clr-chart-muted:        var(--color-text-subtle);
        --clr-bar-fill:            var(--slate-500);
    }

    [data-theme="dark"] {
        /* Surfaces — deeper blacks, no blue tint. */
        --color-bg:           #0c111c;
        --color-bg-subtle:    #131a28;
        --color-surface:      #161e2e;
        --color-surface-soft: #1a2235;

        /* Text */
        --color-text:            #f4f6fa;
        --color-text-muted:      #a4abbb;
        --color-text-subtle:     #6b7588;
        --color-text-on-primary: #ffffff;

        /* Borders */
        --color-border:        #232c40;
        --color-border-strong: #2d3850;
        --color-border-focus:  #7984f5;

        /* Primary — desaturated, tuned for dark ground. */
        --color-primary:       #7984f5;
        --color-primary-hover: #9098f8;
        --color-primary-soft:  rgba(121, 132, 245, 0.14);

        /* Status — full saturation reads harsh on dark, so we use
           lighter text + low-alpha background tints. */
        --color-success-bg:   rgba(7, 148, 85, 0.15);
        --color-success-text: #6ce9a6;
        --color-warning-bg:   rgba(220, 104, 3, 0.15);
        --color-warning-text: #fdb022;
        --color-danger:       #f97066;
        --color-danger-hover: #fda29b;
        --color-danger-bg:    rgba(217, 45, 32, 0.15);
        --color-danger-text:  #fda29b;
        --color-info-bg:      rgba(21, 112, 239, 0.15);
        --color-info-text:    #84caff;

        /* Shadows — deeper, no blue tint. */
        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
        --shadow-sm:
            0 1px 2px rgba(0, 0, 0, 0.25),
            0 1px 3px rgba(0, 0, 0, 0.30);
        --shadow-md:
            0 2px 4px rgba(0, 0, 0, 0.30),
            0 4px 8px -2px rgba(0, 0, 0, 0.40),
            0 8px 16px -4px rgba(0, 0, 0, 0.20);
        --shadow-lg:
            0 4px 6px rgba(0, 0, 0, 0.30),
            0 12px 20px -4px rgba(0, 0, 0, 0.50),
            0 24px 32px -8px rgba(0, 0, 0, 0.30);
        --shadow-xl:
            0 8px 12px rgba(0, 0, 0, 0.40),
            0 20px 32px -8px rgba(0, 0, 0, 0.60),
            0 40px 56px -12px rgba(0, 0, 0, 0.40);
        --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.40);

        --focus-ring: 0 0 0 4px rgba(121, 132, 245, 0.30);

        /* Legacy aliases — dark-theme overrides for pre-15.0.B styles. */
        --clr-hover:        #1f273b;
        --clr-focus-border: #4a5571;
        --clr-focus-shadow: rgba(255, 255, 255, 0.08);
        --clr-placeholder:  #4a5571;
        --clr-primary-hover: var(--slate-200);
        --clr-overlay:      rgba(0, 0, 0, 0.55);
        --clr-shadow:       rgba(0, 0, 0, 0.20);
        --clr-shadow-lg:    rgba(0, 0, 0, 0.40);
        --clr-row-hover:    #1f273b;
        --clr-track-bg:     #1a2235;
        --clr-flash-info-border:    #3b82f6;
        --clr-flash-success-border: #22c55e;
        --clr-flash-error-border:   var(--color-danger);
        --clr-flash-warning-border: #f59e0b;
        --clr-danger-border:        #7f1d1d;
        --clr-dot-checkout:         #a78bfa;
        --clr-chart-line-fill:      rgba(244, 246, 250, 0.08);
        --clr-chart-grid:           rgba(255, 255, 255, 0.06);
        --clr-bar-fill:             var(--slate-400);
    }

    /* Honor reduced motion preference everywhere. */
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
        }
    }
}