/* ─────────────────────────────────────────────────────────────────────────────
   AlgoMap brand: the pieces every page shares.

   Split out of style.css so pages that are not the roadmap (lessons, problems)
   can have the tokens without the roadmap's global table/button/body rules.
   style.css still relies on these, so every view that loads style.css loads
   this file first.
   ───────────────────────────────────────────────────────────────────────────── */

/* Inter, with a metrics-matched local fallback.
   The headline used to be `font-weight: 900` on Arial — a weight Arial does not have.
   Chrome on Windows silently reaches into the separate Arial Black family, macOS
   renders 700, Android renders Roboto: three different typefaces at three different
   widths for the biggest element on the site. The size-adjust/override numbers below
   are Inter's own metrics, so `display=swap` re-renders with no layout shift. */
@font-face {
    font-family: 'Inter Fallback';
    src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
    size-adjust: 107.12%;
    ascent-override: 90.44%;
    descent-override: 22.52%;
    line-gap-override: 0%;
}

:root {
    /* Surfaces — one achromatic ramp. The page used to mix neutral greys with
       Tailwind slate (#4a5568, #b9c0c9, #94a3b8…), and blue-tinted text on
       neutral surfaces is most of what made it read cheap. */
    --bg-0: #06090F;
    --bg-1: #0A0E1A;          /* body */
    --surface-1: #0F172A;     /* a raised card */
    --surface-2: #151C2E;     /* a control on that card */
    --surface-3: #1B2338;     /* header bar / table head */

    /* Lines — three, not nine. On dark UI the separation comes from the border,
       not from the fill, so these matter more than the surface steps. */
    --line-1: #111725;        /* hairline inside a surface */
    --line-2: #1F2739;        /* default card border */
    --line-3: #323C52;        /* border that must read as interactive */

    /* Text — achromatic, to match. --text-3 clears WCAG AA on every surface here. */
    --text-1: #F1F5F9;
    --text-2: #94A3B8;
    --text-3: #7A8CA3;

    /* The action colour. Buttons and CTAs only - identical to the landing page's
       CTA gradient, so the two pages read as one product. */
    --cta: #EF4444;
    --cta-deep: #DC2626;
    --cta-lift: #F87171;

    /* The brand accent. Everything that highlights but is not a button. */
    --accent: #63D5CF;
    --accent-deep: #33A39D;
    --accent-lift: #96E3DF;
    --success: #34D399;
    --success-deep: #1F8A63;

    /* Elevation. Two layers each: a tight contact shadow that grounds the element,
       plus a wide cast shadow with NEGATIVE spread so the blur does not wash out
       into a grey halo. On a dark page the rim highlight does more work than the
       shadow — light from above catches the top bevel. */
    --rim: inset 0 1px 0 rgba(255, 255, 255, 0.055);
    --rim-lift: inset 0 1px 0 rgba(255, 255, 255, 0.09);
    --e1: 0 1px 2px rgba(0, 0, 0, 0.40), 0 6px 14px -6px rgba(0, 0, 0, 0.50);
    --e2: 0 2px 4px rgba(0, 0, 0, 0.45), 0 12px 24px -8px rgba(0, 0, 0, 0.60);
    --e3: 0 3px 8px rgba(0, 0, 0, 0.50), 0 28px 56px -18px rgba(0, 0, 0, 0.85);
    --glow-accent: 0 10px 30px -8px rgba(51, 163, 157, 0.55);

    --gate-ease: cubic-bezier(.22, .61, .36, 1);
    --gate-ease-out: cubic-bezier(.16, 1, .3, 1);
    --gate-pop: cubic-bezier(.34, 1.4, .64, 1);

    /* Type. Inter everywhere; code in the platform's own monospace. Naming a face
       before the generic `monospace` also avoids the browser's 13px monospace quirk. */
    --font-ui: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
}

/* Page-load bar (NProgress) in the brand accent instead of its default blue.
   Loaded after nprogress.min.css, so the same selectors win on order. */
#nprogress .bar { background: var(--accent); }
#nprogress .peg { box-shadow: 0 0 10px var(--accent), 0 0 5px var(--accent); }
#nprogress .spinner { display: none; }