/*
 * AUTO-GENERATED by scripts/sync-design-system.mjs — DO NOT EDIT.
 * Edit the canonical source in design-system/ and run:
 *   node scripts/sync-design-system.mjs
 */
/*
 * HexArena shared design tokens — CSS custom property mirror.
 *
 * The single source of truth is landing-ui/DESIGN.md; the Chakra mirror of
 * these same values lives in ./colors.ts and ./tokens.ts and must stay in sync.
 * This file carries ONLY the :root token layer. App-specific resets and
 * component classes live in each app.
 *
 * Consume it from a surface that uses plain custom properties:
 *   @import '<relative>/design-system/tokens.css';
 */

:root {
  /* Color: yellow names actions, red names factual status, gray tones structure. */
  --color-gold: #dd9b3b;        /* Lobby Gold: wordmark and primary actions. */
  --color-gold-hover: #e5b166;  /* Gold Hover: one step up for gold controls. */
  --color-gold-soft: #edc88f;   /* Soft Gold: supporting emphasis, not hover. */
  --color-red: #d95a5a;         /* Status Red: compact factual status. */
  --color-ink: #0a0a14;         /* Map Ink: deepest page ground. */
  --color-deep: #151d28;        /* Deep Slate: alternate dark sections and footer. */
  --color-slate: #1f2f37;       /* Lobby Slate: navigation and principal content rail. */
  --color-border: #394a50;      /* Structural Gray: thin dividers. */
  --color-paper: #ebede9;       /* Map Paper: primary text on dark surfaces. */
  --color-paper-hover: #c7cfcc; /* Map Paper hover: secondary controls. */
  --color-muted: #a8b5b2;       /* Weathered Text: supporting copy. */

  /* Typography: Roboto Slab only for the wordmark, Merriweather Sans elsewhere. */
  --font-wordmark: 'Roboto Slab', Georgia, serif;
  --font-body: 'Merriweather Sans', Arial, sans-serif;

  --text-wordmark: clamp(1.25rem, 2vw, 1.85rem);
  --text-display: clamp(2.8rem, 5.5vw, 5.8rem);
  --text-headline: clamp(2rem, 3.6vw, 3.9rem);
  --text-title: clamp(1.25rem, 2vw, 1.65rem);
  /* Compact fixed title steps for dense application surfaces. */
  --text-title-lg: 1.5rem;
  --text-title-md: 1.25rem;
  --text-title-sm: 1rem;
  --text-body: 1rem;
  --text-label: 0.75rem;
  /* The header's navigation step: one notch up from --text-label. */
  --text-label-lg: 0.875rem;

  --weight-regular: 400;
  --weight-strong: 700;
  --weight-display: 760;

  --leading-body: 1.7;
  --leading-tight: 1.1;

  /*
   * Titles and labels are uppercase; the large statement steps stay sentence
   * case and draw tight. Apply --transform-title and --tracking-title together
   * on any heading that names a region, page, or record.
   */
  --transform-title: uppercase;
  --tracking-title: 0.04em;
  --tracking-label: 0.06em;
  --tracking-headline: -0.02em;
  --tracking-display: -0.035em;
  --tracking-wordmark: -0.025em;

  /* Spacing scale. */
  --space-xsmall: 4px;
  --space-small: 8px;
  --space-medium: 16px;
  --space-large: 32px;
  --space-xlarge: 64px;

  /* Shape: square major regions, 4px control corners, full rounding only for dots. */
  --radius-control: 4px;
  --radius-media: 0px;
  --radius-dot: 999px;

  /* Structure. */
  --header-height: 4rem;
  --content-max: 75rem;
}