/* ============================================================
   Design tokens — single source of truth for the UI system.
   3 tiers: primitives → semantic → component.
   Identity: "clubhouse heritage" — deep pine, warm cream,
   muted brass, turf green. Serif display face for titles and
   big numbers; system sans for body/UI/tabular data.
   ============================================================ */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Safe-area insets (exposed to JS for canvas HUD) ---- */
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);

  /* ---- Primitives ---------------------------------------- */
  /* green ramp */
  --green-900: #0e1f16;   /* deep pine app background */
  --green-700: #16291d;   /* solid panel base */
  --green-500: #2e7d4f;   /* turf primary accent */
  --green-300: #63b98b;   /* active/links */

  /* brass ramp */
  --brass-600: #b08d4a;   /* muted brass */
  --brass-400: #cfa85e;   /* bright brass */

  /* neutral / cream-alpha ramp (dark-mode tuned) */
  --white: #ece5d3;
  --w-85: rgba(236, 229, 211, 0.87);
  --w-70: rgba(236, 229, 211, 0.72);
  --w-55: rgba(236, 229, 211, 0.56);
  --w-45: rgba(236, 229, 211, 0.46);
  --w-32: rgba(236, 229, 211, 0.34);
  --w-14: rgba(236, 229, 211, 0.15);
  --w-12: rgba(236, 229, 211, 0.13);
  --w-08: rgba(236, 229, 211, 0.09);
  --w-05: rgba(236, 229, 211, 0.06);

  /* status */
  --status-under:  #e0655c;   /* under par / red (golf convention) */
  --status-over:   #d9b96a;   /* over par */
  --status-birdie: #2e7d4f;
  --status-eagle:  #cfa85e;   /* brass, not pure gold */
  --status-error:  #e0655c;
  --status-hazard: #d98a5f;

  /* glass tints (pine, varying alpha) */
  --glass-faint: rgba(10, 22, 15, 0.55);
  --glass-solid: rgba(13, 26, 18, 0.94);

  /* ---- Semantic surfaces --------------------------------- */
  --surface-hud:    var(--glass-faint);   /* HUD chips */
  --surface-panel:  var(--glass-solid);   /* modal bodies */
  --surface-raised: var(--w-08);          /* inputs, secondary btn, list items */
  --surface-scrim:  rgba(6, 14, 9, 0.74); /* full-screen overlay backdrop */

  --border-hair: 1px solid var(--w-12);
  --border-edge: 1px solid var(--w-14);

  --blur-sm: 8px;
  --blur-md: 12px;
  --blur-lg: 16px;
  /* Lighter blur for HUD chrome that sits permanently over the live canvas
     (scorecard, HUD buttons, club row, spin slider) — backdrop-filter cost
     scales with kernel size and these recomposite every animation frame the
     canvas repaints, so they get a smaller radius than one-off/modal glass. */
  --blur-xs: 4px;

  /* ---- Accent -------------------------------------------- */
  --accent: var(--green-500);
  --accent-bright: var(--green-300);
  --accent-soft: rgba(46, 125, 79, 0.18);
  --accent-glow: 0 4px 24px rgba(46, 125, 79, 0.30);

  --brass: var(--brass-600);
  --brass-bright: var(--brass-400);
  --brass-soft: rgba(176, 141, 74, 0.14);

  /* ---- Text ---------------------------------------------- */
  --text: var(--white);
  --text-muted: var(--w-70);
  --text-dim: var(--w-55);
  --text-faint: var(--w-32);

  /* ---- Radius scale --------------------------------------- */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* ---- Spacing scale ------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;

  /* ---- Shadow scale -------------------------------------- */
  --shadow-1: 0 4px 18px rgba(0, 0, 0, 0.35);   /* HUD chip */
  --shadow-2: 0 8px 32px rgba(0, 0, 0, 0.50);   /* dropdown */
  --shadow-3: 0 12px 44px rgba(0, 0, 0, 0.55);  /* modal */

  /* ---- Type scale ---------------------------------------- */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --t-display: 76px;
  --t-h1: 22px;
  --t-h2: 19px;
  --t-body: 15px;
  --t-cap: 13px;
  --t-micro: 11px;
  --fw-reg: 500;
  --fw-med: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* ---- Motion -------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.12s;
  --dur-modal: 0.3s;

  /* ---- Z-index scale -------------------------------------
     Named layers for full-screen overlays. Values preserve the
     historical ad-hoc stacking order exactly (course/preview sat
     BELOW the card submenus; friends above them; name gate on top). */
  --z-course:      22;   /* course picker */
  --z-preview:     24;   /* hole preview flyover */
  --z-sheet-low:   30;   /* tour board, tournaments, add-course */
  --z-sheet:       40;   /* play/match/quick/bot/progress/auth/account, book-sheet */
  --z-friends:     42;
  --z-friend-prof: 44;
  --z-onboarding:  50;
  --z-username:    55;
  --z-gate:        60;   /* name-entry gate */
}