/*
 * Design tokens. Every value here is derived from the design exports; see
 * docs/redesign/design-system.md for provenance. Nothing in this file may
 * reference a component — it is the vocabulary the rest of the CSS speaks.
 */
:root {
  --px-ground: #FFF8EE;
  --px-ink: #241C12;
  --px-ink-deep: #16130F;
  --px-surface: #FFFFFF;

  --px-accent: #EFA63C;
  --px-accent-ink: #8A5C12;
  --px-accent-mid: #B0781F;
  --px-accent-soft: #FDEFD8;

  --px-error: #B3261E;
  --px-error-strong: #8C1D18;
  --px-error-bg: #FDE7E4;
  --px-error-border: rgba(179, 38, 30, .28);

  --px-success: #2F5C2B;
  --px-success-icon: #3F7A3A;
  --px-success-bg: #E8F3E6;
  --px-success-border: rgba(63, 122, 58, .3);

  --px-warning-bg: var(--px-accent-soft);
  --px-warning-border: rgba(239, 166, 60, .5);
  --px-warning-text: var(--px-accent-ink);

  /* Borders are one hue at graduated opacity; the ladder is deliberate. */
  --px-line-hair: rgba(36, 28, 18, .08);
  --px-line-card: rgba(36, 28, 18, .10);
  --px-line-rule: rgba(36, 28, 18, .12);
  --px-line-input: rgba(36, 28, 18, .14);
  --px-line-control: rgba(36, 28, 18, .16);
  --px-line-check: rgba(36, 28, 18, .20);
  --px-line-strong: rgba(36, 28, 18, .38);

  /* On dark sections the same ladder inverts. */
  --px-line-on-dark: rgba(255, 248, 238, .12);
  --px-line-on-dark-strong: rgba(255, 248, 238, .30);

  --px-font-display: 'Bricolage Grotesque', Georgia, serif;
  --px-font-body: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --px-text-hero: clamp(40px, 6.2vw, 82px);
  --px-text-jumbo: clamp(88px, 20vw, 190px);
  --px-text-h1: clamp(34px, 5vw, 66px);
  --px-text-h2: clamp(26px, 3.6vw, 46px);
  --px-text-h2-sm: clamp(21px, 2.8vw, 34px);
  --px-text-h3: clamp(17px, 1.6vw, 21px);
  --px-text-numeral: clamp(26px, 3.4vw, 56px);
  --px-text-body-lg: clamp(15px, 1.3vw, 18px);
  --px-text-body: 15px;
  --px-text-body-sm: 13.5px;
  --px-text-label: 11.5px;
  --px-text-eyebrow: 12px;
  --px-text-caption: 12.5px;

  --px-tracking-hero: -.045em;
  --px-tracking-h1: -.04em;
  --px-tracking-h2: -.035em;
  --px-tracking-h3: -.02em;
  --px-tracking-eyebrow: .18em;
  --px-tracking-label: .12em;

  --px-leading-hero: .96;
  --px-leading-heading: 1.1;
  --px-leading-body: 1.65;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-12: 56px;
  --space-16: 64px;

  --px-section-sm: clamp(20px, 3vw, 40px);
  --px-section: clamp(44px, 5.5vw, 84px);
  --px-section-lg: clamp(52px, 7vw, 96px);
  --px-column-pad: clamp(28px, 4vw, 64px);

  --radius-xs: 7px;
  --radius-sm: 16px;   /* fields, small controls */
  --radius-md: 20px;   /* ticker chips, perk rows */
  --radius-lg: 26px;   /* cards */
  --radius-xl: 30px;   /* safety panels */
  --radius-2xl: 32px;  /* full-width panels */
  --radius-3xl: 36px;  /* the dark Drive panel */
  --radius-full: 999px;

  /* Depth comes from borders and hover lift, not drop shadows. The focus
     ring is the only shadow the system uses. */
  --px-focus-ring: 0 0 0 4px rgba(239, 166, 60, .16);

  --px-shell: 1200px;
  --px-shell-read: 1100px;
  --px-shell-form: 440px;

  --px-ease: .22s ease;
  --px-lift: -3px;
  --px-lift-lg: -6px;
}