/* GENERATED by design/yardage/build_tokens.py from tokens.json. Do not edit:
   change tokens.json and rerun. Rules for using these: DESIGN-LANGUAGE.md.

   Themes: paper is the default (:root). Night is a scope: class .yb-night or
   [data-yb-theme="night"] on any element (a night section of the site, the
   whole app page). Add class .yb-auto to <html> to follow the OS setting.
   .yb-proof is a proof panel: its own ground, and every role inside it takes
   its night value, in both themes. */

:root {
  --yb-ground: #F3EFE4;
  --yb-ground-alt: #EAE4D5;
  --yb-proof: #0D100F;
  --yb-text: #0D100F;
  --yb-text-secondary: #34352F;
  --yb-note: #625F57;
  --yb-rule-strong: #7D796E;
  --yb-rule: #D9D2C1;
  --yb-accent: #17C97F;
  --yb-accent-text: #0E8F5E;
  --yb-accent-high: #0E8F5E;
  --yb-on-accent: #0D100F;
  --yb-focus: #4CFFB0;
  --yb-flag: #B3381F;
  --yb-course-fairway: #B9C3A0;
  --yb-course-rough: #9AA585;
  --yb-course-surface: #A7BC93;
  --yb-course-bunker: #E2D3AE;
  --yb-course-water: #A9BCBD;
  --yb-club-1: #0047AB;
  --yb-series-1: #0047AB;
  --yb-club-2: #C2570A;
  --yb-series-2: #C2570A;
  --yb-club-3: #8E0B55;
  --yb-series-3: #8E0B55;
  --yb-club-4: #8A5CF0;
  --yb-series-4: #8A5CF0;
  --yb-club-5: #1E88C8;
  --yb-series-5: #1E88C8;
  --yb-motif-whisper-line: 0.0875;
  --yb-motif-under-data: 0.015;
  --yb-motif-caption-whisper: 0.175;
  --yb-motif-whisper-fill: 0;
  --yb-motif-feature-line: 0.62;
  --yb-motif-feature-fill: 0.55;
  --yb-chart-band-fill: 0.1;
  --yb-chart-target-fill: 0.16;
  --yb-chart-target-edge: var(--yb-text);
  --yb-chart-keyline: var(--yb-text);
  color-scheme: light;

  --yb-font-serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --yb-font-mono: "Striped Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --yb-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --yb-serif-axes: "SOFT" 100, "WONK" 0;

  --yb-space-hair: 2px;
  --yb-space-xs: 4px;
  --yb-space-s: 8px;
  --yb-space-m: 12px;
  --yb-space-l: 16px;
  --yb-space-xl: 20px;
  --yb-space-xxl: 24px;
  --yb-space-x3: 32px;
  --yb-space-x4: 40px;
  --yb-space-x5: 56px;
  --yb-space-x6: 72px;
  --yb-space-x7: 96px;
  --yb-gutter: 20px;
  --yb-margin-column: 44px;
  --yb-section: 72px;
  --yb-max-width: 1240px;
  --yb-ruled-line: 28px;
  --yb-grid-cell: 24px;
  --yb-min-target: 44px;
  --yb-motif-clear-zone: 16px;

  --yb-radius-none: 0px;
  --yb-radius-chip: 2px;
  --yb-radius-card: 4px;
  --yb-radius-control: 6px;
  --yb-radius-control-watch: 10px;
  --yb-radius-round: 9999px;

  --yb-line-hair: 1px;
  --yb-line-thin: 1px;
  --yb-line-pencil: 1.25px;
  --yb-line-ink: 1.5px;
  --yb-line-heavy: 2px;
  --yb-line-trace: 2.2px;
  --yb-double-rule-top: 1px;
  --yb-double-rule-gap: 3px;
  --yb-double-rule-bottom: 1px;
  --yb-ground-black: #000000;
  --yb-tick-label-gap: 3px;
  --yb-tick-min-label-spacing: 6px;
  --yb-speed-dot: 3px;
  --yb-speed-dot-edge: 0.75px;
  --yb-keyline-line-green: 2.5px;
  --yb-keyline-line-under: 5px;
  --yb-ring-stroke: 1.25px;
  --yb-ring-clearance: 4px;
  --yb-info-ring: 22px;
  --yb-primary-ink-hover-overlay: 0.08;
  --yb-tick-minor: 3px;
  --yb-tick-major: 6px;
  --yb-hatch-opacity: 0.45;
  --yb-button-height: 46px;
  --yb-segment-height: 36px;
  --yb-header-height: 64px;
  --yb-menu-row: 56px;
  --yb-slider-thumb: 20px;
  --yb-metronome-round: 44px;
  --yb-metronome-round-page: 72px;
  --yb-focus-outline: 2px;
  --yb-focus-gap: 2px;
  --yb-focus-halo: 8px;
  --yb-shadow-card: 0px 18px 36px -20px rgba(13, 16, 15, 0.4);
  --yb-motif-feather: 16px;
  --yb-motif-feather-s: 6px;
  --yb-motif-feather-m: 10px;
  --yb-motif-feather-l: 16px;
  --yb-motif-pad-text-min: 6px;
  --yb-motif-pad-text-max: 10px;
  --yb-motif-pad-control: 8px;
  --yb-motif-small-below: 32px;
  --yb-motif-large-from: 100px;
  --yb-dash-leader: 1.5 5;
  --yb-dash-callout: 4 4;
  --yb-dash-projection: 3 5;
  --yb-dash-target: 4 3;
  --yb-hatch-angle: 45deg;
  --yb-hatch-pitch: 5px;
  --yb-hatch-width: 0.75px;

  --yb-motion-quick: 160ms;
  --yb-motion-move: 280ms cubic-bezier(.65,0,.35,1);
  --yb-motion-move-duration: 280ms;
  --yb-ease-out: cubic-bezier(.2,.7,.2,1);
  --yb-ease-in-out: cubic-bezier(.65,0,.35,1);
  --yb-motion-settle: 620ms cubic-bezier(.2,.7,.2,1);
  --yb-motion-gentle: 900ms cubic-bezier(.2,.7,.2,1);
  --yb-motion-draw: 1400ms cubic-bezier(.45,.05,.25,1);
  --yb-motion-beat: 300ms;
  --yb-beat-ring-opacity: 0.3;
  --yb-beat-ring-width: 1.25px;
  --yb-beat-ring-scale: 1.25;
  --yb-motion-toast: 2500ms;
  --yb-pressed-overlay: 0.08;
  --yb-motion-stagger: 45ms;

  --yb-type-display-size: clamp(2.5rem, 1.4rem + 4.6vw, 5.4rem);
  --yb-type-display-line: 0.98;
  --yb-type-title1-size: clamp(2rem, 1.3rem + 2.9vw, 3.6rem);
  --yb-type-title1-line: 1.04;
  --yb-type-title2-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --yb-type-title2-line: 1.15;
  --yb-type-title3-size: 1.25rem;
  --yb-type-title3-line: 1.25;
  --yb-type-hole-size: clamp(2.4rem, 1rem + 5vw, 5rem);
  --yb-type-hole-line: 0.9;
  --yb-type-note-size: 1rem;
  --yb-type-note-line: 1.5;
  --yb-type-note-small-size: 0.8125rem;
  --yb-type-note-small-line: 1.35;
  --yb-type-body-size: 1rem;
  --yb-type-body-line: 1.6;
  --yb-type-body-strong-size: 1rem;
  --yb-type-body-strong-line: 1.6;
  --yb-type-callout-size: 0.9375rem;
  --yb-type-callout-line: 1.5;
  --yb-type-footnote-size: 0.8125rem;
  --yb-type-footnote-line: 1.45;
  --yb-type-numeral-hero-size: clamp(3.4rem, 2.4rem + 4vw, 5.4rem);
  --yb-type-numeral-hero-line: 1.0;
  --yb-type-numeral-l-size: clamp(2.25rem, 1.8rem + 1.6vw, 3rem);
  --yb-type-numeral-l-line: 1.0;
  --yb-type-numeral-m-size: 1.75rem;
  --yb-type-numeral-m-line: 1.1;
  --yb-type-numeral-s-size: 1.25rem;
  --yb-type-numeral-s-line: 1.2;
  --yb-type-numeral-xs-size: 0.9375rem;
  --yb-type-numeral-xs-line: 1.35;
  --yb-type-section-title-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.2rem);
  --yb-type-section-title-line: 1.06;
  --yb-type-lead-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  --yb-type-lead-line: 1.6;
  --yb-type-statement-size: clamp(1.6rem, 1.05rem + 2.3vw, 3rem);
  --yb-type-statement-line: 1.18;
  --yb-type-wordmark-size: 1.35rem;
  --yb-type-wordmark-line: 1.0;
  --yb-type-numeral-tick-size: 0.6875rem;
  --yb-type-numeral-tick-line: 1.2;
  --yb-type-label-size: 0.6875rem;
  --yb-type-label-line: 1.3;
  --yb-type-mono-small-size: 0.8125rem;
  --yb-type-mono-small-line: 1.4;
}

