/* LID Group — tokens bound to the Revolut design system.
 * Display font: Aeonik Pro (proprietary, Pangram Pangram) → Satoshi (Fontshare) as
 * working substitute. Font stack falls through to real Aeonik Pro automatically
 * if self-hosted: "Aeonik Pro", "Satoshi", system-ui, sans-serif.
 * Two-mode canvas: true black (#000) storytelling / white (#fff) catalogue.
 * Single accent: cobalt violet (#494fdf) — scarce, one use per viewport max.
 */
:root {
  /* ─── canvas / surface ───────────────────────────────────────
     The page canvas is WHITE. --bg/--fg/--surface/--border are the
     *current scope's* semantics, and default to the light palette.
     Sections that stay dark (hero card, werte cards, footer, mobile
     drawer) re-declare them via .on-dark in styles.css, so component
     rules can use var(--fg) etc. without knowing which mode they're
     in. --fg-light/--border-light keep meaning "ink on white" in
     both modes; --bg-light likewise stays literally white. ──────── */
  /* Kinetic reference: an off-white canvas, not pure white. #fff is
     harsh at full-page scale and kills the soft-grey cards; a few
     points down gives the cards something to sit on. */
  --bg: #F5F5F4;            /* canvas — warm off-white */
  --bg-light: #ffffff;      /* literal white — cards that must read lifted */
  --bg-dark: #0B0B0B;       /* the single dark card, footer, dark islands */
  --surface: #ffffff;       /* surface-elevated — white cards on the canvas */
  --surface-soft: #EAEAE8;  /* surface-soft — recessed grey cards */
  --surface-deep: #DEDEDC;  /* surface-deep — inset wells */

  /* ─── text ──────────────────────────────────────────────────────
     --fg-light/-2 mean "primary/secondary text on the current
     canvas", not "on white". With a black canvas they resolve to
     white, so components written against them stay readable. ───── */
  --fg: #0E0E0D;             /* ink */
  --fg-2: #8A8A87;           /* body grey */
  --fg-light: #0E0E0D;
  --fg-light-2: #8A8A87;
  --muted: #A8A8A4;          /* metadata / captions */
  /* Second half of a two-tone headline. Was #BFBFBB — closer to the
     canvas and a stronger fade, but only 1.69:1 against #F5F5F4, well
     under the 3:1 WCAG needs even for large text. #8E8E8B measures
     3.01:1. The trade is real: the fade is now a normal ink-to-grey
     step rather than a sentence dissolving into the page. */
  --fg-dim: #8E8E8B;

  /* ─── borders ───────────────────────────────────────────────── */
  --border: rgba(14,14,13,0.10);
  --border-light: rgba(14,14,13,0.10);
  --border-strong: rgba(14,14,13,0.28);
  --divider-soft: rgba(14,14,13,0.06);

  /* ─── Signal palette ────────────────────────────────────────────
     Lifted from the hero ripple, which is where this palette was found.
     Amber through hot orange into plum and violet: the warm end carries
     actions, the cool end gives the brand somewhere to go that is not
     just "more orange". Exposed as five named stops so the gradient and
     the UI draw from the same values instead of drifting apart.
     Replaces the previous single-hue ember ramp. */
  --signal-1: #FFA24E;   /* amber      */
  --signal-2: #F55F19;   /* hot orange */
  --signal-3: #CD3C4A;   /* red        */
  --signal-4: #8C3168;   /* plum       */
  --signal-5: #4E2A72;   /* violet     */

  --accent: var(--signal-2);         /* actions */
  --accent-bright: var(--signal-1);  /* hover / highlight */
  --accent-deep: #B8391F;            /* pressed — between orange and red */
  --accent-on: #ffffff;
  --gradient-brand: linear-gradient(135deg,
      var(--signal-2) 0%, var(--signal-3) 45%, var(--signal-4) 78%, var(--signal-5) 100%);
  /* Glossy lozenge — dark stops at both ends read as a lit 3-D object */
  --gradient-chrome: linear-gradient(180deg,
      #7A1C00 0%, #E63A05 22%, #FF7A2E 48%, #FF5A12 62%, #B02800 88%, #6B1700 100%);

  /* ─── semantic ───────────────────────────────────────────────── */
  --success: #00a87e;
  --warn: #ec7e00;
  --danger: #e23b4a;

  /* ─── typography — free stand-ins for the Hobro stack. Each maps to
     a licensed original we hold no files for; if those are ever
     licensed, add them ahead of the stand-in in the same stack:
       Clash Display 700 → Kamerik 205 Bold          (bold display)
       Zodiak 300 Italic → Freight Big Pro Light Ital (serif accent)
       Switzer           → PP Neue Montreal           (body / UI)
       JetBrains Mono    → Akkurat Mono               (micro-labels)
     General Sans stays as the second fallback — it is what the site
     used before, so nothing collapses to a system font. ─────────── */
  /* Clash Display is now WORDMARK ONLY — the logo and the hero LID
     GROUP. A heavy uppercase display face used at every heading level
     reads loud rather than expensive; reserving it makes it a mark
     rather than a texture. */
  --font-wordmark: "Clash Display", "General Sans", system-ui, sans-serif;
  /* Headings share the body face, separated by size and space instead
     of by a second typeface. Fewer voices = calmer, more premium. */
  --font-display: "Switzer", "General Sans", system-ui, -apple-system, sans-serif;
  --font-body:    "Switzer", "General Sans", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* Heading metrics. Leading was 0.88, which only works for tight
     uppercase; mixed case has descenders and needs room to breathe.
     Tracking goes slightly more negative because lighter weights look
     looser at the same value. */
  --display-tracking: -0.034em;   /* headline / wordmark */
  --display-leading:  0.98;
  --tracking-label:   0.02em;     /* mono micro-labels — was inline 12x */
  --label-tracking:   0.06em;

  /* Type scale — Revolut: display sizes 20–136px, weight 500 tight */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   24px;
  --text-2xl:  clamp(28px, 3.5vw, 40px);
  --text-3xl:  clamp(40px, 5.5vw, 80px);
  --text-4xl:  clamp(52px, 9vw, 136px); /* hero-display — flagship 80–136px */

  /* Raised from 1.5. Generous leading on body copy is one of the most
     reliable premium signals and costs nothing but height. */
  --leading-body:   1.62;
  --leading-tight:  1.0;  /* Revolut display: lineHeight: 1.0 hard rule */

  /* ─── spacing — Revolut base unit 4px, working scale on 8px ──── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  /* Raised from 88/64/48. Generous vertical space is the cheapest
     premium signal available — it costs only scroll depth. */
  --section-y-desktop: 140px; /* spacing.section */
  --section-y-tablet:  96px;
  --section-y-phone:   72px;
  --hero-y:  160px;           /* spacing.band — hero + closing sections */

  /* ─── radius — TWO rectangular values, deliberately.
     Seven different corner treatments (4/8/10/12/20/28/32px) was the
     clearest craft tell on the site; inconsistent corners register as
     unpolished without the viewer being able to name why.
       sm = controls (buttons, nav pills, inputs, menu rows)
       lg = surfaces (cards, panels, dropdowns, large blocks)
     --md/--xl are kept as aliases so existing references collapse onto
     the two values instead of needing every call site rewritten.
     --radius-pill stays: it is a distinct shape language for chips and
     tags, not drift. Circles (50%) likewise. ───────────────────────── */
  /* Kinetic runs much softer corners — the cards are nearly squircles.
     Still two values, just larger. */
  --radius-sm:   14px;
  --radius-md:   14px;  /* alias → sm */
  --radius-lg:   28px;
  --radius-xl:   28px;  /* alias → lg */
  --radius-pill: 9999px;

  /* ─── elevation — ONE scale, three steps ─────────────────────────
     Anchored on the job-card treatment: tight, low-alpha, close to the
     surface. Each step raises the far shadow's distance and alpha but
     keeps the near one almost unchanged, so cards read as lifting off
     the same page rather than as different materials.
     Tinted with the ink colour (14,14,13) rather than pure black —
     black shadows on a warm off-white canvas read slightly cold.
       sm = resting card    md = hover    lg = raised / open / modal
     Components must use these, not hand-rolled values. Divergence here
     is what made the stat cards and funnel steps look like different
     systems. */
  --shadow-sm: 0 1px 2px rgba(14,14,13,0.04), 0 2px 6px rgba(14,14,13,0.07);
  --shadow-md: 0 2px 4px rgba(14,14,13,0.05), 0 6px 16px rgba(14,14,13,0.08);
  --shadow-lg: 0 3px 6px rgba(14,14,13,0.06), 0 12px 28px rgba(14,14,13,0.10);
  /* Dark surfaces need a hairline, not a shadow — a cast shadow is
     invisible against near-black. */
  --shadow-dark-card: 0 0 0 1px rgba(255,255,255,0.08);
  --shadow-dark-raised: 0 1px 0 rgba(255,255,255,0.07), 0 4px 24px rgba(0,0,0,0.45);
  /* Inset hairlines for chips that need an edge rather than a cast shadow */
  --hairline-ink:   inset 0 0 0 1px rgba(14,14,13,0.14);
  --hairline-light: inset 0 0 0 1px rgba(255,255,255,0.22);
  --elev-flat: none;
  /* Derived from --accent, not hard-coded: this was still rgba(232,80,2)
     — the orange from before the signal palette landed — so every focus
     ring on the site was a colour that appears nowhere else in it. */
  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent) 42%, transparent);

  /* One motion scale. The stylesheet previously carried 21 different
     duration/easing combinations and used neither of the two tokens that
     already existed here. Each step below names a job, so a new component
     picks a role rather than inventing a number.
       press  — active/pressed feedback; deliberately sub-100ms so a click
                feels tactile rather than animated
       fast   — colour and opacity on small elements
       base   — the default: hovers, buttons, cards, chrome
       slow   — panels, accordions, nav state
       reveal — scroll-triggered entrances */
  --motion-press:  80ms;
  --motion-fast:   150ms;
  --motion-base:   220ms;
  --motion-slow:   320ms;
  --motion-reveal: 720ms;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);

  /* The top bar is position:fixed, so it contributes no flow height —
     any page that must not slide under it has to reserve this itself. */
  --nav-h: 64px;

  --container-max: 1200px;
  --container-gutter-desktop: 40px;
  --container-gutter-tablet:  28px;
  --container-gutter-phone:   18px;

  --accent-soft: color-mix(in oklab, var(--accent) 14%, transparent);
  --fg-soft:     color-mix(in oklab, var(--fg) 8%, transparent);
}