/* The yardage book, on paper.
 *
 * Loaded after yardage/assets/app.css. Every rule here is a token remap or a
 * system rule (corners, shadows, fonts); no layout is touched.
 *
 * The app keeps its own vocabulary (--bg, --surface, --ink, --line, --flag,
 * and the map colours). This file is the adapter between that vocabulary and
 * the site's PAPER surface, defined in ../assets/tokens.css. The values are
 * restated rather than aliased because the artifact build vendors its own copy
 * of tokens.css and the two must not be able to drift apart silently — a
 * mismatch here shows up immediately as a wrong ground.
 *
 * The plan view stays a drawn map on stock: linen rough, a printed fairway, a
 * green in ink. It is a course guide, not a satellite photograph — and when
 * the satellite layer is switched on it sits inside the same hairline frame.
 */

/* app.css ships a light default, a `:root[data-theme="dark"]` block, and an
   `@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) }`
   block. That last selector is (0,2,0) and beats a bare `:root`, so this file
   has to MATCH the app's own selectors and win on source order instead — it is
   loaded after app.css. Weakening the list to `:root` alone silently hands the
   whole app back to its dark mode on any machine set to dark. */
:root,
:root:not([data-theme="light"]),
:root[data-theme="dark"],
:root[data-theme="light"] {
  /* --- stock --- */
  --bg:          #EDE9DE;
  --surface:     rgba(255, 252, 244, .72);
  --surface-2:   rgba(255, 252, 244, .92);

  /* --- ink, at the site's three weights --- */
  --ink:         #13301F;
  --ink-2:       rgba(19, 48, 31, .72);
  --ink-3:       rgba(19, 48, 31, .50);
  --line:        rgba(19, 48, 31, .18);
  --line-2:      rgba(19, 48, 31, .30);
  --rule:        rgba(19, 48, 31, .26);

  /* --- the map, printed. Rough is the unprinted stock; everything on top is
         a flat ink the way a course guide is separated into plates. --- */
  --rough-bg:    #E4DFD0;
  --rough:       #D4D2BE;
  --fairway:     #B9C7A6;
  --putting:     #8FB98C;
  --putting-line:#4F7A55;
  --water:       #9DB9C6;
  --sand:        #E8D9B4;
  --sand-line:   #B39C6C;

  /* --- one accent. Brass is the flag; terracotta is your ball. --- */
  --flag:        #7A5A24;
  --shot:        #9E3B20;
  --focus:       #7A5A24;
  --par3:        #2C6538;
  --par4:        rgba(19, 48, 31, .72);
  --par5:        #7A5A24;

  /* --- system rules: the site has no rounded corners and no shadows --- */
  --radius:      0px;
  --shadow:      none;

  /* --- type: system stacks only, and no webfonts anywhere on the site --- */
  --sans:        "Iowan Old Style", "Palatino", "Georgia", serif;
  --display:     "Didot", "Bodoni 72", "Hoefler Text", "Baskerville", "Times New Roman", serif;
  --mono:        ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;

  /* The scrim sits over satellite imagery to pull it toward the page. */
  --scrim:       #EDE9DE;
  --scrim-a:     0.14;
  --sat-line:    #13301F;

  color-scheme: light;
}

/* The app carries 30 border-radius declarations; the rest of the site has zero.
   One rule retires all of them rather than editing 30 sites. */
.app *,
.app *::before,
.app *::after { border-radius: 0 !important; box-shadow: none !important; }

/* Chrome speaks mono-uppercase here, the way .tab and .eyebrow do sitewide. */
.views button,
.tee,
.seg button,
.btn,
.bank-name,
.stat span,
.rail .rp { font-family: var(--mono); text-transform: uppercase; letter-spacing: .14em; }

/* Prose stays serif, matching .sub and .alm-fact on the rest of the site. */
.note,
.flag-note,
.sect-head p { font-family: "Iowan Old Style", "Palatino", "Georgia", serif; }

/* The course name is a display line, not UI text. A didone wants a little air
   and its own weight; it is never faux-bolded to 800. */
.coursepick {
  font-family: var(--display); font-weight: 400;
  text-transform: uppercase; letter-spacing: .04em;
}

/* Active states use the flag, matching .tab.on. Brass is a mid-tone, so the
   label on a brass fill is the paper, not the ink. */
.tee[aria-pressed="true"] { background: var(--flag); border-color: var(--flag); color: #FBF8F0; }
.views button.is-on { color: var(--flag); border-bottom-color: var(--flag); }