/* ============================================================
LiveGolfMaps — App chrome tokens (v1, Aug 2026)
DROP-IN. Load AFTER css/tokens.css:
IMPORTANT — two independent axes:
data-theme on → the MAP palette (modern | heritage).
Owned by css/tokens.css. UNCHANGED by this file.
data-chrome on → the APP UI palette (light | dark).
Owned by this file. NEW.
Today `data-theme` drives both, which is why the builder chrome is
forced dark whenever a course is Heritage. Splitting them means a
Heritage club can have a light viewer and the builder can stay dark
mid-session regardless of the course being edited.
Defaults: chrome = light (parchment). The builder and console set
data-chrome="dark" on at boot; the viewer and admin follow the
OS via prefers-color-scheme unless the club has pinned one.
============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300..700;1,6..72,300..600&family=Archivo:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");
:root,
:root[data-chrome="light"] {
/* --- Surfaces --- */
--app-bg: #F4EDDF; /* parchment ground */
--app-panel: #FBF6EA; /* cards, bars, sheets */
--app-panel-2: #EDE3CF; /* recessed / secondary */
--app-panel-3: #FFFDF8; /* input wells */
--app-border: #D9CDB4; /* the hairline */
--app-border-strong: #1F2C22; /* segmented controls, outline buttons */
/* --- Ink --- */
--app-ink: #1F2C22; /* 13.9:1 on --app-bg */
--app-ink-dim: #6B6455; /* 5.1:1 on --app-bg */
--app-ink-inverse: #FBF6EA;
/* --- Brand --- */
--app-accent: #1F4033; /* clubhouse pine — primary action */
--app-accent-hover: #2A5644;
--app-live: #B8372C; /* SIGNAL ONLY. see rule below */
/* --- Status (semantic; the only other colours in the product) --- */
--st-good: #2E6B45; /* open / allowed / available 5.9:1 */
--st-good-bg: #F1F6EF;
--st-warn: #8A5E14; /* reduced / restricted 6.4:1 */
--st-warn-bg: #FBF2DF;
--st-bad: #A6362B; /* closed / unavailable 6.7:1 */
--st-bad-bg: #FBEDEA;
}
:root[data-chrome="dark"] {
--app-bg: #131A15;
--app-panel: #1B241C;
--app-panel-2: #101613;
--app-panel-3: #0C110E;
--app-border: rgba(239,231,214,.12);
--app-border-strong: rgba(239,231,214,.30);
--app-ink: #EFE7D6; /* 13.2:1 on --app-bg */
--app-ink-dim: #9A9484; /* 5.4:1 on --app-bg */
--app-ink-inverse: #14211A;
--app-accent: #7FC49A; /* mint — primary action on dark */
--app-accent-hover: #97D3AC;
--app-live: #E8574A;
--st-good: #5BA678;
--st-good-bg: rgba(91,166,120,.14);
--st-warn: #D9A63C;
--st-warn-bg: rgba(217,166,60,.14);
--st-bad: #E8574A;
--st-bad-bg: rgba(232,87,74,.14);
}
/* ------------------------------------------------------------
Non-colour tokens — theme-independent
------------------------------------------------------------ */
:root {
/* Type */
--font-display: "Newsreader", Georgia, "Times New Roman", serif;
--font-ui: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
--fs-display-xl: 64px; --lh-display-xl: 1.02;
--fs-display-l: 34px; --lh-display-l: 1.10;
--fs-display-m: 26px; --lh-display-m: 1.15;
--fs-title: 20px; --lh-title: 1.30;
--fs-body: 16px; --lh-body: 1.60;
--fs-body-s: 14px; --lh-body-s: 1.55;
--fs-label: 13px; --lh-label: 1.40;
--fs-meta: 11px; --lh-meta: 1.40;
--ls-meta: .16em;
--fw-reg: 400; --fw-med: 500; --fw-semi: 600; --fw-bold: 700;
/* Spacing — 4px base */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
--sp-12: 48px; --sp-16: 64px; --sp-22: 88px;
/* Geometry — deliberately near-square. NOT a rounded product. */
--app-radius: 2px;
--app-radius-lg: 4px; /* sheets and modals only */
--app-radius-pill: 999px; /* NOT USED. left defined so nothing breaks. */
--app-hairline: 1px solid var(--app-border);
/* Elevation — almost none. Depth comes from hairlines and panel tone. */
--app-shadow-0: none;
--app-shadow-1: 0 1px 0 rgba(31,44,34,.06);
--app-shadow-2: 0 8px 28px rgba(11,18,14,.18); /* modals, sheets */
--app-shadow-3: 0 30px 70px rgba(11,18,14,.45); /* device frames only */
/* Motion */
--dur: 120ms;
--dur-slow: 220ms; /* pin drop only */
--ease: cubic-bezier(.2,0,0,1);
/* Targets */
--tap-min: 44px;
--tap-gloved: 56px; /* club-admin status controls */
--focus-ring: 2px solid var(--app-accent);
--focus-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
:root { --dur: 0ms; --dur-slow: 0ms; }
}
/* ============================================================
RULES THAT MATTER MORE THAN THE VALUES
1. --app-live is reserved for the LIVE LAYER ONLY: an in-force
restriction, "today's pins", the unsaved/queued dot, the
just-created-object flash. It is never a brand colour, never a
link, never a hover, never decoration. If red appears anywhere
else the system is broken.
2. Status is never carried by colour alone. Every status pairs its
colour with a word, and with a fill cue: SOLID FILL = restriction
in force, HAIRLINE = normal.
3. One duration, one easing, for everything. The 220ms pin drop is
the single exception. Nothing translates more than 4px.
4. Never introduce a colour that is not in this file.
============================================================ */
/* ------------------------------------------------------------
Base
------------------------------------------------------------ */
* { box-sizing: border-box; }
html, body {
margin: 0;
background: var(--app-bg);
color: var(--app-ink);
font-family: var(--font-ui);
font-size: var(--fs-body);
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
}
body { padding-bottom: env(safe-area-inset-bottom); }
h1, h2, h3 { font-family: var(--font-display); font-weight: var(--fw-reg); margin: 0; }
a { color: var(--app-accent); text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--app-accent) 35%, transparent); }
a:hover { color: var(--app-live); border-bottom-color: var(--app-live); }
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
outline: var(--focus-ring);
outline-offset: var(--focus-offset);
}
/* numerals: tabular everywhere a number can change */
.num, td, .yds, .par, time { font-variant-numeric: tabular-nums; }
/* the meta/eyebrow treatment used across every surface */
.meta {
font-family: var(--font-mono);
font-size: var(--fs-meta);
line-height: var(--lh-meta);
letter-spacing: var(--ls-meta);
text-transform: uppercase;
color: var(--app-ink-dim);
}