/* ==========================================================================
   Nearby design tokens — Atlas-aligned
   - Built on the Atlas Card design language (Midnight Velvet Vault):
       single deep accent (Atlas Violet) on a near-black canvas, restrained
       monochrome scale, editorial typography, oversized rounded buttons.
   - Existing variable names (--brand, --surface, --like, --radius-*) are
     preserved so legacy components keep working; only the *values* changed.
   - Functional state colors (--like, --pass, --match, --super) are kept as
     a documented exception: they're load-bearing for the matching UX.
   - Loaded BEFORE app.css so legacy classes that read these vars pick them up.
   - [data-theme="light"] on <html> opts into the Atlas-light variant.
   ========================================================================== */

:root {
    /* — Brand: single Atlas Violet accent — */
    --brand: #001391;                       /* Atlas Violet — primary CTAs only */
    --brand-2: #001391;                     /* Legacy alias; collapsed to single hue */
    --brand-gradient: var(--brand);         /* Legacy alias; gradient retired */
    --brand-strong: #001fc7;                /* Hover/active lift (slightly brighter) */

    /* — Accent: Atlas Violet lifted for the dark canvas (NB-22) —
         --brand is a FILL colour: text on it (--text-on-brand) is about 13:1, but
         violet drawn ON the canvas is 1.5:1 (#001391) or 2:1 (#001fc7), so a
         selected border in brand violet is close to invisible. Anything that
         draws violet on the canvas — selected/active/focus borders, accent text,
         links, progress strokes, map shapes — uses --accent instead. Never use
         --brand or --brand-strong as `color`, `border`, `outline` or `stroke`. */
    --accent: #8c9bff;
    --accent-soft: rgba(140, 155, 255, 0.14); /* tint behind a selected row */

    /* — Map: the tiles are always CARTO dark_all, in both themes —
         So shapes drawn on the map (match circles, the "you are here" dot) use
         --map-accent, which stays the dark-safe violet even when the light theme
         turns --accent into deep Atlas Violet. --map-tile is the lightest tile
         colour (roads/labels aside) and exists for the contrast contract. */
    --map-accent: #8c9bff;
    --map-tile: #2c2c2c;

    /* — Functional state palette (documented exception) —
         Used only by matching/state UI. Keep saturation low enough to coexist
         with the monochrome shell; never use as decorative chroma. */
    --like: #ec7d95;            /* coral — lifted from #d44a68 (3.9:1 on a card) */
    --like-soft: rgba(236, 125, 149, 0.18);
    --pass: #8a93a6;            /* neutral grey — "Pass" */
    --pass-soft: rgba(138, 147, 166, 0.18);
    --super: #d4a23c;           /* gold — Super-like */
    --super-soft: rgba(212, 162, 60, 0.18);
    --match: #5cb37f;           /* green — match / success */
    --match-soft: rgba(92, 179, 127, 0.18);
    --warn: #d4b837;
    --danger: #ee8a8a;          /* lifted from #d45a5a: 4.3:1 on a card was below AA */
    --danger-soft: rgba(238, 138, 138, 0.15);
    --info: #8aa8d6;            /* lifted from #6a90c4 for the same reason */
    --info-soft: rgba(138, 168, 214, 0.15);

    /* — Surfaces (Atlas dark canvas) — */
    --bg: #000000;                          /* Midnight Ink */
    --bg-elev-1: #1e1e1e;                   /* Smoked Glass */
    --bg-elev-2: #272727;                   /* Charcoal Grey */
    --bg-elev-3: #333333;                   /* Dark Slate */
    --bg-elev-4: #3d3d3d;                   /* Deep Graphite */

    /* Mist gradient retained for hero/landing atmospheric overlays.
         Per Atlas: photography is the depth, not shadows. */
    --bg-mesh: linear-gradient(in oklab, #141414 0%, #000000 100%);
    --gradient-mist: linear-gradient(in oklab, rgb(55, 60, 89) 0%, rgb(156, 151, 184) 100%);
    --gradient-dark: linear-gradient(in oklab, rgb(20, 20, 20) 0%, rgb(0, 0, 0) 100%);

    --surface: #1e1e1e;                     /* Smoked Glass — solid, not glass */
    --surface-strong: #272727;              /* Charcoal Grey */
    --surface-hover: #333333;               /* Dark Slate */
    --surface-border: rgba(248, 248, 248, 0.10);   /* decorative dividers only */
    --surface-border-strong: rgba(248, 248, 248, 0.20);
    --border: var(--surface-border-strong);        /* alias used by meets/legal */
    /* The edge that identifies a form control (WCAG 1.4.11: 3:1 against the
         surface it sits on). Decorative card borders stay --surface-border. */
    --control-border: #8a8a8a;

    /* — Text — */
    --text: #f8f8f8;                        /* Bright Silver */
    --text-strong: #ffffff;                 /* Pure White (highest contrast) */
    --text-soft: rgba(248, 248, 248, 0.80);
    --text-muted: #cccccc;                  /* Cadet Grey */
    --text-faint: #a0a0a0;                  /* Quietest text; still 4.5:1 on every surface */
    --text-on-brand: #f8f8f8;

    /* — Elevation —
         Atlas: "Refrain from hard, sharp shadows; rely on subtle background
         shifts and photography for depth." Shadows kept for popovers/modals
         only, deliberately soft. */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
    --shadow-glow-brand: none;              /* Retired — Atlas avoids glow */
    --shadow-glow-like: none;               /* Retired */

    /* — Radius (Atlas-named scale) — */
    --radius-default: 4px;                  /* default container radius */
    --radius-input: 8px;                    /* form inputs */
    --radius-md: 12px;                      /* cards (mid-tier) */
    --radius-square: 18px;                  /* dark square buttons */
    --radius-outline: 24px;                 /* ghost / outline buttons */
    --radius-pill: 128px;                   /* primary pill buttons */
    --radius-full: 999px;                   /* circular avatars / chips */

    /* Legacy aliases — keep existing scoped CSS working without churn */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-lg: 18px;
    --radius-xl: 24px;

    /* — Spacing (8px base, Atlas scale) — */
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 48px;
    --space-6: 64px;
    --space-7: 88px;
    --space-8: 104px;
    --space-9: 128px;
    --space-10: 144px;
    --space-11: 176px;

    /* — Typography —
         Sequel Sans Headline Book + ApercuMono Pro are the Atlas custom
         faces. We load Inter + IBM Plex Mono as the permitted substitutes.
         --font-sequel is reserved for a future commercial-font swap. */
    --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-display: var(--font-sans);
    --font-sequel: var(--font-sans);                        /* alias for the headline face */
    --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    /* The one type scale (NB-25). Every font-size in app CSS is one of these
         steps; there are no in-between rem values. Captions are 12px, not 10px:
         the smallest text on the site still has to be readable. */
    --text-caption: 12px;       --leading-caption: 1.5;
    --text-body-sm: 13px;       --leading-body-sm: 1.5;
    --text-body: 15px;          --leading-body: 1.67;
    --text-functional: 16px;    --leading-functional: 1.4;     --tracking-functional: 0.008em;
    --text-body-lg: 17px;       --leading-body-lg: 1.24;
    --text-title: 20px;         --leading-title: 1.3;
    --text-subheading: 23px;    --leading-subheading: 1.3;     --tracking-subheading: -0.008em;
    --text-heading-lg: 28px;    --leading-heading-lg: 1.17;    --tracking-heading-lg: -0.008em;
    --text-display: 40px;       --leading-display: 1.1;

    /* Legacy aliases, mapped onto the scale above. */
    --fs-xs: var(--text-caption);
    --fs-sm: var(--text-body-sm);
    --fs-base: var(--text-body);
    --fs-md: var(--text-body-lg);
    --fs-lg: var(--text-title);
    --fs-xl: var(--text-subheading);
    --fs-2xl: var(--text-heading-lg);
    --fs-3xl: var(--text-display);
    --lh-tight: 1.17;
    --lh-base: 1.5;
    --lh-loose: 1.67;
    --tracking-tight: -0.008em;
    --tracking-normal: 0;
    --tracking-wide: 0.008em;

    /* — Motion — */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast: 140ms;
    --dur-base: 220ms;
    --dur-slow: 360ms;

    /* — Layout — */
    --top-nav-h: 60px;
    --bottom-nav-h: 68px;
    --content-max: 1100px;

    /* — Glass blur retained for popovers / overlays only — */
    --glass-blur: 14px;
}

/* ── Atlas-light variant ──
     The brand spec is dark-only. We keep an "Atlas-light" override for users
     who explicitly opt in. It softens the canvas to off-white and lifts
     contrast on text, but keeps Atlas Violet as the single accent. */
:root[data-theme="light"] {
    --bg: #f8f8f8;                          /* Bright Silver as canvas */
    --bg-elev-1: #ffffff;
    --bg-elev-2: #f0f0f0;
    --bg-elev-3: #e8e8e8;
    --bg-elev-4: #d8d8d8;
    --bg-mesh: linear-gradient(in oklab, #ffffff 0%, #f0f0f0 100%);

    --surface: #ffffff;
    --surface-strong: #f8f8f8;
    --surface-hover: #f0f0f0;
    --surface-border: rgba(0, 0, 0, 0.10);
    --surface-border-strong: rgba(0, 0, 0, 0.20);

    --text: #000000;                        /* Midnight Ink */
    --text-strong: #000000;
    --text-soft: rgba(0, 0, 0, 0.80);
    --text-muted: #3d3d3d;                  /* Deep Graphite */
    --text-faint: #626262;                  /* #808080 was 3.7:1 on the light canvas */
    --text-on-brand: #f8f8f8;

    /* On a light canvas Atlas Violet itself is the readable accent (about 13:1). */
    --accent: #001391;
    --accent-soft: rgba(0, 19, 145, 0.08);
    --control-border: #767676;

    /* The state colours are tuned for the dark canvas; as text on off-white they
         fall to 2.4–3.7:1, so the light theme uses deeper shades of each. */
    --like: #b02f4c;
    --match: #2b7048;
    --super: #85601a;
    --warn: #76680f;
    --danger: #b03636;
    --info: #36608f;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);

    --like-soft: rgba(212, 74, 104, 0.10);
    --pass-soft: rgba(138, 147, 166, 0.12);
    --super-soft: rgba(212, 162, 60, 0.10);
    --match-soft: rgba(92, 179, 127, 0.10);
}

/* ── Contrast contract (NB-22, WCAG 2.2 AA) ──
     Frontend.Tests/ThemeContrastTests parses the lines below and checks every
     pair in BOTH themes, so a token change that breaks AA fails the build.
     Syntax: contrast(<min ratio>): <foreground tokens> on <background tokens>
     A background written "a/b" means token a composited over token b.
     4.5 = body text (1.4.3); 3 = UI component edges and graphics (1.4.11).
     Add a line when you add a token that is drawn on the canvas.

   contrast(4.5): --text --text-strong --text-soft --text-muted --text-faint --accent on --bg --bg-elev-1 --bg-elev-2 --bg-elev-3
   contrast(4.5): --match --danger --info --super --warn --like on --bg --bg-elev-1 --bg-elev-2
   contrast(4.5): --accent on --accent-soft/--bg-elev-1 --accent-soft/--bg-elev-2
   contrast(4.5): --match on --match-soft/--bg-elev-1
   contrast(4.5): --super on --super-soft/--bg-elev-1
   contrast(4.5): --danger on --danger-soft/--bg-elev-1
   contrast(4.5): --info on --info-soft/--bg-elev-1
   contrast(4.5): --text-on-brand on --brand --brand-strong
   contrast(4.5): --bg on --danger --match --super --accent
   contrast(3): --control-border --accent on --bg --bg-elev-1 --bg-elev-2 --bg-elev-3
   contrast(3): --map-accent on --map-tile
*/

/* ── Reduced motion ──
     One rule for the whole app (NB-22): every animation and transition,
     including the ones in component-scoped *.razor.css files, collapses to
     an instant change. Spinners stop spinning; their text still says
     "Loading". Scroll jumps instead of gliding. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-fast: 0ms;
        --dur-base: 0ms;
        --dur-slow: 0ms;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0ms !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Base body theming ── */
html, body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* The hero/page shell can opt into the dark gradient or mist gradient
     via .app-shell. Sections themselves stay flat per Atlas guidance. */
.app-shell {
    background: var(--bg);
    min-height: 100vh;
}