/*
    Cal Sans UI Geo — the brand face. Vendored under wwwroot/fonts rather than pulled from a CDN, same
    reason markerclusterer.js is: one origin, no third party in the render path, and it works offline in
    tests. OFL, licence alongside the files.

    Four weights, and the face has no 800 — anything asking for one gets a synthesised faux-bold that
    does not match the real 700. If a heading needs more weight, it gets 700, not 800.
*/
@font-face {
    font-family: 'Cal Sans UI Geo';
    src: url('../fonts/CalSansUI-GeoRegular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cal Sans UI Geo';
    src: url('../fonts/CalSansUI-GeoMedium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cal Sans UI Geo';
    src: url('../fonts/CalSansUI-GeoSemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cal Sans UI Geo';
    src: url('../fonts/CalSansUI-GeoBold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Fingli brand. Kept as hex because that is what the design specifies — converting to OKLCH would
       only make them harder to check against it. --primary is remapped so buttons, links and focus
       rings pick up the brand; --accent is left alone deliberately, since shadcn uses it for hover
       backgrounds and lime hovers would be awful.

       --brand-light and --brand-rule replaced seven hand-picked near-whites that had drifted across
       eight files — three washes and four hairlines, none of them a full step apart. Every surface wash
       is --brand-light and every hairline is --brand-rule; do not reintroduce a per-component grey. */
    --brand-purple: #4b01f9;
    --brand-green: #9dfc45;
    --brand-graphite: #2f2f2f;
    --brand-light: #f1f1f1;
    --brand-rule: #e3e3e3;

    --font-sans: 'Cal Sans UI Geo', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Core colors using OKLCH color space */
    --background: oklch(1 0 0);
    --foreground: oklch(0.145 0 0);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.145 0 0);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.145 0 0);
    --primary: var(--brand-purple);
    --primary-foreground: oklch(0.985 0 0);
    --secondary: var(--brand-light);
    --secondary-foreground: oklch(0.205 0 0);
    --muted: var(--brand-light);
    --muted-foreground: oklch(0.556 0 0);
    --accent: var(--brand-light);
    --accent-foreground: oklch(0.205 0 0);
    --destructive: oklch(0.577 0.245 27.325);
    --destructive-foreground: oklch(1 0 0);
    --border: var(--brand-rule);
    --input: var(--brand-rule);
    --ring: var(--brand-purple);
    --radius: 0.625rem;

    /* The navbar's height, declared globally rather than inside NavMenu.razor.css because /browse has
       to subtract it — `calc(100dvh - var(--navbar-height))` is what makes that page fill the viewport
       exactly instead of scrolling or clipping. The TS carried the same coupling as a hand-maintained
       comment on common-navbar.tsx warning that changing the navbar's padding breaks browse; this makes
       the dependency real, so the two cannot drift. NavMenu takes its height from here. */
    --navbar-height: 72px;
}

/* Matches NavMenu's own breakpoint, where the bar drops to its mobile height. */
@media (max-width: 1023px) {
    :root {
        --navbar-height: 56px;
    }
}

.dark {
    --background: oklch(0.145 0 0);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.205 0 0);
    --card-foreground: oklch(0.985 0 0);
    --popover: oklch(0.205 0 0);
    --popover-foreground: oklch(0.985 0 0);
    --primary: oklch(0.985 0 0);
    --primary-foreground: oklch(0.205 0 0);
    --secondary: oklch(0.269 0 0);
    --secondary-foreground: oklch(0.985 0 0);
    --muted: oklch(0.269 0 0);
    --muted-foreground: oklch(0.708 0 0);
    --accent: oklch(0.269 0 0);
    --accent-foreground: oklch(0.985 0 0);
    --destructive: oklch(0.577 0.245 27.325);
    --destructive-foreground: oklch(1 0 0);
    --border: oklch(0.269 0 0);
    --input: oklch(0.269 0 0);
    --ring: oklch(0.439 0 0);
}

* {
    border-color: var(--border);
}

body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
    /* Cal Sans Geo's default fit is loose at UI sizes; the design's own tracking. */
    letter-spacing: -0.005em;
    -webkit-font-smoothing: antialiased;
}

/* Form controls do not inherit the document font by default, but nothing here has to say so:
   blazorblueprint.css ships Tailwind's preflight, which already declares
   `button,input,select,optgroup,textarea{font:inherit;letter-spacing:inherit}` — and it is linked after
   this file, so a rule here would lose to it anyway. Five per-component `font-family: inherit` rules
   were deleted for the same reason. LandingShellTests.TheBrandFaceLoadsAndReachesFormControls is the
   guard: if that stylesheet ever stops being loaded, buttons drop to the UA font and the test says so. */

/* There was no brand focus indicator anywhere; the UA default is drawn in the *text* colour, which on
   the hero's coloured panels is close to invisible. Purple, with the offset doing the work: the ring
   lands on the surface *behind* the control, so the purple CTA on the green panel is ringed against
   green (5.7:1) rather than against itself. Green would fail on white — 1.4:1 — everywhere else. */
:focus-visible {
    outline: 2px solid var(--brand-purple);
    outline-offset: 2px;
}

::selection {
    background: var(--brand-green);
    color: var(--brand-graphite);
}