/* The 19th Hole — design tokens. Single source of truth.
 *
 * TWO SURFACES, ONE SYSTEM.
 *
 *   PAPER  (:root, the default)      the club's printed matter — the front
 *                                    door, the booking desk, the yardage book.
 *                                    Ivory stock, pine ink, brass, hairlines.
 *
 *   NIGHT  ([data-theme="night"])    the round itself — the eight canvas
 *                                    games, which are lit scenes after dusk
 *                                    and always were. Also the course map.
 *
 * The tokens are named for their ROLE, not their colour, which is the only way
 * one name can honestly hold two values. --text is the ink whatever the ink is.
 *
 * Contrast is measured, not eyeballed. Both columns are the token over its own
 * --ground:
 *                        paper     night
 *   --text               11.8:1    13.4:1    any size
 *   --text-mute           7.1:1     7.3:1    small text, 8-12px labels
 *   --text-dim            5.3:1     5.0:1    body prose, 14px and up
 *   --accent              5.2:1    10.1:1    key numbers, active state
 *   --coral               5.6:1     6.6:1    your ball / over par
 *   --green               5.7:1     8.5:1    under par
 *   --hair                1.4:1     1.3:1    BORDERS AND RULES ONLY — never text
 */

/* ============================================================ PAPER (default)
   Ivory stock with pine ink and a brass second colour. The page is lit from
   just off-centre: --ground-glow is the lit part, --ground-deep the shadowed
   edge, which is the reverse of how they read at night and is why they are
   named for depth rather than for lightness. */
:root {
  --ground:       #EDE9DE;
  --ground-deep:  #E2DCCC;
  --ground-glow:  #F6F3EA;

  --text:         #13301F;
  --text-mute:    rgba(19, 48, 31, .82);
  --text-dim:     rgba(19, 48, 31, .72);
  --hair:         rgba(19, 48, 31, .18);

  /* Brass, not gold. Gold glows against night and goes weak on paper — the
     engraved-plate brass holds 5.2:1 and still reads as the flag. */
  --accent:       #7A5A24;
  --accent-hover: #5B4218;
  --on-accent:    #FBF8F0;   /* text drawn ON an --accent fill */

  --coral:        #9E3B20;   /* your ball · over par */
  --green:        #2C6538;   /* under par */

  /* A card laid on the page, not a hole cut into it. */
  --panel:        rgba(255, 252, 244, .72);
  --panel-strong: rgba(255, 252, 244, .92);
  --vignette:     rgba(92, 82, 60, .13);

  /* Paper has tooth. Multiply, or the noise sits on top as grey haze. */
  --grain-opacity: .05;
  --grain-blend:   multiply;

  /* The contour field behind the front door and the booking desk. Ink on paper
     carries further than cream on pine, so paper draws lighter. */
  --contour:        .13;
  --contour-bright: .24;

  /* The masthead of a club programme: a didone, set large and quiet.
     Futura would be the sports graphic; this is the printed card. */
  --display: "Didot", "Bodoni 72", "Hoefler Text", "Baskerville", "Times New Roman", serif;
  --display-weight: 400;
  --display-tracking: .02em;

  color-scheme: light;
}

/* ================================================================== NIGHT
   The eight games, and the aerial course map. Unchanged from the values the
   games were drawn against; only the names moved. */
:root[data-theme="night"] {
  --ground:       #0A2A1C;
  --ground-deep:  #061A10;
  --ground-glow:  #10402A;

  --text:         #F4EFDF;
  --text-mute:    rgba(244, 239, 223, .70);
  --text-dim:     rgba(244, 239, 223, .55);
  --hair:         rgba(244, 239, 223, .18);

  --accent:       #FFC93C;
  --accent-hover: #FFD964;
  --on-accent:    #061A10;

  --coral:        #FF7A59;
  --green:        #7BD389;

  --panel:        rgba(6, 26, 16, .6);
  --panel-strong: rgba(6, 26, 16, .72);
  --vignette:     rgba(4, 14, 9, .55);

  --grain-opacity: .055;
  --grain-blend:   normal;

  --contour:        .065;
  --contour-bright: .10;

  --display: "Futura", "Avenir Next Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --display-weight: 800;
  --display-tracking: .06em;

  color-scheme: dark;
}

/* ============================================================ both surfaces */
:root {
  /* Prose is an old-style serif on both. Chrome is mono on both: if it is a
     label it is mono and uppercase, if it is a sentence it is serif. */
  --body: "Iowan Old Style", "Palatino", "Georgia", serif;
  --mono: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;

  /* A plate is paper on BOTH surfaces. Bank marks, and any other artwork drawn
     for white stock, get laid on one rather than recoloured — inverting a
     trademark is both wrong and impossible for the multi-colour marks. */
  --plate:    #F6F3E9;
  --on-plate: #13301F;

  /* House rules, stated so nobody has to infer them from an absence. */
  --radius: 0;
  --shadow: none;

  --gutter:     clamp(20px, 5vw, 72px);
  /* The fixed header's height. Anything else pinned to the top of a page
     offsets from this rather than guessing, so the bar can change height in
     one place. assets/chrome.css owns the bar itself. */
  --chrome-h:   58px;
}

/* Browser surfaces carry the design too. They ship with defaults belonging to
   no design system unless they are themed from the palette. */
::selection { background: var(--accent); color: var(--on-accent); }

:root { accent-color: var(--accent); }

* { scrollbar-color: var(--hair) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--hair); }
*::-webkit-scrollbar-track { background: transparent; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }