/* ==========================================================================
   Augusta Design System — Colors & Type
   Source of truth: Wolf Golf Game / Wolf Golf Game/Design/*.swift
   ========================================================================== */

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/fonts/CormorantGaramond-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/fonts/CormorantGaramond-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Color · Primary ---------- */
  --augusta-green:       #1A5E3A;  /* Masters green, used sparingly as accent */
  --augusta-green-deep:  #0F4128;  /* Pressed states + HomeView nav bar */

  /* ---------- Color · Surface (never pure white) ---------- */
  --cream:          #FAF7F0;  /* Default screen background */
  --cream-elevated: #F5F1E8;  /* Cards, elevated surfaces */
  --cream-sunken:   #EFEAE0;  /* Inputs, sunken areas */
  --cream-muted:    #E2DDD1;  /* Disabled/unavailable surfaces */

  /* ---------- Color · Ink (never pure black) ---------- */
  --ink-primary:   #1C1C1C;  /* Body text, scores */
  --ink-secondary: #5C5C5C;  /* Labels, captions */
  --ink-tertiary:  #8A8A8A;  /* Disabled, hints, chevrons */

  /* ---------- Color · Functional accents (used minimally) ---------- */
  --positive: #1A5E3A;  /* Winnings (same as augusta-green) */
  --negative: #8B2E2E;  /* Losses — muted burgundy, never bright red */
  --warning:  #A67B2E;  /* Muted gold — never alert-orange */

  /* ---------- Color · Brand gold (green surfaces ONLY) ---------- */
  --augusta-gold: #C49A3A;

  /* ---------- Color · Hairlines ---------- */
  --hairline:          #D8D2C4;  /* Divider on cream surfaces */
  --hairline-on-green: #3A6E50;  /* Divider on dark green surfaces */

  /* ---------- Semantic surface tokens ---------- */
  --bg:           var(--cream);
  --bg-elevated:  var(--cream-elevated);
  --bg-sunken:    var(--cream-sunken);
  --bg-disabled:  var(--cream-muted);
  --fg1:          var(--ink-primary);
  --fg2:          var(--ink-secondary);
  --fg3:          var(--ink-tertiary);
  --accent:       var(--augusta-green);
  --accent-deep:  var(--augusta-green-deep);
  --border:       var(--hairline);

  /* ---------- Type families ---------- */
  --font-serif: 'Cormorant Garamond', 'New York', 'Hoefler Text', 'Garamond', serif;
  --font-sans:  -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:  ui-monospace, 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;

  /* ---------- Type scale · tokenized ---------- */
  /* Serif headers — Cormorant Garamond SemiBold */
  --font-display-large: 600 34px/1.15 var(--font-serif);  /* Round titles */
  --font-display:       600 28px/1.2  var(--font-serif);  /* Screen headers */
  --font-headline:      600 22px/1.25 var(--font-serif);  /* Card titles */

  /* Sans body */
  --font-body:           400 16px/1.4 var(--font-sans);
  --font-body-emphasis:  500 16px/1.4 var(--font-sans);
  --font-label:          500 13px/1.3 var(--font-sans);   /* + text-transform: uppercase + tracking */
  --font-caption:        400 12px/1.3 var(--font-sans);

  /* Monospaced numerics — tabular */
  --font-score-large: 300 48px/1   var(--font-mono);
  --font-score:       400 22px/1.2 var(--font-mono);
  --font-score-small: 400 16px/1.2 var(--font-mono);
  --font-money:       400 17px/1.2 var(--font-mono);

  /* ---------- Proposed extensions (flagged in audit) ---------- */
  /* Cormorant Garamond Regular at display scale — hole numbers, game-over headers */
  --font-display-number: 400 48px/1   var(--font-serif);   /* Hole # (48pt Regular) */
  --font-display-hero:   400 32px/1.1 var(--font-serif);   /* Game-over header (32pt Regular) */
  --font-brand-mark:     600 14px/1   var(--font-serif);   /* "WOLF" brand strip, tracking 3 */
  --font-stepper:        400 24px/1   var(--font-sans);    /* +/- score stepper */
  --font-chevron:        300 18px/1   var(--font-sans);    /* "›" row chevron */

  /* ---------- Spacing ---------- */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-sm2: 10px;  /* proposed half-step — sm + 2, used ~30x in source */
  --sp-md:  16px;
  --sp-lg:  24px;  /* default screen horizontal padding */
  --sp-xl:  40px;  /* between major sections */
  --sp-xxl: 64px;  /* top-of-screen breathing room */

  /* ---------- Radius ---------- */
  --radius-button: 4px;
  --radius-card:   8px;

  /* ---------- Stroke ---------- */
  --stroke-hairline: 0.5px;

  /* ---------- Tracking presets ---------- */
  --tracking-label:  1.5px;
  --tracking-brand:  3px;
  --tracking-small:  1.2px;
}