@media (min-width: 960px) {
  :root {
    --yb-gutter: 40px;
    --yb-margin-column: 190px;
    --yb-section: 112px;
  }
}

.yb-night, [data-yb-theme="night"] {
  --yb-ground: #0D100F;
  --yb-ground-alt: #131815;
  --yb-proof: #1A1F1D;
  --yb-text: #F3EFE4;
  --yb-text-secondary: #B9B6AC;
  --yb-note: #8E948F;
  --yb-rule-strong: #6B726E;
  --yb-rule: #262C29;
  --yb-accent: #17C97F;
  --yb-accent-text: #17C97F;
  --yb-accent-high: #4CFFB0;
  --yb-on-accent: #0D100F;
  --yb-focus: #4CFFB0;
  --yb-flag: #F07A5E;
  --yb-course-fairway: #2A3328;
  --yb-course-rough: #222A21;
  --yb-course-surface: #2E3A2C;
  --yb-course-bunker: #4A4334;
  --yb-course-water: #22302F;
  --yb-club-1: #6E7DEC;
  --yb-series-1: #6E7DEC;
  --yb-club-2: #EB6015;
  --yb-series-2: #EB6015;
  --yb-club-3: #DA7CA1;
  --yb-series-3: #DA7CA1;
  --yb-club-4: #B06EBB;
  --yb-series-4: #B06EBB;
  --yb-club-5: #5FB7FB;
  --yb-series-5: #5FB7FB;
  --yb-motif-whisper-line: 0.0775;
  --yb-motif-under-data: 0.015;
  --yb-motif-caption-whisper: 0.155;
  --yb-motif-whisper-fill: 0;
  --yb-motif-feature-line: 0.55;
  --yb-motif-feature-fill: 0.6;
  --yb-chart-band-fill: 0.14;
  --yb-chart-target-fill: 0.18;
  --yb-chart-target-edge: var(--yb-accent);
  --yb-chart-keyline: transparent;
  --yb-beat-ring-opacity: 0.45;
  background-color: var(--yb-ground);
  color: var(--yb-text);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root.yb-auto:not([data-yb-theme="paper"]) {
    --yb-ground: #0D100F;
    --yb-ground-alt: #131815;
    --yb-proof: #1A1F1D;
    --yb-text: #F3EFE4;
    --yb-text-secondary: #B9B6AC;
    --yb-note: #8E948F;
    --yb-rule-strong: #6B726E;
    --yb-rule: #262C29;
    --yb-accent: #17C97F;
    --yb-accent-text: #17C97F;
    --yb-accent-high: #4CFFB0;
    --yb-on-accent: #0D100F;
    --yb-focus: #4CFFB0;
    --yb-flag: #F07A5E;
    --yb-course-fairway: #2A3328;
    --yb-course-rough: #222A21;
    --yb-course-surface: #2E3A2C;
    --yb-course-bunker: #4A4334;
    --yb-course-water: #22302F;
    --yb-club-1: #6E7DEC;
    --yb-series-1: #6E7DEC;
    --yb-club-2: #EB6015;
    --yb-series-2: #EB6015;
    --yb-club-3: #DA7CA1;
    --yb-series-3: #DA7CA1;
    --yb-club-4: #B06EBB;
    --yb-series-4: #B06EBB;
    --yb-club-5: #5FB7FB;
    --yb-series-5: #5FB7FB;
    --yb-motif-whisper-line: 0.0775;
    --yb-motif-under-data: 0.015;
    --yb-motif-caption-whisper: 0.155;
    --yb-motif-whisper-fill: 0;
    --yb-motif-feature-line: 0.55;
    --yb-motif-feature-fill: 0.6;
    --yb-chart-band-fill: 0.14;
    --yb-chart-target-fill: 0.18;
    --yb-chart-target-edge: var(--yb-accent);
    --yb-chart-keyline: transparent;
    color-scheme: dark;
  }
}

