/* ==========================================================================
   Axoniverse design tokens — light
   --------------------------------------------------------------------------
   Single source of truth for the visual system. Every page and product
   surface reads from here — do not hard-code colours, sizes, or spacing in
   component CSS.

   Replaces the dark foundation, which is preserved at design/archive-dark/.
   Token names are identical in both sets.

   Rendered reference: design/system.html
   ========================================================================== */

:root {
  color-scheme: light;

  /* ------------------------------------------------------------------------
     Surfaces — paper, tinted toward the accent.

     The dark set was deliberately untinted, because a hue in a dark
     background forces every product accent to harmonise with it. On paper the
     opposite is true: an untinted light grey reads as institutional, and grey
     with a single cool accent is the exact recipe every clinical and
     insurance interface uses. A few percent of the accent mixed into white
     costs nothing in flexibility and is what keeps the page from going
     sterile.

     Elevation also inverts. A dark ladder can climb indefinitely toward
     light, but a light ladder hits a ceiling at white, so "raised" is the
     top of the scale and depth below it comes from shadow instead of colour.
     ------------------------------------------------------------------------ */

  --surface-sunken: #e6f1ec; /* recessed bands, footer */
  --surface-base: #f4faf8; /* page background */
  --surface-raised: #ffffff; /* cards, header */

  /* The one role that reverses outright. On dark, overlay was a step further
     up the ladder; here there is nothing above white, so the states that used
     it — card hover, and the unfilled track behind a progress bar — need a
     step inward instead. Sits between base and sunken. */
  --surface-overlay: #edf5f2; /* hover states, bar tracks, popovers */

  /* ------------------------------------------------------------------------
     Text — near-black carrying the same green cast as the surfaces, so the
     ink never looks like it was dropped in from a different palette.

     Primary and secondary clear WCAG AAA (7:1) on every surface above;
     tertiary clears AA (4.5:1) with margin. The worst case on a light theme
     is the darkest surface, not the lightest, so all three are measured
     against --surface-sunken.
     ------------------------------------------------------------------------ */

  --text-primary: #0f1a17; /* headings, body — 15.38:1 worst case */
  --text-secondary: #414e48; /* supporting copy — 7.54:1 worst case */
  --text-tertiary: #535f5a; /* captions, legal — 5.76:1 worst case */

  /* ------------------------------------------------------------------------
     Borders — alpha-based so they layer correctly on any surface. Derived
     from the primary ink rather than pure black, which would read as a
     foreign grey against the tinted paper.
     ------------------------------------------------------------------------ */

  --border-subtle: rgba(15, 26, 23, 0.1);
  --border-strong: rgba(15, 26, 23, 0.2);

  /* ------------------------------------------------------------------------
     Accent — emerald.

     The dark set needed a pale tint, because saturated colour is too dark to
     read against graphite. On paper that constraint reverses: the accent has
     to be dark enough to sit on white, so it is the fully saturated hue
     rather than a tint of it. Emerald reads biological rather than digital,
     which is the point of the company, and it is the one strong hue that is
     nowhere near the blue-grey of a clinical interface.
     ------------------------------------------------------------------------ */

  --accent: #047857; /* 4.74:1 worst case as text, 5.48:1 white on fill */

  /* Hover darkens. On dark the accent lightened toward the viewer; against
     paper the same gesture has to deepen instead, or the control looks like
     it is fading out rather than responding. */
  --accent-hover: #036349;

  --accent-contrast: #ffffff; /* text/icons on an accent fill */
  --accent-tint: rgba(4, 120, 87, 0.08); /* tinted pill and badge fills */
  --accent-border: rgba(4, 120, 87, 0.26);

  /* Secondary hue, for gradients. Unlike the dark set this one is also held
     to a text-legible contrast, because the gradient is used on type and
     roughly half of every glyph lands in this colour. */
  --accent-secondary: #0c6a83; /* 5.33:1 worst case */

  /* The one gradient in the system, for highlighted terms and card headings. */
  --gradient-accent: linear-gradient(100deg, var(--accent), var(--accent-secondary));

  /* ------------------------------------------------------------------------
     Status — form errors only. Red is the one hue that never appears in the
     brand, so it can only ever mean "something needs fixing".
     ------------------------------------------------------------------------ */

  --danger: #b42318; /* 5.68:1 worst case as text */
  --danger-tint: rgba(180, 35, 24, 0.06);
  --danger-border: rgba(180, 35, 24, 0.45);

  /* ------------------------------------------------------------------------
     Type families
     ------------------------------------------------------------------------ */

  /* Manrope for display: geometric, but with semi-rounded terminals that keep
     the page from turning severe. Inter for body, chosen for legibility at
     small sizes.

     Manrope runs about 10% narrower than a standard grotesque with a 94%
     x-height, so it reads slightly smaller at the same pixel size. The scale
     below is unchanged because body copy is Inter and unaffected; the
     difference only touches display sizes, where 6% is imperceptible. */

  --font-display: "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ------------------------------------------------------------------------
     Type scale — every role is fluid between a 360px phone and a 1440px
     desktop, and the roles grow by different amounts.

     Headings carry most of the increase (about 1.6x the previous scale on
     desktop): they are read at a glance, and size is what gives a page its
     presence. Body copy grows about 1.3x, because it is read line by line,
     and doubling it would halve the words per line or double the line length.
     Small labels grow least, just enough to stay legible next to larger body
     copy. Phones grow least of all, since their width is already the limit.

     The previous scale is preserved at the git tag
     archive/site-v1-original-sizing.
     ------------------------------------------------------------------------ */

  --text-display: clamp(2.5rem, 0.8333rem + 7.407vw, 7.5rem); /* 40 → 120px, hero only */
  --text-h1: clamp(2.125rem, 1.25rem + 3.889vw, 4.75rem); /* 34 → 76px */
  --text-h2: clamp(1.875rem, 1.2917rem + 2.593vw, 3.625rem); /* 30 → 58px */
  --text-h3: clamp(1.3125rem, 1.1875rem + 0.5556vw, 1.6875rem); /* 21 → 27px */
  /* The step between h3 and h2, for card headings. */
  --text-xl: clamp(1.5625rem, 1.25rem + 1.389vw, 2.5rem); /* 25 → 40px */
  /* Prominent paragraphs, set in Inter, which is wider per character than the
     display face, so it stays a step below --text-xl. */
  --text-body-xl: clamp(1.3125rem, 1rem + 1.389vw, 2.25rem); /* 21 → 36px */
  --text-lg: clamp(1.1875rem, 1.0833rem + 0.463vw, 1.5rem); /* 19 → 24px, ledes */
  --text-base: clamp(1.0625rem, 0.9792rem + 0.3704vw, 1.3125rem); /* 17 → 21px, body */
  --text-sm: clamp(1rem, 0.9375rem + 0.2778vw, 1.1875rem); /* 16 → 19px, card copy */
  --text-xs: clamp(0.875rem, 0.8333rem + 0.1852vw, 1rem); /* 14 → 16px, captions */
  --text-eyebrow: clamp(0.78125rem, 0.7292rem + 0.2315vw, 0.9375rem); /* 12.5 → 15px, uppercase labels */

  /* The body size, as a unit of length. Component dimensions — spacing,
     padding, diagram boxes — are multiples of it, so a box keeps its
     proportion to the text inside it at every width. */
  --unit: var(--text-base);

  /* ------------------------------------------------------------------------
     Weights — 400 and 500 carry display and body. 600 is reserved for the
     wordmark and for inline emphasis.

     Dark type needed 600 to register, because light-on-dark glyphs bloom
     optically and emphasis has to out-shout that bloom. Dark-on-light does
     the reverse and looks a touch heavier already, so 600 now does more work
     than it did and should be used more sparingly, not less.
     ------------------------------------------------------------------------ */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* ------------------------------------------------------------------------
     Line height & tracking — large type needs tighter both.
     ------------------------------------------------------------------------ */

  --leading-tight: 1.12; /* display, h1, h2 */
  --leading-snug: 1.32; /* large statements */
  --leading-normal: 1.6; /* body */
  --leading-relaxed: 1.7; /* long-form paragraphs */

  --tracking-display: -0.035em;
  --tracking-heading: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.18em; /* uppercase eyebrows */

  /* ------------------------------------------------------------------------
     Spacing — quarters of the body size, so space grows with the text it
     separates. Step N is N quarters: --space-4 is one body size (17 → 21px).
     Only the steps actually in use are defined.
     ------------------------------------------------------------------------ */

  --space-1: calc(var(--unit) * 0.25);
  --space-2: calc(var(--unit) * 0.5);
  --space-3: calc(var(--unit) * 0.75);
  --space-4: var(--unit);
  --space-6: calc(var(--unit) * 1.5);
  --space-8: calc(var(--unit) * 2);
  --space-12: calc(var(--unit) * 3);
  --space-16: calc(var(--unit) * 4);
  --space-24: calc(var(--unit) * 6);

  /* Grows faster than the unit: larger headings need more air around a
     section than the body size alone would give them. */
  --section-y: clamp(4.5rem, 3rem + 6.667vw, 9rem); /* 72 → 144px */

  /* ------------------------------------------------------------------------
     Layout
     ------------------------------------------------------------------------ */

  /* 1440px keeps a three-up card row near 40 characters per line at the
     larger card copy size, the same as 1200px did at the old one. */
  --container: 1440px; /* full content width */
  --measure: calc(var(--text-h2) * 20); /* headings — roughly 40 characters at h2 */
  --measure-body: calc(var(--unit) * 32); /* body copy — roughly 66 characters */
  --gutter: clamp(1.25rem, 0.3333rem + 4.074vw, 4rem); /* page side padding, 20 → 64px */

  /* ------------------------------------------------------------------------
     Radii
     ------------------------------------------------------------------------ */

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-pill: 999px;

  /* ------------------------------------------------------------------------
     Elevation — new in the light system.

     The dark set had no shadow scale on purpose: a shadow is darkness, and
     darkness is invisible on a dark surface, so depth came from the surface
     ladder alone. Here the ladder tops out at white and cannot lift a card
     any further, so shadow carries the separation instead.

     Tinted with the same green-black as the ink. A neutral grey shadow on
     tinted paper reads as dirt.
     ------------------------------------------------------------------------ */

  --shadow-sm: 0 1px 2px rgba(9, 42, 33, 0.06); /* resting cards, inputs */
  --shadow-md: 0 4px 16px rgba(9, 42, 33, 0.08); /* hovered cards, header */
  --shadow-lg: 0 16px 40px rgba(9, 42, 33, 0.1); /* popovers, media frames */
  --shadow-accent: 0 8px 26px rgba(4, 120, 87, 0.22); /* primary buttons */

  /* ------------------------------------------------------------------------
     Motion
     ------------------------------------------------------------------------ */

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 0.2s;
  --duration-medium: 0.3s;
  --duration-slow: 0.7s;
}