/* lina4.ai design tokens, the SINGLE canonical source (D13). Every design primitive lives here
   exactly once: colour, on-accent ink, semantic status, fluid type scale, spacing, radius,
   elevation, motion (easing/durations) and the warm-classic type families (Punkt 0).

   Two consumers INHERIT from this one file, never re-declare it (D-062 one-source):
   - the website (web/): base.html links this file BEFORE style.css, so style.css and every
     template read the tokens via var(). Cache-buster spans both files (templating.py).
   - the Lina app (lina-app/): its web client embeds CSS inline in shell.ts and cannot <link>,
     so the app BUILD inlines this same file (build-inline consume path, agreed 2026-07-05).
     Do not hand-copy the values into shell.ts; the build carries them.

   Rule: change a token ONCE here. The circular-definition trap (a role pointing at var(--self)
   through a blanket tokenising sed) is why the values are literal hex/clamp; keep them literal. */

:root {
  --bg: #100C08;
  --surface: #1A140D;
  --surface2: #221A12;
  --border: #2E2417;
  --border2: #39301f33;
  /* interactive control outline: form fields need a >=3:1 edge against their surround (WCAG 1.4.11),
     where the hairline --border is deliberately too faint. Scoped to inputs, not the decorative rules. */
  --field-border: #73695B;
  --text: #F1ECE3;
  --muted: #9D9486;
  /* lifted just enough to clear AA (4.5:1) on surface2, the worst case for hints/badges/footer tagline */
  --faint: #8D8272;
  --ember: #EFA24A;
  --ember-deep: #E07B3C;
  --grad: linear-gradient(120deg, #F3B05C, #E07B3C);
  /* ink for text sitting on the ember gradient/solid (buttons, badges, chips): one source,
     was the raw #1B1206 repeated ~9x. */
  --on-accent: #1B1206;

  /* semantic status colours: one source per role. Previously ~15 raw hex values scattered across
     badges/ampel/meters/check-lists, already drifting (the teal appeared in both cases). Border and
     glow variants derive from these via color-mix(), so a role has exactly one value.
     warn reuses the deep ember (the warm "attention" tone), no separate hue. */
  --ok:     #7BD88F;
  --info:   #7CC4F2;
  --teal:   #6FD6C4;
  --danger: #E0795C;
  --warn:   var(--ember-deep);

  /* fluid type scale (D-058): everything in rem, clamped to the viewport */
  --step--2: clamp(0.72rem, 0.69rem + 0.14vw, 0.8rem);  /* caption tier: badges, meta, fine print */
  --step--1: clamp(0.84rem, 0.80rem + 0.20vw, 0.95rem);
  --step-0: clamp(1rem, 0.95rem + 0.28vw, 1.12rem);
  --step-1: clamp(1.15rem, 1.05rem + 0.6vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.2rem + 1.6vw, 2.1rem);
  --step-3: clamp(1.9rem, 1.4rem + 2.6vw, 2.9rem);
  /* display tier: hero headlines live in the scale too (one source). Two deliberate steps,
     a full-width centered hero and a smaller hero for a narrow/over-photo column. Same mobile
     floor (2.6rem) so both read identically on phones, where every hero is single-column. */
  --step-hero: clamp(2.6rem, 1.4rem + 5.4vw, 5.6rem);
  --step-hero-narrow: clamp(2.6rem, 1.4rem + 4.8vw, 4.6rem);
  --gutter: clamp(1.25rem, 0.6rem + 3vw, 1.75rem);

  /* spacing: deliberately fluid, not a fixed step ladder. Block rhythm is set per component with
     clamp() so it scales with the viewport (D-058); --gutter is the fluid page inline padding.
     A fixed --space-1..7 rem scale was carried here but never consumed on either surface
     (website or app), so it was removed rather than left as a design-system claim nothing honours. */

  /* radius scale: one calm, consistent set instead of ad-hoc per-component values.
     --r-xs is the small-control tier (badges, chips, meter fills) that was raw 0.3-0.4rem. */
  --r-xs: 0.35rem;
  --r-sm: 0.5rem;
  --r-md: 0.8rem;
  --r-lg: 1.2rem;
  --r-xl: 1.6rem;
  --r-pill: 2.5rem;

  /* elevation on the warm near-black: hierarchy comes from a light-catching hairline + a 1px inset top
     glint (a simulated overhead light), not a hard drop shadow which is invisible on this background.
     The glint is a WARM lamp light (amber-tinted white), not cool white, so the simulated overhead
     light reads as the workshop lamp (brand/visual.md), matching the warmed ground. */
  --shadow-card: 0 0 0 1px rgba(255, 244, 230, 0.05), inset 0 1px 0 rgba(255, 240, 220, 0.055),
                 0 1px 2px rgba(20, 12, 4, 0.5), 0 0.5rem 1.5rem rgba(0, 0, 0, 0.45);
  --shadow-lift: 0 0 0 1px rgba(255, 244, 230, 0.07), inset 0 1px 0 rgba(255, 240, 220, 0.065),
                 0 1rem 3rem rgba(0, 0, 0, 0.6);

  /* one easing + duration vocabulary so every hover/transition feels of a piece. The expo-out curve
     (fast start, long calm settle) reads "expensive" and quiet; no bounce (too playful for the brand).
     Hover enters fast, exits slow (Comeau): the in-duration is overridden on :hover. */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.14s;
  --t-med: 0.24s;
  --t-slow: 0.32s;
  --scrim: rgba(14, 10, 6, 0.6);

  /* type families (Punkt 0, warm-klassisch): a characterful antiqua for expressive display,
     a warm humanist grotesk for body/UI. Display is applied to the marketing/landing headings;
     the functional app chrome keeps the body grotesk for dense legibility. */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Work Sans", "Hanken Fallback", system-ui, sans-serif;
}