/* A proof panel: the proof ground of the enclosing theme, night roles inside. */
.yb-proof {
  background-color: var(--yb-proof);
  --yb-ground: #0D100F;
  --yb-ground-alt: #131815;
  --yb-text: #F3EFE4;
  --yb-text-secondary: #B9B6AC;
  --yb-note: #8E948F;
  --yb-rule-strong: #6B726E;
  --yb-rule: #262C29;
  --yb-accent: #17C97F;
  --yb-accent-text: #17C97F;
  --yb-accent-high: #4CFFB0;
  --yb-on-accent: #0D100F;
  --yb-focus: #4CFFB0;
  --yb-flag: #F07A5E;
  --yb-course-fairway: #2A3328;
  --yb-course-rough: #222A21;
  --yb-course-surface: #2E3A2C;
  --yb-course-bunker: #4A4334;
  --yb-course-water: #22302F;
  --yb-club-1: #6E7DEC;
  --yb-series-1: #6E7DEC;
  --yb-club-2: #EB6015;
  --yb-series-2: #EB6015;
  --yb-club-3: #DA7CA1;
  --yb-series-3: #DA7CA1;
  --yb-club-4: #B06EBB;
  --yb-series-4: #B06EBB;
  --yb-club-5: #5FB7FB;
  --yb-series-5: #5FB7FB;
  --yb-motif-whisper-line: 0.0775;
  --yb-motif-under-data: 0.015;
  --yb-motif-caption-whisper: 0.155;
  --yb-motif-whisper-fill: 0;
  --yb-motif-feature-line: 0.55;
  --yb-motif-feature-fill: 0.6;
  --yb-chart-band-fill: 0.14;
  --yb-chart-target-fill: 0.18;
  --yb-chart-target-edge: var(--yb-accent);
  --yb-chart-keyline: transparent;
  --yb-ground: var(--yb-proof);
  color: var(--yb-text);
  color-scheme: dark;
}

