/* ==========================================================================
   Aceloop design tokens — the single source of visual truth.
   Semantic roles only; page components must not invent raw values.

   v4 (owner correction): the accepted cobalt/white palette and material
   system is restored exactly as approved before the monochrome iteration.
   The v3 SCALE recalibration is kept — true 100% browser zoom carries the
   proportions the previous system had at 80% zoom, via real values only
   (type clamps, spacing, radii, containers, nav geometry, control heights).
   ========================================================================== */

@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-latin-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/eb-garamond-latin-variable.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin-variable.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  /* ------------------------------------------------------------ color --- */
  --bg-page: #F7F8FC;
  --bg-raise: #FFFFFF;
  --bg-inset: #EEF2FA;
  --bg-hover: #E8EDF8;
  --border: #DDE3EF;
  --border-strong: #C5CFE3;

  --ink: #222631;
  --ink-strong: #0D0F14;
  /* Contrast ramp on the light surfaces (white / #F7F8FC / #EEF2FA).
     --ink-faint was #9AA3B5, which is 2.54:1 on white. It is a text token,
     72 of its 74 uses are `color`, and it carries 10-11px copy (captions,
     stat labels, table headers, durations, footnotes) on 26 pages, so every
     one of those failed WCAG AA by a wide margin. Both levels move down so
     the three-step ramp survives instead of collapsing into two:
        ink   15.11 / 14.21 / 13.47
        soft   6.73 /  6.34 /  6.00
        faint  4.82 /  4.55 /  4.30
     Text that sits on --bg-inset uses --ink-soft, since faint lands at
     4.30 there. */
  --ink-soft: #545C6B;
  --ink-faint: #6A7284;

  --cobalt: #2858D6;
  --cobalt-bright: #3567E8;
  --cobalt-deep: #1D46B4;
  --cobalt-wash: rgba(53, 103, 232, 0.08);
  --link: #2857CE;
  --selection: rgba(53, 103, 232, 0.2);

  /* #16805B was 4.29:1 on --ok-wash, so every "Undetectable" status pill
     missed AA. #147753 clears it at 4.83 and still reads as the same green. */
  --ok: #147753;
  --ok-wash: #E4F3EC;
  --warn: #A35F00;
  --warn-wash: #FBF0DC;
  --bad: #C83E52;
  --bad-wash: #FBE9EC;

  /* identity only — never product emphasis */
  --gold: #ECC176;
  --gold-deep: #D0942F;

  /* scenic ramp (echoes the La Concha sky/bay) */
  --sky-0: #F3F8FE;
  --sky-1: #E4EFFC;
  --sky-2: #C9DFF8;
  --sky-3: #9CC2F0;
  --bay: #2E6FD8;

  /* the one dark proof moment */
  --night: #0B1A3A;
  --night-raise: #13254B;
  --night-inset: #0E1F42;
  --night-border: rgba(202, 218, 248, 0.16);
  --night-ink: #EAF0FC;
  --night-soft: #A6B6D8;

  /* ------------------------------------------------------------- type --- */
  --font-ui: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-display: "EB Garamond", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --text-display-1: clamp(2.35rem, 1.15rem + 3.5vw, 3.9rem);  /* scenic hero */
  --text-display-2: clamp(1.7rem, 0.95rem + 2.1vw, 2.65rem);  /* closing/auth */
  --text-h1: clamp(1.6rem, 1.2rem + 1.3vw, 2.2rem);
  --text-h2: clamp(1.28rem, 1.05rem + 0.8vw, 1.68rem);
  --text-h3: 1.06rem;
  --text-h4: 0.9rem;
  --text-body-lg: 0.97rem;
  --text-body: 0.875rem;
  --text-small: 0.78rem;
  --text-micro: 0.71rem;

  --leading-tight: 1.08;
  --leading-heading: 1.18;
  --leading-body: 1.6;

  /* ------------------------------------------------------------ space --- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 10px; --s-4: 13px; --s-5: 19px;
  --s-6: 26px; --s-7: 38px; --s-8: 52px; --s-9: 76px; --s-10: 102px;
  --section-y: clamp(56px, 4.8vw + 32px, 96px);

  /* ----------------------------------------------------------- radius --- */
  --r-ctl: 10px;      /* buttons, fields, chips */
  --r-card: 18px;     /* cards, panels */
  --r-stage: 26px;    /* hero stages, product frames, major bands */
  --r-pill: 999px;

  /* -------------------------------------------------------- elevation --- */
  --e-1: 0 1px 2px rgba(13, 23, 44, 0.05), 0 2px 8px rgba(13, 23, 44, 0.04);
  --e-2: 0 2px 6px rgba(13, 23, 44, 0.05), 0 12px 30px -12px rgba(13, 23, 44, 0.14);
  --e-3: 0 8px 24px -8px rgba(13, 23, 44, 0.16), 0 34px 76px -26px rgba(13, 23, 44, 0.24);

  /* ------------------------------------------------------------ glass --- */
  --glass-bg: rgba(255, 255, 255, 0.78);
  --glass-bg-strong: rgba(255, 255, 255, 0.88);
  --glass-border: rgba(221, 227, 239, 0.75);
  --glass-blur: 20px;
  /* over-scene variant (hero, auth panel chrome) */
  --glass-scene-bg: rgba(8, 26, 64, 0.22);
  --glass-scene-border: rgba(255, 255, 255, 0.28);

  /* ----------------------------------------------------------- motion --- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 150ms;
  --t-med: 240ms;
  --t-slow: 400ms;

  /* ------------------------------------------------------- containers --- */
  --w-text: 620px;      /* ~66ch long-form at the recalibrated body size */
  --w-content: 1010px;
  --w-wide: 1220px;

  /* fixed pill-header clearance: top inset + row height + breathing room */
  --nav-clearance: 60px;

  /* ---------------------------------------------------------- z-index --- */
  --z-nav: 100;
  --z-lab: 200;
  --z-dialog: 300;
  --z-toast: 400;

  /* --------------------------------------------------------- focus ring - */
  --focus-ring: 0 0 0 2px var(--bg-page), 0 0 0 4px var(--cobalt-bright);
  --focus-ring-night: 0 0 0 2px var(--night), 0 0 0 4px #7FA4F4;
}

@media (min-width: 768px) {
  :root { --nav-clearance: 66px; }
}