/* ============================================================
   GOLF DC — Design Tokens
   CSS Custom Properties: Colors, Typography, Spacing, Elevation
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,400;0,600;0,700;0,900;1,400&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,300;1,9..40,400&family=Roboto+Mono:wght@400;500&display=swap');

:root {
  /* ── Brand Greens ──────────────────────────────────────── */
  --color-fairway:        #2D5016;
  --color-rough:          #4A7C2F;
  --color-deep-rough:     #1A2F0A;
  --color-fairway-light:  #D4E8C2;

  /* ── Monument / Earth ─────────────────────────────────── */
  --color-monument:       #E8DFD0;
  --color-sand-trap:      #C9B99A;
  --color-cart-path:      #6B6560;
  --color-cart-path-lt:   #A09A95;

  /* ── Accents ───────────────────────────────────────────── */
  --color-flag-red:       #C0392B;
  --color-flag-red-dark:  #922B21;
  --color-scorecard:      #F5EDD8;

  /* ── Neutrals ─────────────────────────────────────────── */
  --color-white-tee:      #FAFAF7;
  --color-white:          #FFFFFF;
  --color-ink:            #1C1B18;

  /* ── Semantic ─────────────────────────────────────────── */
  --color-bg-page:        var(--color-white-tee);
  --color-bg-card:        var(--color-white);
  --color-bg-card-tinted: var(--color-monument);
  --color-bg-dark:        var(--color-deep-rough);
  --color-bg-brand:       var(--color-fairway);

  --color-text-primary:   var(--color-ink);
  --color-text-secondary: var(--color-cart-path);
  --color-text-muted:     var(--color-cart-path-lt);
  --color-text-inverse:   var(--color-white-tee);
  --color-text-link:      var(--color-fairway);
  --color-text-link-hover:var(--color-rough);

  --color-border:         var(--color-sand-trap);
  --color-border-strong:  var(--color-cart-path);
  --color-border-brand:   var(--color-fairway);
  --color-border-focus:   var(--color-rough);

  --color-cta-bg:         var(--color-flag-red);
  --color-cta-bg-hover:   var(--color-flag-red-dark);
  --color-cta-text:       var(--color-white);

  --color-success:        #3A7D44;
  --color-warning:        #B8860B;
  --color-error:          var(--color-flag-red);
  --color-info:           #2B6CB0;

  /* ── Typography ───────────────────────────────────────── */
  --font-display: 'Barlow Condensed', sans-serif;
  --font-body:    'DM Sans', 'Helvetica Neue', sans-serif;
  --font-ui:      'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-mono:    'Roboto Mono', 'Courier New', monospace;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  /* Major Third scale (1.25×), base 16px */
  --text-xs:   0.64rem;   /* 10px */
  --text-sm:   0.8rem;    /* 13px */
  --text-base: 1rem;      /* 16px */
  --text-md:   1.25rem;   /* 20px */
  --text-lg:   1.563rem;  /* 25px */
  --text-xl:   1.953rem;  /* 31px */
  --text-2xl:  2.441rem;  /* 39px */
  --text-3xl:  3.052rem;  /* 49px */
  --text-4xl:  3.815rem;  /* 61px */
  --text-5xl:  4.768rem;  /* 76px */

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  --ls-tight:   -0.02em;
  --ls-normal:  0em;
  --ls-wide:    0.04em;
  --ls-wider:   0.08em;
  --ls-widest:  0.15em;

  /* ── Spacing (8px base) ───────────────────────────────── */
  --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-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --gap-xs: var(--space-2);
  --gap-sm: var(--space-3);
  --gap-md: var(--space-6);
  --gap-lg: var(--space-10);
  --gap-xl: var(--space-16);

  --content-max-width: 1120px;
  --content-padding:   var(--space-8);

  /* ── Radii ────────────────────────────────────────────── */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(26,47,10,0.06);
  --shadow-sm: 0 1px 4px rgba(26,47,10,0.10);
  --shadow-md: 0 4px 12px rgba(26,47,10,0.12);
  --shadow-lg: 0 8px 24px rgba(26,47,10,0.14);

  /* ── Transitions ──────────────────────────────────────── */
  --transition-fast: 150ms ease-out;
  --transition-base: 200ms ease-out;

  /* ── Borders ──────────────────────────────────────────── */
  --border-thin:  1px;
  --border-base:  1.5px;
  --border-thick: 2px;
}