/* Type styles. Numerals are tabular; labels are the only uppercase. */
.yb-display {
  font: normal 500 var(--yb-type-display-size)/var(--yb-type-display-line) var(--yb-font-serif);
  font-variation-settings: var(--yb-serif-axes);
  letter-spacing: -0.03em;
}
.yb-title1 {
  font: italic 460 var(--yb-type-title1-size)/var(--yb-type-title1-line) var(--yb-font-serif);
  font-variation-settings: var(--yb-serif-axes);
  letter-spacing: -0.01em;
}
.yb-title2 {
  font: italic 480 var(--yb-type-title2-size)/var(--yb-type-title2-line) var(--yb-font-serif);
  font-variation-settings: var(--yb-serif-axes);
  letter-spacing: -0.005em;
}
.yb-title3 {
  font: normal 500 var(--yb-type-title3-size)/var(--yb-type-title3-line) var(--yb-font-serif);
  font-variation-settings: var(--yb-serif-axes);
  letter-spacing: -0.01em;
}
.yb-hole {
  font: italic 300 var(--yb-type-hole-size)/var(--yb-type-hole-line) var(--yb-font-serif);
  font-variation-settings: var(--yb-serif-axes);
}
.yb-note {
  font: italic 400 var(--yb-type-note-size)/var(--yb-type-note-line) var(--yb-font-serif);
  font-variation-settings: var(--yb-serif-axes);
  color: var(--yb-note);
}
.yb-note-small {
  font: italic 400 var(--yb-type-note-small-size)/var(--yb-type-note-small-line) var(--yb-font-serif);
  font-variation-settings: var(--yb-serif-axes);
  color: var(--yb-note);
}
.yb-body {
  font: normal 400 var(--yb-type-body-size)/var(--yb-type-body-line) var(--yb-font-sans);
}
.yb-body-strong {
  font: normal 600 var(--yb-type-body-strong-size)/var(--yb-type-body-strong-line) var(--yb-font-sans);
}
.yb-callout {
  font: normal 400 var(--yb-type-callout-size)/var(--yb-type-callout-line) var(--yb-font-sans);
}
.yb-footnote {
  font: normal 400 var(--yb-type-footnote-size)/var(--yb-type-footnote-line) var(--yb-font-sans);
}
.yb-numeral-hero {
  font: normal 400 var(--yb-type-numeral-hero-size)/var(--yb-type-numeral-hero-line) var(--yb-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
}
.yb-numeral-l {
  font: normal 400 var(--yb-type-numeral-l-size)/var(--yb-type-numeral-l-line) var(--yb-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.yb-numeral-m {
  font: normal 400 var(--yb-type-numeral-m-size)/var(--yb-type-numeral-m-line) var(--yb-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.yb-numeral-s {
  font: normal 400 var(--yb-type-numeral-s-size)/var(--yb-type-numeral-s-line) var(--yb-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.yb-numeral-xs {
  font: normal 400 var(--yb-type-numeral-xs-size)/var(--yb-type-numeral-xs-line) var(--yb-font-mono);
  font-variant-numeric: tabular-nums;
}
.yb-section-title {
  font: normal 500 var(--yb-type-section-title-size)/var(--yb-type-section-title-line) var(--yb-font-serif);
  font-variation-settings: var(--yb-serif-axes);
  letter-spacing: -0.02em;
}
.yb-lead {
  font: normal 400 var(--yb-type-lead-size)/var(--yb-type-lead-line) var(--yb-font-sans);
}
.yb-statement {
  font: italic 300 var(--yb-type-statement-size)/var(--yb-type-statement-line) var(--yb-font-serif);
  font-variation-settings: var(--yb-serif-axes);
  letter-spacing: -0.015em;
}
.yb-wordmark {
  font: italic 500 var(--yb-type-wordmark-size)/var(--yb-type-wordmark-line) var(--yb-font-serif);
  font-variation-settings: var(--yb-serif-axes);
}
.yb-numeral-tick {
  font: normal 400 var(--yb-type-numeral-tick-size)/var(--yb-type-numeral-tick-line) var(--yb-font-mono);
  font-variant-numeric: tabular-nums;
}
.yb-label {
  font: normal 500 var(--yb-type-label-size)/var(--yb-type-label-line) var(--yb-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--yb-note);
}
.yb-mono-small {
  font: normal 400 var(--yb-type-mono-small-size)/var(--yb-type-mono-small-line) var(--yb-font-mono);
  font-variant-numeric: tabular-nums;
}
.yb-unit { font-size: max(0.5em, 0.6875rem); color: var(--yb-note); letter-spacing: 0; }
/* A number inside a Fraunces run (a note, a title, a caption): Striped Mono,
   upright, same size (the two faces' digits stand 0.712 / 0.717 em). Section 4. */
.yb-num { font-family: var(--yb-font-mono); font-style: normal; font-weight: 400; font-variation-settings: normal; letter-spacing: 0; font-variant-numeric: tabular-nums; }

/* The ONE ring primitive (section 0 layer 3, section 7; tokens layout.ring):
   an exact closed capsule, constant stroke, never tilted, never open.
   .yb-ring wraps a number (inline); its padding IS the clearance. Accent at
   night only on a headline number: add .yb-ring--accent. .yb-info-ring is
   the info button's ring with the italic i centred.
   The clearance is between the INK and the stroke (ring_geometry.py): max(clearance,
   0.2em), less the line box's own space above (0.129em) and below
   (0.147em) Striped Mono's digits at line-height 1, plus what the round ends need
   for the worst digit's ink (0.2066em first, 0.2776em last). */
.yb-ring { --yb-ring-c: max(var(--yb-ring-clearance), 0.2em); display: inline-block; padding: calc(var(--yb-ring-c) - 0.129em) calc(var(--yb-ring-c) + 0.2776em) calc(var(--yb-ring-c) - 0.147em) calc(var(--yb-ring-c) + 0.2066em); border: var(--yb-ring-stroke) solid var(--yb-text); border-radius: 9999px; line-height: 1; }
:is(.yb-night, [data-yb-theme="night"]) .yb-ring--accent { border-color: var(--yb-accent); }
.yb-info-ring { display: inline-grid; place-items: center; box-sizing: border-box; width: var(--yb-info-ring); height: var(--yb-info-ring); border: var(--yb-ring-stroke) solid var(--yb-text); border-radius: 50%; color: var(--yb-text); font: italic 500 15px/1 var(--yb-font-serif); font-variation-settings: var(--yb-serif-axes); padding-left: 1px; }
.yb-info-ring::before { content: "i"; }
/* A 44 px hit area round the 22 px ring: put .yb-info-ring inside a 44 px button. */

/* Increase Contrast (section 12): decorative rules take ruleStrong, pencil text
   takes textSecondary, whisper motifs go (motifs.css hides them). */
@media (prefers-contrast: more) {
  :root { --yb-rule: #7D796E; --yb-note: #34352F; }
  .yb-night, [data-yb-theme="night"], .yb-proof { --yb-rule: #6B726E; --yb-note: #B9B6AC; }
}

/* Reduce Motion (section 11): moves, arrivals, draws and staggers are instant;
   --yb-motion-quick stays, for OPACITY cross-fades only (never a transform). */
@media (prefers-reduced-motion: reduce) {
  :root { --yb-motion-settle: 0ms linear; --yb-motion-gentle: 0ms linear; --yb-motion-draw: 0ms linear; --yb-motion-move: 0ms linear; --yb-motion-move-duration: 0ms; --yb-motion-stagger: 0ms; }
}