/* ==========================================================================
   Semantic element defaults
   ========================================================================== */

html, body {
  background: var(--bg);
  color: var(--fg1);
  font: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 { font: var(--font-display-large); color: var(--fg1); margin: 0; }
h2, .h2 { font: var(--font-display);       color: var(--fg1); margin: 0; }
h3, .h3 { font: var(--font-headline);      color: var(--fg1); margin: 0; }

p, .body { font: var(--font-body); color: var(--fg1); margin: 0; }
.body-emphasis { font: var(--font-body-emphasis); color: var(--fg1); }
.caption { font: var(--font-caption); color: var(--fg2); }

.label {
  font: var(--font-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--accent);
}

.score-large { font: var(--font-score-large); font-variant-numeric: tabular-nums; color: var(--fg1); }
.score       { font: var(--font-score);       font-variant-numeric: tabular-nums; color: var(--fg1); }
.score-small { font: var(--font-score-small); font-variant-numeric: tabular-nums; color: var(--fg1); }
.money       { font: var(--font-money);       font-variant-numeric: tabular-nums; }
.money.is-positive { color: var(--positive); }
.money.is-negative { color: var(--negative); }
.money.is-zero     { color: var(--fg2); }

.hairline {
  height: var(--stroke-hairline);
  background: var(--hairline);
  border: 0;
  display: block;
  width: 100%;
}
.hairline--on-green { background: var(--hairline-on-green); }

/* Card — creamElevated surface + hairline border + 8pt radius + 16pt pad */
.augusta-card {
  background: var(--bg-elevated);
  border: var(--stroke-hairline) solid var(--hairline);
  border-radius: var(--radius-card);
  padding: var(--sp-md);
}

/* Input — sunken background, no border, hairline underline */
.augusta-input {
  background: var(--bg-sunken);
  border: 0;
  border-bottom: var(--stroke-hairline) solid var(--hairline);
  padding: var(--sp-sm2) var(--sp-md);
  font: var(--font-body);
  color: var(--fg1);
  width: 100%;
}

/* Buttons */
.btn {
  border-radius: var(--radius-button);
  padding: var(--sp-sm2) var(--sp-lg);
  font: var(--font-body-emphasis);
  cursor: pointer;
  transition: background-color 120ms ease-out, opacity 120ms ease-out;
  border: 0;
}
.btn--primary   { background: var(--accent); color: var(--cream); }
.btn--primary:active,
.btn--primary:hover { background: var(--accent-deep); }
.btn--secondary { background: transparent; color: var(--fg1); border: 1px solid var(--fg1); }
.btn--secondary:active { opacity: .6; }
.btn--text      { background: transparent; color: var(--fg1); padding: 0; }
.btn--text:active { text-decoration: underline; }

/* Section header (small caps tracked label) */
.section-header {
  font: var(--font-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--accent);
  display: block;
}
.section-header--on-green { color: var(--augusta-gold); }