/* DTC Golf Club · design tokens v1.3
   Single source of truth. The website (site/index.html) and the brand guide
   (brand-system.html) both load this file. Change a value here and both update. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,700;12..96,800&family=IBM+Plex+Mono:wght@400;500&family=Yellowtail&display=swap");

:root {
  /* color */
  --dtc-volt:       #C8FF00;  /* Volt: logo, primary button, one highlight per screen */
  --dtc-forest:     #024724;  /* Forest: official logo green; bands, tiles, photo tint */
  --dtc-deep-rough: #15291D;  /* Deep Rough: primary background, the darkest main color */
  --dtc-midnight:   #041A10;  /* Midnight: darkest green, use sparingly (deep shadows, rare accents) */
  --dtc-surface:    #1B3625;  /* Locker Room: cards and panels on Deep Rough */
  --dtc-line:       #2C4D38;  /* Cart Path: hairlines, borders */
  --dtc-chalk:      #EEF2E6;  /* Scorecard Chalk: text on dark, light sections */
  --dtc-muted:      #8FAD99;  /* Morning Haze: secondary text on dark */
  --dtc-ink-soft:   #3B4A3F;  /* secondary text on Chalk */
  --dtc-birdie:     #FF5B3A;  /* Birdie Red: scarcity and errors only */

  /* type: headline face */
  --dtc-font-head:    "Archivo", "Helvetica Neue", Arial, sans-serif;
  --dtc-head-weight:  800;
  --dtc-head-stretch: 125%;   /* Archivo Expanded */
  --dtc-head-track:   -0.01em;
  --dtc-head-scale:   0.82;   /* size multiplier; retune if the headline face changes width */

  /* type: supporting faces */
  --dtc-font-body:   "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --dtc-font-script: "Yellowtail", "Brush Script MT", cursive;
  --dtc-font-mono:   "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* type scale (headline sizes include the head scale) */
  --dtc-text-display: calc(clamp(40px, 6.4vw, 84px) * var(--dtc-head-scale));
  --dtc-text-h1:      calc(clamp(30px, 4vw, 44px) * var(--dtc-head-scale));
  --dtc-text-h2:      calc(28px * var(--dtc-head-scale));
  --dtc-text-h3:      calc(22px * var(--dtc-head-scale));
  --dtc-text-lede:    19px;
  --dtc-text-body:    17px;
  --dtc-text-small:   14px;
  --dtc-text-label:   12px;   /* mono 500, uppercase, +0.08em */

  /* shape + space */
  --dtc-radius-card: 6px;
  --dtc-radius-tag:  2px;
  --dtc-radius-pill: 999px;
  --dtc-space-1: 4px;  --dtc-space-2: 8px;  --dtc-space-3: 12px; --dtc-space-4: 16px;
  --dtc-space-5: 24px; --dtc-space-6: 32px; --dtc-space-7: 48px; --dtc-space-8: 72px; --dtc-space-9: 96px;
  --dtc-max-width: 1180px;

  /* shapes */
  --dtc-flag-icon: polygon(0 0, 100% 28%, 2px 56%, 2px 100%, 0 100%); /* 9x12 icon in tags */
  --dtc-arrow:     polygon(0 0, 100% 50%, 0 100%);                    /* button arrow */
}