/* ============================================================================
   Eventrika design tokens — single source of truth (DS-01).
   Loaded before app.css and component styles so everything can consume these.

   "Front Row" design system (OWNER-DEC-01 resolved, 2026-07-10): one owner —
   Azure holds trust and every action, Coral holds energy (on-sale, live, the
   fan Buy CTA) and is rationed on purpose, Stone (a warm gray) is the whole
   canvas. Purple is retired from the brand; it survives only as data color
   #7C5CFC in charts and seat tiers.

   Scales here are the standard for:
     DS-05 radius · DS-06 elevation · DS-07 spacing · DS-08 breakpoints.
   Migrate hard-coded values to these tokens incrementally as files are touched.
   ============================================================================ */
:root {
    /* ---- Azure ramp — primary: trust, actions, selection, focus, links ---- */
    --tr-azure-50: #EEF2FE;
    --tr-azure-100: #DCE4FD;
    --tr-azure-200: #BECEFB;
    --tr-azure-300: #93ADF6;
    --tr-azure-400: #6285EE;
    --tr-azure-500: #3D62E3;
    --tr-azure-600: #2A4BD1;
    --tr-azure-700: #223CAB;
    --tr-azure-800: #1F3488;
    --tr-azure-900: #1E2F6D;
    --tr-azure-950: #151F44;

    /* ---- Coral ramp — accent: energy, on-sale, live, the fan Buy CTA ---- */
    --tr-coral-50: #FFF3EE;
    --tr-coral-100: #FFE3D7;
    --tr-coral-200: #FEC7B0;
    --tr-coral-300: #FBA184;
    --tr-coral-400: #F87A56;
    --tr-coral-500: #F5623C;
    --tr-coral-600: #E04A22;
    --tr-coral-700: #BB3A18;
    --tr-coral-800: #8F2E14;
    --tr-coral-900: #6E2712;
    --tr-coral-950: #3E1308;

    /* ---- Stone ramp — warm neutral: text, surfaces, borders ---- */
    --tr-stone-50: #FAFAF9;
    --tr-stone-100: #F4F4F2;
    --tr-stone-200: #E7E6E2;
    --tr-stone-300: #D6D4CE;
    --tr-stone-400: #B0ACA3;
    --tr-stone-500: #85817A;
    --tr-stone-600: #5F5B54;
    --tr-stone-700: #454239;
    --tr-stone-800: #2C2A25;
    --tr-stone-900: #1A1917;
    --tr-stone-950: #100F0E;

    /* ---- Semantic roles — every color has one job ---- */
    --tr-primary: #2A4BD1;        /* azure-600 · primary actions, selection, focus, links */
    --tr-primary-dark: #223CAB;   /* azure-700 · hover/pressed */
    --tr-secondary: #2A4BD1;      /* legacy alias — the purple/blue split is over; one owner */
    --tr-secondary-dark: #223CAB;
    --tr-accent: #F5623C;         /* coral-500 · on-sale, live, energy */
    --tr-accent-2: #E04A22;       /* coral-600 · the fan Buy CTA, accent hover */
    --tr-amber: #F59E0B;          /* amber fill — dots, progress, held seats */
    --tr-amber-dark: #92580A;     /* warning text (5.4:1 on white) */
    --tr-success: #15803D;        /* paid, confirmed, published (5.0:1) */
    --tr-warning: #92580A;        /* low stock, holds expiring */
    --tr-danger: #D22730;         /* refunds, cancels, destructive (4.9:1) */
    --tr-info: #0E7490;           /* neutral notices, tips (4.8:1) */

    /* ---- Surfaces & states ---- */
    --tr-ink: #1A1917;            /* stone-900 · primary text */
    --tr-muted: #5F5B54;          /* stone-600 · secondary text */
    --tr-bg: #F6F5F3;             /* canvas — app background behind everything */
    --tr-card: #FFFFFF;           /* cards, panels, menus, sheets */
    --tr-sunken: #F4F4F2;         /* wells, table zebra, inset areas */
    --tr-line: #E7E6E2;           /* default hairline + card edges */
    --tr-line-strong: #D6D4CE;    /* inputs, emphasis dividers */
    --tr-selected: #EEF2FE;       /* selected row, active nav, chosen seat */

    /* ---- Dark theme — a true token flip, not a patch ---- */
    --tr-dark-canvas: #14161C;
    --tr-dark-surface: #1C1D23;
    --tr-dark-elevated: #24262E;
    --tr-dark-border: #2C2E38;
    --tr-dark-ink: #F5F4F1;
    --tr-dark-muted: #A6A39A;
    --tr-dark-primary: #5E7DEE;
    --tr-dark-accent: #FF7A57;

    /* ---- Chart palette — eight categorical hues; purple is data-only ---- */
    --tr-chart-1: #2A4BD1;
    --tr-chart-2: #F5623C;
    --tr-chart-3: #0E9C8A;
    --tr-chart-4: #F59E0B;
    --tr-chart-5: #7C5CFC;
    --tr-chart-6: #22A25A;
    --tr-chart-7: #E85D9E;
    --tr-chart-8: #64748B; /* chart-only slate — data color, not a UI neutral */

    /* ---- Border radius (DS-05) ---- */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --radius-pill: 999px;

    /* ---- Elevation (DS-06): borders first, shadow second — shadows are for
       things that genuinely float (menus, popovers, modals) ---- */
    --shadow-xs: 0 1px 2px rgba(26, 25, 23, 0.05);
    --shadow-sm: 0 2px 4px rgba(26, 25, 23, 0.06), 0 1px 2px rgba(26, 25, 23, 0.04);
    --shadow-md: 0 8px 24px rgba(26, 25, 23, 0.10);
    --shadow-lg: 0 20px 48px rgba(26, 25, 23, 0.16);

    /* ---- Spacing scale (DS-07): 8-point rhythm, 4 and 2 for fine work ---- */
    --space-05: 2px;
    --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;

    /* ---- Typography — Space Grotesk sets the tone, Hanken does the work,
       mono for codes and money ---- */
    --font-sans: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
    --font-display: "Space Grotesk", system-ui, -apple-system, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;
    --text-xs: 0.78rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.4rem;
    --text-2xl: 1.75rem;

    /* ---- Motion — fast, small, purposeful; never performs ---- */
    --motion-instant: 80ms;
    --motion-fast: 140ms;
    --motion-base: 220ms;
    --motion-slow: 320ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
    --ease-exit: cubic-bezier(0.4, 0, 1, 1);

    /* ---- Breakpoints (DS-08) — aligns with MudBlazor: sm 640 · md 960 · lg 1280.
       CSS media queries can't read custom properties, so these are the documented
       standard to use in @media rules going forward. ---- */
    --bp-sm: 640px;
    --bp-md: 960px;
    --bp-lg: 1280px;
    --bp-xl: 1536px;
}

/* === Dark mode: flip the FOREGROUND tokens only. The background tokens
   (--tr-bg / -card / -line) intentionally stay light — surfaces that need a
   dark background get an explicit override in app.css so we never invert a
   light-text-on-light-card combination. ========================================= */
html.eventrika-dark,
body.eventrika-dark {
    --tr-ink: #F5F4F1;
    --tr-muted: #A6A39A;
}