/* ============================================================================
   GolfOS Design Tokens — the single source of brand truth for the app.
   Mirrored (intentionally, for the public/private boundary) in
   dashboard/design-tokens.css. Light mode is primary (outdoor use); dark mode
   reuses the same component system. Self-hosted OFL fonts (no CDN — strict CSP).
   ========================================================================= */

/* ---- Fonts (self-hosted WOFF2, SIL OFL 1.1) -------------------------------
   Archivo is a variable font (400–700 in one file). Libre Caslon Display is a
   single display weight used for headlines, the wordmark, and numerals. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;            /* variable range */
  font-display: swap;
  src: url("./fonts/archivo-latin-var.woff2") format("woff2");
}
@font-face {
  font-family: "Libre Caslon Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/librecaslondisplay-latin.woff2") format("woff2");
}

:root {
  /* ---- Brand palette (raw, named per the brand sheet "Clubhouse colors") -- */
  --gos-fairway:      #0A5C2E;   /* primary, buttons */
  --gos-fairway-deep: #08431F;   /* pressed / deep */
  --gos-fairway-2:    #1C6B3D;   /* lighter green for dark-surface accents */
  --gos-ink:          #14361F;   /* text, dark surfaces */
  --gos-ink-soft:     #3A4A40;   /* secondary dark */
  --gos-gold:         #B08D3C;   /* accent: "OS", highlights, data marks */
  --gos-gold-bright:  #D9B463;   /* accent highlight / focus */
  --gos-sand:         #F3EFE4;   /* surface, cards */
  --gos-paper:        #FBF8F1;   /* page background (lightest cream) */
  --gos-paper-2:      #F6F2E8;   /* alt page tint */
  --gos-linen:        #EDE7D9;   /* inset / secondary surface */
  --gos-flag:         #C0392B;   /* ALERT ONLY — never decorative */
  --gos-sage:         #8A9890;   /* muted text on light */
  --gos-sage-2:       #9BA89F;
  --gos-slate:        #6E7D72;   /* muted / stale */
  --gos-mist:         #B9C2BA;

  /* ---- Semantic tokens (LIGHT — default) -------------------------------- */
  --bg:            var(--gos-paper);
  --bg-grad:       linear-gradient(180deg, #FBF8F1 0%, #F6F2E8 100%);
  --surface:       #FFFFFF;          /* cards */
  --surface-2:     var(--gos-sand);  /* insets, secondary fills */
  --surface-3:     var(--gos-linen);
  --ink:           var(--gos-ink);   /* primary text */
  --ink-2:         var(--gos-ink-soft);
  --muted:         var(--gos-slate); /* secondary text */
  --line:          #E4DCCB;          /* warm hairline */
  --line-strong:   #D6CCB6;

  --primary:       var(--gos-fairway);
  --primary-deep:  var(--gos-fairway-deep);
  --primary-ink:   #FFFFFF;          /* text on primary */
  --accent:        var(--gos-gold);
  --accent-bright: var(--gos-gold-bright);
  --on-accent:     var(--gos-ink);

  /* ---- State tokens ----------------------------------------------------- */
  --success:       var(--gos-fairway);
  --success-bg:    #E6F0E8;
  --warning:       #A86A1F;          /* amber (caution) */
  --warning-bg:    #F5E9D5;
  --error:         var(--gos-flag);  /* alert only */
  --error-bg:      #F7E4E1;
  --info:          #5B7C99;
  --info-bg:       #E5ECF1;
  --selected-bg:   var(--gos-fairway);
  --selected-ink:  #FFFFFF;
  --disabled-ink:  #A9B2A8;
  --disabled-bg:   #EFECE2;

  /* ---- Freshness (Command Center + per-section indicators) -------------- */
  --fresh-current: var(--gos-fairway);
  --fresh-aging:   var(--gos-gold);
  --fresh-stale:   #A86A1F;
  --fresh-unknown: var(--gos-slate);

  /* ---- Data viz (restrained, green→gold→neutral) ------------------------ */
  --data-1: #0A5C2E;
  --data-2: #3A7D52;
  --data-3: #B08D3C;
  --data-4: #6E7D72;
  --data-5: #5B7C99;

  /* ---- Focus ring (visible on light AND on green) ----------------------- */
  --focus-ring:  var(--gos-gold-bright);
  --focus-halo:  rgba(10, 92, 46, 0.28);

  /* ---- Typography ------------------------------------------------------- */
  --font-display: "Libre Caslon Display", Georgia, "Times New Roman", serif;
  --font-ui:      "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-num:     "Libre Caslon Display", Georgia, serif; /* scores / counts / data */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* Type scale (px). Display = Caslon, the rest = Archivo. */
  --fs-display: 40px;
  --fs-h1:      28px;
  --fs-h2:      20px;
  --fs-title:   17px;
  --fs-body:    17px;
  --fs-label:   13px;   /* Archivo letterspaced caps */
  --fs-caption: 12px;
  --fs-metric:  40px;   /* Caslon big numerals */
  --fs-metric-sm: 26px;

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-body:  1.45;
  --tracking-caps: 0.12em;  /* Archivo label caps */

  /* ---- Spacing (4px base) ---------------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 48px;

  /* ---- Radii ------------------------------------------------------------ */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;

  /* ---- Borders / shadows (warm, soft) ----------------------------------- */
  --bd: 1px solid var(--line);
  --shadow-card: 0 1px 2px rgba(20,54,31,.05), 0 6px 18px rgba(20,54,31,.06);
  --shadow-pop:  0 10px 30px rgba(20,54,31,.16);
  --shadow-sticky: 0 -6px 18px rgba(20,54,31,.08);

  /* ---- Sizing ----------------------------------------------------------- */
  --tap:    56px;   /* primary tap target */
  --tap-sm: 48px;   /* secondary */
  --content-max: 560px;

  --speed: 160ms;
}

/* ---- Dark mode (secondary; same component system) -------------------------
   Applied when [data-theme="dark"] is set OR the OS prefers dark and the user
   has not chosen light. Contrast verified: Sand text on Ink ≈ 12:1.
   NOTE: the [data-theme="dark"] block and the prefers-color-scheme block below
   intentionally duplicate the same token values — keep them in sync. */
[data-theme="dark"] {
  --bg:          var(--gos-ink);
  --bg-grad:     linear-gradient(180deg, #14361F 0%, #102B19 100%);
  --surface:     #1B4128;
  --surface-2:   #102B19;
  --surface-3:   #0E2415;
  --ink:         #F3EFE4;
  --ink-2:       #D7DECF;
  --muted:       #9BA89F;
  --line:        rgba(243,239,228,.14);
  --line-strong: rgba(243,239,228,.24);

  --primary:      #2E8B54;     /* lightened so it reads on dark */
  --primary-deep: #246E43;
  --primary-ink:  #FFFFFF;
  --accent:       var(--gos-gold-bright);
  --on-accent:    var(--gos-ink);

  --success-bg: rgba(46,139,84,.18);
  --warning:    #D9A441; --warning-bg: rgba(217,164,65,.16);
  --error:      #E0746B; --error-bg: rgba(224,116,107,.16);
  --info:       #88A8C4; --info-bg: rgba(136,168,196,.16);
  --selected-bg: #2E8B54;
  --disabled-ink: #6E7D72; --disabled-bg: rgba(243,239,228,.06);

  --fresh-current: #54B27C;
  --fresh-aging:   var(--gos-gold-bright);
  --fresh-stale:   #D9A441;
  --fresh-unknown: #9BA89F;

  --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.28);
  --shadow-pop:  0 10px 30px rgba(0,0,0,.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    /* Follow OS preference until the user picks explicitly. Mirror dark block. */
    --bg: #14361F; --bg-grad: linear-gradient(180deg,#14361F,#102B19);
    --surface:#1B4128; --surface-2:#102B19; --surface-3:#0E2415;
    --ink:#F3EFE4; --ink-2:#D7DECF; --muted:#9BA89F;
    --line:rgba(243,239,228,.14); --line-strong:rgba(243,239,228,.24);
    --primary:#2E8B54; --primary-deep:#246E43; --primary-ink:#FFFFFF;
    --accent:#D9B463; --on-accent:#14361F;
    --success-bg:rgba(46,139,84,.18);
    --warning:#D9A441; --warning-bg:rgba(217,164,65,.16);
    --error:#E0746B; --error-bg:rgba(224,116,107,.16);
    --info:#88A8C4; --info-bg:rgba(136,168,196,.16);
    --selected-bg:#2E8B54; --disabled-ink:#6E7D72; --disabled-bg:rgba(243,239,228,.06);
    --fresh-current:#54B27C; --fresh-aging:#D9B463; --fresh-stale:#D9A441; --fresh-unknown:#9BA89F;
    --shadow-card:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.28);
    --shadow-pop:0 10px 30px rgba(0,0,0,.45);
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}