/* RWT Design Tokens — single source of truth for all design system values.
   Lifted directly from drafts/design-spec.md Sections 1.1-1.4.
   Do not hard-code hex values, sizes, or spacing anywhere else. */

:root {
  /* === Surfaces === */
  --bg-black:     #0a0a0a;  /* Page background, default */
  --bg-charcoal:  #141414;  /* Header (scrolled), footer, slight surface lift */
  --bg-slate:     #1f1f1f;  /* Cards, form backgrounds */
  --bg-mid:       #2a2a2a;  /* Card hover, dividers, input fields */
  --bg-edge:      #3a3a3a;  /* Borders, subtle outlines */

  /* === Text === */
  --text-primary:   #f5f5f5;  /* Body copy default */
  --text-headline:  #ffffff;  /* Display/section headlines (Bebas Neue) */
  --text-muted:     #a8a8a8;  /* Secondary copy, captions, inactive nav */
  --text-disabled:  #5a5a5a;  /* Disabled labels, placeholder text */

  /* === Accent === */
  --red:          #cc2222;  /* Primary brand red. CTAs, eyebrow labels, focus ring */
  --red-hover:    #e63333;  /* Red button hover */
  --red-pressed:  #a81818;  /* Red button pressed */
  --red-soft:     #3a1010;  /* Dark red wash, almost never used */

  /* === State === */
  --success:  #3ba55c;  /* Form submission success */
  --error:    #e85a5a;  /* Form validation errors */
  --warning:  #e6b450;  /* Reserved, currently unused */

  /* === Spacing scale === */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* === Layout === */
  --content-max: 1280px;
  --pad-mobile:   16px;   /* space-4 */
  --pad-tablet:   32px;   /* space-6 */
  --pad-desktop:  64px;   /* space-8 */

  /* === Type — desktop sizes (mobile overrides via media query in base.css) === */
  --font-display:  'Bebas Neue', system-ui, sans-serif;
  --font-body:     'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  --fs-h1: 80px;
  --fs-h2: 56px;
  --fs-h3: 32px;
  --fs-eyebrow: 13px;
  --fs-body-large: 19px;
  --fs-body: 16px;
  --fs-body-small: 14px;
  --fs-caption: 12px;
  --fs-button: 15px;
  --fs-nav: 14px;

  --lh-display: 0.95;
  --lh-h2: 1.0;
  --lh-h3: 1.1;
  --lh-body: 1.6;
  --lh-body-tight: 1.4;

  --ls-display: 2px;
  --ls-h2: 1.5px;
  --ls-h3: 1px;
  --ls-uppercase: 1.5px;
  --ls-eyebrow: 2px;

  /* === Motion === */
  --transition-fast:    150ms ease-out;
  --transition-default: 250ms ease-out;
  --transition-slow:    400ms ease-out;

  /* === Misc === */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --header-height-desktop: 72px;
  --header-height-mobile: 60px;
  --logo-height-desktop: 44px;
  --logo-height-mobile: 36px;

  --tap-target-min: 44px;  /* Apple accessibility minimum, locked */
}

/* Mobile type overrides */
@media (max-width: 767px) {
  :root {
    --fs-h1: 52px;
    --fs-h2: 38px;
    --fs-h3: 26px;
    --fs-body-large: 17px;
    --pad-mobile: 16px;
  }
}