/* Self+ marketing site design tokens.
 *
 * One theme only: dark. The app ships two themes (Mascu+ dark, Femi+ light)
 * but the marketing site is a single dark surface, so there is no light block
 * and no prefers-color-scheme branch here on purpose.
 *
 * Every value is named after its role in docs/design/STYLEGUIDE.md, and the
 * locked values are copied verbatim from the dark block of src/index.css:
 *   background  #121212  (STYLEGUIDE 2.1, locked)
 *   foreground  hsl(33 53% 94%)
 *   primary     hsl(22 49% 48%)  copper, never text (STYLEGUIDE Law 1)
 *   primary-glow hsl(22 60% 62%)
 * The site CSS references these variables and never a raw colour literal.
 */

:root {
  /* ---- Ground -------------------------------------------------------- */
  /* Neutral near-black, not brown. The warmth on the page comes only from
     the edge glows bleeding in, never from tinting the ground itself. */
  /* The bare channels are exported too, so the hero background fade can build
     partly transparent stops of the same ground colour without a raw literal. */
  --ground-hsl: 0 0% 4%;
  --ground: hsl(var(--ground-hsl));
  --ground-raised: hsl(0 0% 7%);

  /* ---- Brand accent (STYLEGUIDE 2.1, locked) ------------------------- */
  --primary: 22 49% 48%;
  --primary-glow: 22 60% 62%;
  /* Copper glass CTA (STYLEGUIDE Law 2: no solid fills, and section 4's
     GlassCTA spec: bg-primary/20, border-primary/40, backdrop blur). The
     label on top of it is white, never copper (Law 1). */
  --cta-fill: hsl(var(--primary-glow) / 0.2);
  --cta-fill-hover: hsl(var(--primary-glow) / 0.28);
  --cta-border: hsl(var(--primary) / 0.4);
  --cta-border-hover: hsl(var(--primary) / 0.55);

  /* ---- Text (STYLEGUIDE Law 1: never copper, never dark on dark) ------
     One documented exception, signed off by Stijn on 2026-09-07 for this
     page only: the full stop that closes the hero headline. It is a single
     punctuation mark, the same kind of exception the STYLEGUIDE already
     grants the "+" in the Self+ wordmark. No word, label or link is copper.
     --primary-glow, not --primary: at 48% L the darker copper is too dim
     against the near-black ground to read as deliberate. */
  --text-strong: hsl(33 53% 94%);
  --text-muted: hsl(33 20% 94% / 0.62);
  --text-faint: hsl(33 20% 94% / 0.46);
  --text-on-accent: hsl(0 0% 100%);
  --text-mark: hsl(var(--primary-glow));

  /* ---- Glass (STYLEGUIDE 2.2.B: translucent fill + hairline border) --- */
  --glass-fill: hsl(0 0% 100% / 0.045);
  --glass-fill-hover: hsl(0 0% 100% / 0.075);
  --glass-border: hsl(0 0% 100% / 0.11);
  --glass-border-hi: hsl(0 0% 100% / 0.16);
  --glass-highlight: hsl(0 0% 100% / 0.14);
  --glass-blur: blur(20px) saturate(140%);
  --glass-blur-strong: blur(28px) saturate(150%);

  /* ---- Shadows ------------------------------------------------------- */
  /* Dark theme only, so a near-black shadow is correct here; the light-mode
     shadow caps in STYLEGUIDE 5.1 do not apply to this page. */
  --shadow-glass:
    inset 0 1px 0 var(--glass-highlight),
    0 1px 2px hsl(0 0% 0% / 0.5),
    0 24px 60px -30px hsl(0 0% 0% / 0.9);
  /* Faint copper bloom under the glass CTA. Deliberately softer than a solid
     button's shadow: the CTA reads as lit glass, not as a copper block. */
  --shadow-cta-copper:
    inset 0 1px 0 hsl(0 0% 100% / 0.18),
    0 1px 2px hsl(0 0% 0% / 0.45),
    0 10px 34px -16px hsl(var(--primary) / 0.55),
    0 0 26px hsl(var(--primary) / 0.22);
  --shadow-frame:
    inset 0 1px 0 var(--glass-highlight),
    inset 0 0 0 1px hsl(0 0% 0% / 0.5),
    0 40px 100px -40px hsl(0 0% 0% / 1);

  /* ---- Radius (STYLEGUIDE 2.3) --------------------------------------- */
  --radius-pill: 9999px;
  --radius-control: 12px;
  --radius-card: 20px;
  --radius-frame: 44px;

  /* ---- Type ---------------------------------------------------------- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --size-display: clamp(38px, 4.6vw, 66px);
  /* Below 640px the hero headline must land on exactly three lines (no
     orphan single word on the last line) at both 390 and 430 wide, the two
     iPhone widths the marketing site is tuned for. 38px is the largest size
     that still wraps to three lines across that whole range. */
  --size-display-mobile: 38px;
  --size-section: clamp(36px, 4.5vw, 60px);
  --size-lead: clamp(16px, 1.25vw, 19px);
  --size-kicker: 12px;
  --size-cta: 15px;
  --size-nav: 14px;
  --size-caption: 12px;
  --tracking-kicker: 0.18em;
  --tracking-display: -0.03em;

  /* ---- Layout -------------------------------------------------------- */
  --measure: 1160px;
  --measure-text: 760px;
  --gutter: 24px;
  --nav-height: 64px;
  /* Vertical rhythm between sections. One value, so every section below the
     hero breathes the same way. */
  --section-space: clamp(88px, 11vh, 148px);
  --hub-gap: 16px;

  /* ---- Motion (STYLEGUIDE 11: quiet, short, never bouncy) ------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
}