/* Looper — design tokens. Fingerprint: "the yardage book" (estate_design_registry.json → looper).
   Bottle-green field, chalk paper, flag-red accent, pencil graphite.
   Display: Big Shoulders Display · Body: Source Serif 4 · Numbers: JetBrains Mono. */

:root {
  /* palette */
  --field: #0f2e24;          /* bottle green — the course at dusk, the book's cover */
  --field-2: #143b2e;        /* lighter field for raised panels */
  --field-3: #1b4a3a;        /* hover / active on field */
  --chalk: #f3f1e7;          /* the page */
  --chalk-2: #e9e6d8;        /* ruled lines, page edges */
  --chalk-3: #dcd8c6;        /* deeper paper shadow */
  --pencil: #3a3a36;         /* handwritten annotations, body ink on chalk */
  --pencil-2: #6b6a63;       /* secondary ink */
  --pencil-3: #9c9a90;       /* muted ink */
  --flag: #e0322b;           /* the flag — one accent, used sparingly */
  --flag-2: #b7261f;         /* pressed flag */
  --sand: #d9c58f;           /* bunker on diagrams */
  --water: #7ea6b8;          /* water on diagrams — desaturated, never "AI blue" */
  --green: #6fa268;          /* putting surface on diagrams */
  --fairway: #4f8a5a;        /* fairway trace on diagrams */
  --rough: #2f5f3f;          /* rough / tree line on diagrams */

  /* type */
  --font-display: "Big Shoulders Display", "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* scale */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.5rem, 1.3rem + 1vw, 2.2rem);
  --step-3: clamp(2.2rem, 1.6rem + 2.4vw, 3.6rem);
  --step-4: clamp(3.2rem, 2rem + 5vw, 6.5rem);
  --step-5: clamp(5rem, 3rem + 10vw, 12rem);

  /* rhythm */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4.5rem; --space-9: 7rem;

  /* shape */
  --radius-1: 4px; --radius-2: 10px; --radius-3: 18px;
  --rule: 1px solid var(--chalk-3);
  --rule-field: 1px solid rgba(243, 241, 231, 0.14);

  /* elevation — tinted to the surface, never a grey glow */
  --shadow-page: 0 1px 0 rgba(58, 58, 54, 0.08), 0 12px 32px -18px rgba(15, 46, 36, 0.35);
  --shadow-field: 0 1px 0 rgba(0, 0, 0, 0.25), 0 18px 40px -22px rgba(0, 0, 0, 0.6);

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-page: cubic-bezier(0.7, 0, 0.2, 1);
  --dur-fast: 160ms; --dur: 320ms; --dur-slow: 720ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}

/* base */
html { color-scheme: light; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--chalk);
  color: var(--pencil);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.5;
  font-feature-settings: "kern", "liga";
}
body.on-field { background: var(--field); color: var(--chalk); }

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 0.92;
  margin: 0;
  text-transform: uppercase;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); font-weight: 700; }
.num, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.eyebrow { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: var(--step--1); color: var(--pencil-2); }
.on-field .eyebrow { color: rgba(243, 241, 231, 0.7); }
p { max-width: 62ch; }
a { color: inherit; text-decoration-color: var(--flag); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--flag); }

:focus-visible { outline: 2px solid var(--flag); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--flag); color: var(--chalk); }

/* the spiral — the book's binding rail, used on the left edge of pages */
.spiral {
  position: relative;
}
.spiral::before {
  content: "";
  position: absolute; inset: 0 auto 0 0; width: 26px;
  background:
    radial-gradient(circle at 13px 14px, var(--pencil-3) 0 3.5px, transparent 4px) 0 0 / 26px 28px repeat-y,
    linear-gradient(90deg, transparent 0 11px, var(--chalk-3) 11px 15px, transparent 15px);
  opacity: 0.9;
  pointer-events: none;
}

/* ruled paper — the page's faint feint lines */
.ruled {
  background-image: repeating-linear-gradient(180deg, transparent 0 27px, var(--chalk-2) 27px 28px);
}

/* pencil annotation — hand-set text and arrows */
.annot {
  font-family: "Caveat", var(--font-body);
  font-size: 1.15em;
  color: var(--pencil-2);
  transform: rotate(-2deg);
  display: inline-block;
}

/* buttons */
.btn {
  appearance: none; border: 1.5px solid var(--pencil); background: transparent; color: var(--pencil);
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  font-size: var(--step-0); padding: 0.85em 1.4em; border-radius: var(--radius-1); cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--pencil); color: var(--chalk); }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-flag { background: var(--flag); border-color: var(--flag); color: var(--chalk); }
.btn-flag:hover { background: var(--flag-2); border-color: var(--flag-2); color: var(--chalk); }
.on-field .btn { border-color: var(--chalk); color: var(--chalk); }
.on-field .btn:hover { background: var(--chalk); color: var(--field); }
.btn[disabled] { opacity: 0.45; cursor: default; transform: none; }

/* forms — label above, helper below, error below that */
.field { display: grid; gap: var(--space-2); }
.field label { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--step--1); color: var(--pencil-2); }
.field input, .field select {
  font: inherit; padding: 0.8em 0.9em; border: 1.5px solid var(--chalk-3); border-radius: var(--radius-1);
  background: #fff; color: var(--pencil); transition: border-color var(--dur-fast) var(--ease-out);
}
.field input:focus { border-color: var(--pencil); outline: none; }
.field .help { font-size: var(--step--1); color: var(--pencil-3); }
.field .error { font-size: var(--step--1); color: var(--flag); }

/* skeleton */
.skel { background: linear-gradient(90deg, var(--chalk-2) 25%, var(--chalk-3) 37%, var(--chalk-2) 63%); background-size: 400% 100%; animation: skel 1.4s ease infinite; border-radius: var(--radius-1); }
@keyframes skel { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }