/* Arthera design tokens, V2 (7 Oct 2026): Direction 03, Black & Deep Orange. Deep orange #EC5008 leads,
   signal orange #F2743A is the highlight (the logo's right leaf, the growth-curve dot), black background.
   See ../../2026-10-07-arthera-brand-guidelines-v2/brand-spec.json.
   Rules: black is the background, deep orange is the energy. White and orange on black; black type on
   deep orange (5.7:1). Never white text on either orange. Logo: Two leaves, white + signal orange on black. */

@font-face { font-family: "Hanken Grotesk"; src: url("fonts/HankenGrotesk-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/HankenGrotesk-500.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/HankenGrotesk-600.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/HankenGrotesk-700.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: dark;

  /* brand */
  --orange: #EC5008;      /* lead accent (deep orange): buttons, the band, step numbers, ticks (5.7:1 on black) */
  --ember: #F2743A;       /* hover on deep-orange buttons */
  --highlight: #F2743A;   /* signal orange: the logo's right leaf, the growth-curve dot (7.3:1 on black) */
  --on-orange: #000000;   /* type on deep orange (5.7:1) */
  --on-orange-soft: #1A1A1A; /* secondary type on deep orange (4.8:1) */

  /* grounds */
  --page: #000000;        /* black: the page */
  --card: #121212;        /* cards, alternate band */
  --dark-top: #1A1A1A;    /* dark band gradient top */
  --dark: #0B0B0B;        /* dark bands, footer */
  --black: #000000;
  --graphite: #2A2A2A;    /* plates, avatars */
  /* Direction 03 ground, exactly as on the brand-directions board (directions_spec.py, "Black & Deep
     Orange", dk = 000000 / 0B0B0B / EC5008): a 145deg black linear gradient with two deep-orange glows,
     34% top-right and 16% bottom-left, each fading linearly to nothing at its ellipse edge.
     Used on the hero, the dark bands and the footer. */
  --ground-d03:
    radial-gradient(55% 90% at 88% 5%, rgba(236, 80, 8, 0.34), rgba(236, 80, 8, 0)),
    radial-gradient(50% 70% at 5% 105%, rgba(236, 80, 8, 0.16), rgba(236, 80, 8, 0)),
    linear-gradient(145deg, #000000 0%, #0B0B0B 100%);

  /* text */
  --ink: #FFFFFF;         /* headings + logo (21:1 on black) */
  --ink-soft: #D9D4CE;    /* body (14.3:1) */
  --ash: #A39E98;         /* secondary text (7.9:1 on black, 7.1:1 on cards) */
  --stone: #B8B2AB;       /* body on dark bands (10:1) */
  --on-dark: #FFFFFF;

  /* lines */
  --hairline: #2E2E2E;
  --hairline-dark: rgba(184, 178, 171, 0.22);

  /* type */
  --font: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-hero: clamp(2.6rem, 5.6vw, 4.9rem);
  --fs-hero-sm: clamp(2.2rem, 4.2vw, 3.5rem);
  --fs-xl: clamp(1.9rem, 3.4vw, 2.9rem);
  --fs-md: clamp(1.2rem, 1.7vw, 1.45rem);
  --fs-lead: clamp(1.06rem, 1.3vw, 1.2rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-eyebrow: 0.78rem;

  /* layout: 4px grid */
  --wrap: 1200px;
  --gutter: clamp(20px, 4vw, 48px);
  --sec-y: clamp(72px, 9vw, 120px);
  --radius: 12px;
  --radius-sm: 6px;
}