/* Theme fonts (Big Shoulders Display / Fraunces / Spline Sans Mono) load in
   PARALLEL from a <link> in index.html. Do NOT move them back to an @import
   here: @import is serial (this file must download first, then the font CSS
   fetch starts) — a full extra round-trip on every first visit while this
   is the default theme. tests/test_sw_fonts.py pins this. */

/* Hallmark custom-04 — two-pass riso ink on bone newsprint. */
[data-theme="broadsheet"] {
  color-scheme: light;

  /* Verbatim custom-04 palette. */
  --color-paper:    oklch(94% 0.012 85);
  --color-paper-2:  oklch(90% 0.016 80);
  --color-paper-3:  oklch(85% 0.022 78);
  --color-paper-4:  oklch(80% 0.026 76);
  --color-ink:      oklch(24% 0.018 65);
  --color-ink-2:    oklch(34% 0.016 60);
  --color-ink-mute: oklch(48% 0.020 60);
  --color-rule:     oklch(40% 0.020 62);
  --color-hairline: oklch(72% 0.020 78);
  --color-accent:      oklch(58% 0.205 32);
  --color-accent-deep: oklch(52% 0.200 32);
  --color-accent-btn:  oklch(50% 0.205 32);
  --color-accent-ink:  oklch(96% 0.012 85);
  --color-teal:     oklch(56% 0.095 205);
  --color-focus:    oklch(52% 0.200 32);
  --dot-ink:   oklch(24% 0.018 65 / 0.06);
  --grain-ink: oklch(24% 0.018 65 / 0.045);
  --mask-opaque: oklch(24% 0.018 65 / 1);

  /* Verbatim custom-04 typography. */
  --font-display: "Big Shoulders Display", "Arial Narrow", system-ui, sans-serif;
  --font-body:    "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-mono:    "Spline Sans Mono", ui-monospace, "Courier New", monospace;
  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 1.0625rem;
  --text-lg:   1.25rem;
  --text-xl:   1.625rem;
  --text-2xl:  2.25rem;
  --text-3xl:  clamp(2.75rem, 6vw, 4.5rem);
  --text-slab: clamp(3.5rem, 13vw, 11rem);
  --text-fold: clamp(3.25rem, 13vw, 9.5rem);
  --text-num:  clamp(3rem, 9vw, 8rem);
  --lh-slab: 1.0;
  --lh-tight: 1.02;
  --lh-body: 1.62;

  /* Verbatim custom-04 spacing, rules, shell, and motion. */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6.5rem;
  --space-4xl: 10rem;
  --space-5xl: 14rem;
  --rule-hair:   1px solid var(--color-hairline);
  --rule-press:  2px solid var(--color-rule);
  --rule-ink:    3px solid var(--color-ink);
  --rule-double: 4px double var(--color-ink);
  --radius-xs: 1px;
  --radius-sm: 2px;
  --sheet-max: 1280px;
  --sheet-pad: clamp(1.25rem, 5vw, 5rem);
  --crop: clamp(0.75rem, 2.4vw, 2rem);
  --reg-shift: 0.18em;
  --dur-reg: 620ms;
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-tape: 46s;
  --ease-snap: cubic-bezier(0.2, 0.9, 0.2, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Shared Local Way contract, mapped only to the two riso passes. */
  --color-rule-2: var(--color-hairline);
  --color-muted: var(--color-ink-mute);
  --color-neutral: var(--color-ink-2);
  --color-accent-2: var(--color-teal);
  --color-accent-2-deep: color-mix(in oklch, var(--color-teal) 82%, var(--color-ink));
  --color-accent-3: var(--color-accent);
  --color-accent-3-deep: var(--color-accent-deep);
  --color-mint: var(--color-accent);
  --color-mint-deep: var(--color-accent-deep);
  --color-lavender: color-mix(in oklch, var(--color-teal) 72%, var(--color-paper));
  --color-lavender-deep: var(--color-teal);
  --color-saffron: color-mix(in oklch, var(--color-accent) 42%, var(--color-paper-3));
  --color-saffron-deep: var(--color-accent-deep);
  --color-terracotta: var(--color-accent);
  --color-terracotta-deep: var(--color-accent-deep);
  --color-coral: var(--color-accent);
  --color-line: var(--color-hairline);
  --color-mint-strong: var(--color-mint-deep);
  --color-surface: var(--color-paper);
  --tint-pear: oklch(58% 0.205 32 / 0.12);
  --tint-cyan: oklch(56% 0.095 205 / 0.14);
  --tint-coral: oklch(58% 0.205 32 / 0.12);
  --tint-mint: oklch(58% 0.205 32 / 0.12);
  --tint-lavender: oklch(56% 0.095 205 / 0.10);
  --tint-saffron: oklch(58% 0.205 32 / 0.10);
  --tint-terracotta: oklch(58% 0.205 32 / 0.12);
  --font-label: var(--font-mono);
  --text-md: var(--text-base);
  --text-display: var(--text-fold);
  --text-display-s: var(--text-3xl);
  --tracking-display: -0.01em;
  --tracking-tight: 0.005em;
  --tracking-normal: 0;
  --tracking-label: 0.08em;
  --tracking-micro: 0.16em;
  --lh-snug: 1.18;
  --lh-normal: var(--lh-body);
  --lh-relaxed: 1.7;
  --section-gap: 6.5rem;
  --section-head-gap: 1.75rem;
  --page-max: var(--sheet-max);
  --page-gutter: var(--sheet-pad);
  --measure: 60ch;
  --bar-h: 66px;
  --radius-card: var(--radius-sm);
  --radius-pill: var(--radius-xs);
  --radius-input: var(--radius-sm);
  --rule-card: 2px;
  --shadow-card: 3px 3px 0 oklch(24% 0.018 65 / 0.18);
  --shadow-card-hover: 5px 5px 0 oklch(24% 0.018 65 / 0.22);
  --ease-soft: var(--ease-out);
  --ease-spring: var(--ease-snap);
  --dur-micro: var(--dur-fast);
  --dur-short: var(--dur-base);
  --dur-long: 420ms;
  --dur-wobble: 480ms;
  --dur-burst: 420ms;
  --dur-tick: 1200ms;
  /* Solid buttons keep the custom-04 treatment: bone ink on deep vermilion
     (5.9:1 AA). The shared --btn-* tokens set on this block can NEVER reach a
     .btn, because styles.css declares the same custom properties ON the
     element (element-level beats inheritance) — so the working override lives
     with the component rules below. */
  --hl: oklch(58% 0.205 32 / 0.26);
  --st: var(--color-teal);
  --st-deep: var(--color-mint-deep);
  --st-ink: var(--color-paper);
  --st-tint: var(--tint-mint);
}

/* The custom-04 sheet texture is isolated to this theme. */
[data-theme="broadsheet"] body::before,
[data-theme="broadsheet"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 900;
}
[data-theme="broadsheet"] body::before {
  background-image: radial-gradient(var(--dot-ink) 0.9px, transparent 1px);
  background-size: 6px 6px;
}
[data-theme="broadsheet"] body::after {
  background-image: repeating-linear-gradient(115deg, var(--grain-ink) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
  opacity: 0.7;
}

.theme-press-marks { display: none; }
[data-theme="broadsheet"] .theme-press-marks { display: block; position: fixed; inset: 0; z-index: 950; pointer-events: none; }
[data-theme="broadsheet"] .theme-press-marks .crop { position: absolute; width: 26px; height: 26px; border-color: var(--color-ink); border-style: solid; }
[data-theme="broadsheet"] .theme-press-marks .crop--tl { top: var(--crop); left: var(--crop); border-width: 2px 0 0 2px; }
[data-theme="broadsheet"] .theme-press-marks .crop--tr { top: var(--crop); right: var(--crop); border-width: 2px 2px 0 0; }
[data-theme="broadsheet"] .theme-press-marks .crop--bl { bottom: var(--crop); left: var(--crop); border-width: 0 0 2px 2px; }
[data-theme="broadsheet"] .theme-press-marks .crop--br { right: var(--crop); bottom: var(--crop); border-width: 0 2px 2px 0; }

/* Local Way components typeset as the same flat, letterpress broadsheet. */
[data-theme="broadsheet"] body { font-size: var(--text-base); line-height: var(--lh-body); font-optical-sizing: auto; font-feature-settings: "kern", "liga", "onum"; }
[data-theme="broadsheet"] ::selection { background: var(--color-accent); color: var(--color-accent-ink); }
[data-theme="broadsheet"] :is(h1, h2, h3, .nav__brand, .footer__brand, .footer__statement) { text-transform: uppercase; letter-spacing: 0.005em; }
[data-theme="broadsheet"] :is(.eyebrow, .form-label, .theme-switcher, .btn, .theme-filter button) { font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
[data-theme="broadsheet"] :is(em, .hl) { background-image: linear-gradient(var(--hl) 0 0); }
[data-theme="broadsheet"] .nav__inner,
[data-theme="broadsheet"] .nav.is-floating .nav__inner { background: oklch(94% 0.012 85 / 0.94); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: var(--rule-ink); border-radius: 0; box-shadow: none; }
[data-theme="broadsheet"] .nav.is-floating .nav__inner { transform: translateY(0); max-width: var(--page-max); }
[data-theme="broadsheet"] .lw-mark::before { border-radius: 0; background: var(--color-accent); border-color: var(--color-ink); transform: rotate(-5deg); }
[data-theme="broadsheet"] .lw-mark::after { border-radius: 0; background: var(--color-teal); }
[data-theme="broadsheet"] .btn { border: 2px solid var(--btn-edge); border-radius: var(--radius-xs); box-shadow: 3px 3px 0 var(--btn-edge); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
/* Custom-04 solid buttons: bone ink on the deep vermilion pass (5.9:1 AA).
   Specificity (0,2,0) beats the element-level --btn-* declarations in
   styles.css .btn / .btn--mint, which rendered ink-on-vermilion at 3.49:1. */
[data-theme="broadsheet"] :is(.btn, .btn--mint) {
  --btn-face: var(--color-accent-btn);
  --btn-ink: var(--color-accent-ink);
  --btn-edge: var(--color-ink);
  --btn-cast: oklch(24% 0.018 65 / 0.18);
  --btn-line: var(--color-accent-deep);
}
[data-theme="broadsheet"] .nearme-fab { background: var(--color-accent-btn); color: var(--color-accent-ink); border-radius: var(--radius-xs); }
/* The ID-specificity saved-state rule in styles.css beats the :is() override
   above — re-apply the custom-04 treatment for the confirmed state too. */
[data-theme="broadsheet"] #save-offline-btn[data-saved-state="saved"] {
  --btn-face: var(--color-accent-btn); --btn-ink: var(--color-accent-ink);
  --btn-edge: var(--color-ink); --btn-cast: oklch(24% 0.018 65 / 0.18);
}
[data-theme="broadsheet"] .btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--btn-edge); }
[data-theme="broadsheet"] :is(.city-card, .library-card, .guide-day, .food-spot, .neighborhood-card, .essential-card, .search-result, .auth-modal, .flagship-card, .theme-chip, .quick-city, .search-input, .guide-search, .guide-search__panel, .offline-banner, .share-btn, .save-offline-btn) { border-width: 2px; border-radius: var(--radius-sm); box-shadow: none; }
[data-theme="broadsheet"] :is(.theme-chip, .quick-city) { font-family: var(--font-mono); }
[data-theme="broadsheet"] :is(.city-card__image, .city-card__cover, .preview-card__cover-img) { border-radius: var(--radius-xs); }
[data-theme="broadsheet"] :is(.city-card__cover, .preview-card__cover-img) { background: linear-gradient(112deg, var(--color-accent) 0 52%, var(--color-teal) 52% 58%, var(--color-paper-3) 58% 100%); }
[data-theme="broadsheet"] .section--band,
[data-theme="broadsheet"] .footer { border-block-color: var(--color-rule); }
[data-theme="broadsheet"] .mobile-cta { background: oklch(94% 0.012 85 / 0.96); backdrop-filter: none; -webkit-backdrop-filter: none; }
[data-theme="broadsheet"] .theme-switcher { border: 1px solid var(--color-rule); border-radius: var(--radius-xs); background: var(--color-paper); color: var(--color-ink); }

@media (max-width: 40rem) {
  [data-theme="broadsheet"] .theme-press-marks .crop { width: 16px; height: 16px; }
}