@font-face { font-family: "Montserrat"; font-weight: 400; font-display: swap; src: url("../fonts/montserrat-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 600; font-display: swap; src: url("../fonts/montserrat-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-display: swap; src: url("../fonts/montserrat-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Serif Text"; font-weight: 400; font-display: swap; src: url("../fonts/dm-serif-text-latin-400-normal.woff2") format("woff2"); }

:root {
  --device-bezel: #000000;
  --selected-fill: var(--sand);
  --fill-on-surface: var(--sand);
  --page: #ffffff;
  --surface: #ffffff;
  --sand: #f4efe7;
  --sand-strong: #e9e1d4;
  --segment-on: var(--surface);
  --ink: #18233a;
  --ink-2: #545e70;
  --ink-3: #6b7384;
  --line: rgb(42 61 94 / 0.12);
  --scrim: rgb(0 0 0 / 0.38);

  --masthead: #2a3d5e;
  --masthead-deep: #22334f;
  --on-masthead: #ffffff;
  --on-masthead-2: rgb(255 255 255 / 0.76);
  --masthead-note: #d5c9b7;
  --masthead-chip: rgb(255 255 255 / 0.12);

  --primary: #2a3d5e;
  --on-primary: #ffffff;
  --accent: #00776d;
  --live: #00877c;
  --on-live: #ffffff;
  --marker: #e7ae74;
  --marker-ink: #8a5422;
  --on-marker: #2a1a08;
  --danger: #b4372f;
  --knob: #ffffff;
  --bar: rgb(255 255 255 / 0.9);

  --font: "Montserrat", -apple-system, system-ui, sans-serif;
  --font-masthead: var(--font);
  --masthead-weight: 700;
  --masthead-tracking: -0.03em;

  --text-display: 2.3529rem;
  --text-headline: 1.5882rem;
  --text-title-lg: 1.2941rem;
  --text-title: 1.1765rem;
  --text-lead: 1.0588rem;
  --text-body: 0.9412rem;
  --text-row: 0.9118rem;
  --text-label: 0.8529rem;
  --text-caption: 0.8235rem;
  --text-pill: 0.7059rem;
  --text-micro: 0.6471rem;

  --gutter: 20px;
  --section: 30px;
  --stack: 14px;
  --touch: 44px;
  --row: 56px;
  --radius-inner: 9px;
  --radius-tile: 10px;
  --radius-field: 12px;
  --radius: 14px;
  --radius-sheet: 22px;
  --radius-full: 999px;
  --tab-h: 56px;
  --top-h: 48px;
  --sat: env(safe-area-inset-top);
  --sab: env(safe-area-inset-bottom);

  --lift: 0 1px 2px rgb(24 35 58 / 0.06), 0 10px 24px -14px rgb(24 35 58 / 0.3);
  --segment-shadow: 0 1px 3px rgb(0 0 0 / 0.14);
  --knob-shadow: 0 2px 6px rgb(0 0 0 / 0.2);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  color-scheme: light;
}

:root[data-theme="year-2026"],
[data-palette="year-2026"] {
  --sand: #f3f2e2;
  --sand-strong: #e6e8d3;
  --ink: #1e2a22;
  --ink-2: #4f5e53;
  --ink-3: #66736a;
  --line: rgb(74 115 85 / 0.14);
  --masthead: #4a7355;
  --masthead-deep: #3f6449;
  --masthead-note: #fffcd1;
  --primary: #3f6449;
  --accent: #3b6847;
  --live: #4a7355;
  --marker: #c9bd4a;
  --marker-ink: #5e5718;
  --on-marker: #1e1c05;
  --font-masthead: "DM Serif Text", Georgia, serif;
  --masthead-weight: 400;
  --masthead-tracking: -0.01em;
}

:root[data-scheme="dark"] {
  --selected-fill: var(--segment-on);
  --fill-on-surface: var(--sand-strong);
  --page: #141d31;
  --surface: #1d2840;
  --sand: #1d2840;
  --sand-strong: #26334f;
  --segment-on: #34446a;
  --ink: #f2ede4;
  --ink-2: #b2b8c5;
  --ink-3: #8a92a3;
  --line: rgb(255 255 255 / 0.09);
  --scrim: rgb(0 0 0 / 0.55);
  --masthead: #283c62;
  --masthead-deep: #20314f;
  --masthead-chip: rgb(255 255 255 / 0.1);
  --primary: #2ec4b6;
  --on-primary: #062522;
  --accent: #2ec4b6;
  --live: #2ec4b6;
  --on-live: #062522;
  --marker-ink: #f0c493;
  --danger: #f08a80;
  --knob: #f2ede4;
  --bar: rgb(20 29 49 / 0.9);
  --lift: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 14px 28px -18px rgb(0 0 0 / 0.7);
  color-scheme: dark;
}

:root[data-theme="year-2026"][data-scheme="dark"],
:root[data-scheme="dark"] [data-palette="year-2026"] {
  --selected-fill: var(--segment-on);
  --fill-on-surface: var(--sand-strong);
  --page: #111a14;
  --surface: #1a261d;
  --sand: #1a261d;
  --sand-strong: #233126;
  --segment-on: #2f4335;
  --line: rgb(255 255 255 / 0.09);
  --masthead: #24382a;
  --masthead-deep: #1c2c21;
  --primary: #a6cf9e;
  --on-primary: #10200f;
  --accent: #a6cf9e;
  --live: #a6cf9e;
  --on-live: #10200f;
  --marker-ink: #ece48f;
  --bar: rgb(17 26 20 / 0.9);
}

:root {
  --swatch-brand-1: #2a3d5e;
  --swatch-brand-2: #009c8f;
  --swatch-brand-3: #e7ae74;
  --swatch-year-2026-1: #4a7355;
  --swatch-year-2026-2: #84a87d;
  --swatch-year-2026-3: #fffcd1;
}