/*
  tokens.css - generated directly from DESIGN.md. Every value here is a
  literal restatement of a value in DESIGN.md's front-matter blocks
  (colors / typography / rounded / spacing). No page CSS should hardcode
  a hex, px radius, or spacing value outside this file - reference these
  custom properties instead.
*/

:root {
  /* ---- colors ---- */
  --color-primary: #C9A84C;
  --color-primary-deep: #A9873A;
  --color-primary-soft: #D9BE73;
  --color-primary-04: rgba(201, 168, 76, 0.04);
  --color-primary-08: rgba(201, 168, 76, 0.08);
  --color-primary-15: rgba(201, 168, 76, 0.15);
  --color-primary-25: rgba(201, 168, 76, 0.25);

  --color-ink: #080808;
  --color-ink-70: rgba(8, 8, 8, 0.7);
  --color-ink-45: rgba(8, 8, 8, 0.45);
  --color-ink-25: rgba(8, 8, 8, 0.25);

  --color-canvas: #ffffff;
  --color-cream: #F9F7F2;

  --color-hairline: rgba(8, 8, 8, 0.08);
  --color-hairline-gold: rgba(201, 168, 76, 0.3);

  --color-on-primary: #080808;
  --color-on-dark: #D9BE73;

  /* Decomposed RGB triplets - the one sanctioned restatement, needed for
     rgba()-based shadow/glow compositing where a hex custom property
     can't be split into components at render time. */
  --color-ink-rgb: 8, 8, 8;
  --color-primary-rgb: 201, 168, 76;
  --color-primary-soft-rgb: 217, 190, 115;
  --color-canvas-rgb: 255, 255, 255;
  --color-cream-rgb: 249, 247, 242;

  /* ---- typography: display-hero (hero headline only) ---- */
  --type-display-hero-font-family: 'General Sans', sans-serif;
  --type-display-hero-font-style: normal;
  --type-display-hero-font-weight: 300;
  --type-display-hero-font-size: clamp(3rem, 7vw, 6.2rem);
  --type-display-hero-line-height: 0.98;
  --type-display-hero-letter-spacing: -0.02em;

  /* ---- typography: display-section (section titles) ---- */
  --type-display-section-font-family: 'General Sans', sans-serif;
  --type-display-section-font-style: normal;
  --type-display-section-font-weight: 300;
  --type-display-section-font-size: clamp(2rem, 4vw, 3rem);
  --type-display-section-line-height: 1.1;
  --type-display-section-letter-spacing: -0.01em;

  /* ---- typography: display-card (card/timeline titles) ---- */
  --type-display-card-font-family: 'General Sans', sans-serif;
  --type-display-card-font-style: normal;
  --type-display-card-font-weight: 300;
  --type-display-card-font-size: 26px;
  --type-display-card-line-height: 1.15;

  /* ---- typography: body-lede (hero subhead) ---- */
  --type-body-lede-font-family: 'Space Grotesk', sans-serif;
  --type-body-lede-font-weight: 400;
  --type-body-lede-font-size: 18px;
  --type-body-lede-line-height: 1.6;

  /* ---- typography: body-md (card/paragraph body) ---- */
  --type-body-md-font-family: 'Space Grotesk', sans-serif;
  --type-body-md-font-weight: 400;
  --type-body-md-font-size: 14px;
  --type-body-md-line-height: 1.65;

  /* ---- typography: nav-link / eyebrow (nav, labels, status lines) ---- */
  --type-nav-link-font-family: 'Fira Code', monospace;
  --type-nav-link-font-weight: 400;
  --type-nav-link-font-size: 12px;
  --type-nav-link-letter-spacing: 0.03em;

  --type-eyebrow-font-family: 'Fira Code', monospace;
  --type-eyebrow-font-weight: 400;
  --type-eyebrow-font-size: 12px;
  --type-eyebrow-letter-spacing: 0.04em;

  /* ---- typography: stat-value (numeric stats, tabular) ---- */
  --type-stat-value-font-family: 'Fira Code', monospace;
  --type-stat-value-font-weight: 500;
  --type-stat-value-font-size: 28px;
  --type-stat-value-font-variant-numeric: tabular-nums;

  /* ---- typography: stat-label ---- */
  --type-stat-label-font-family: 'Fira Code', monospace;
  --type-stat-label-font-weight: 400;
  --type-stat-label-font-size: 11px;
  --type-stat-label-letter-spacing: 0.04em;

  /* ---- typography: tag (pills, tags, status chips) ---- */
  --type-tag-font-family: 'Fira Code', monospace;
  --type-tag-font-weight: 400;
  --type-tag-font-size: 11px;

  /* ---- typography: button ---- */
  --type-button-font-family: 'Space Grotesk', sans-serif;
  --type-button-font-weight: 500;
  --type-button-font-size: 15px;

  /* ---- geometry ---- */
  --radius-sharp: 2px;
  --radius-pill: 9999px;

  /* ---- spacing ---- */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 40px;
  --space-xxl: 56px;
  --space-huge: 100px;

  /* ---- layout ---- */
  --content-max-width: 1200px;
  --page-gutter: 32px;
}