/* PhonoLeaf website: the Horizon design (2026-09-13).

   One stylesheet for every public page except the legal pages, which get the
   same design from horizon-legal-v3.css + horizon-legal-web.css, generated from
   the app's own pages. DESIGN.md is the authority for every value here.

   WHY A SHARED FILE LOADED LAST. Each page still carries its own <style> from
   the retired green design (live pages) or Green Ink (the launch drafts). This
   file is linked AFTER that block, so it restyles all ~80 pages from one place
   without rewriting their inline CSS, and a change to the look is one edit.
   Component rules are prefixed with :root so they also beat the pages' own
   [data-theme="dark"] .x overrides, which carry one more selector than .x.

   THEME. Follows the device (prefers-color-scheme). A Light or Dark choice made
   inside the app still wins, because the pages mirror it into data-theme from
   the same pl_theme key the app writes, exactly as the app's legal pages do. */

@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url('fonts/manrope.woff2') format('woff2');
}
@font-face {
  font-family: 'Literata'; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url('fonts/literata.woff2') format('woff2');
}

/* ------------------------------------------------------------------ tokens */

/* Day: warm paper, deep ink, forest green. */
:root {
  color-scheme: light;
  --bg: #F4F1E8;
  --surface: #FBF9F3;
  --card: #FBF9F3;
  --heading: #1F4A3B;
  --accent: #2F6650;
  --accent2: #7A5E22;
  --text: #203D32;
  --text-dim: #5F6A61;
  --line: #DAD6C8;
  --button-bg: #2F6650;
  --button-fg: #F7F4EB;
  --radius: 6px;
  --shadow-ink: 0 1px 2px rgba(30, 58, 48, .06), 0 8px 24px rgba(30, 58, 48, .07);
  --ink-strong: 0 2px 4px rgba(30, 58, 48, .08), 0 14px 34px rgba(30, 58, 48, .12);
  --font-ui: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-read: 'Literata', Georgia, serif;
}

/* Night: deep indigo, brass, bone. Declared twice on purpose: once for the
   device setting, once for an explicit choice made in the app. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0E1626;
    --surface: #16202F;
    --card: #16202F;
    --heading: #D4B45F;
    --accent: #C9AA55;
    --accent2: #C9AA55;
    --text: #EDE9DD;
    --text-dim: #A9AAA0;
    --line: #2A3446;
    --button-bg: #C9AA55;
    --button-fg: #0E1626;
    --shadow-ink: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px rgba(0, 0, 0, .28);
    --ink-strong: 0 2px 4px rgba(0, 0, 0, .35), 0 16px 38px rgba(0, 0, 0, .34);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0E1626;
  --surface: #16202F;
  --card: #16202F;
  --heading: #D4B45F;
  --accent: #C9AA55;
  --accent2: #C9AA55;
  --text: #EDE9DD;
  --text-dim: #A9AAA0;
  --line: #2A3446;
  --button-bg: #C9AA55;
  --button-fg: #0E1626;
  --shadow-ink: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px rgba(0, 0, 0, .28);
  --ink-strong: 0 2px 4px rgba(0, 0, 0, .35), 0 16px 38px rgba(0, 0, 0, .34);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F4F1E8;
  --surface: #FBF9F3;
  --card: #FBF9F3;
  --heading: #1F4A3B;
  --accent: #2F6650;
  --accent2: #7A5E22;
  --text: #203D32;
  --text-dim: #5F6A61;
  --line: #DAD6C8;
  --button-bg: #2F6650;
  --button-fg: #F7F4EB;
  --shadow-ink: 0 1px 2px rgba(30, 58, 48, .06), 0 8px 24px rgba(30, 58, 48, .07);
  --ink-strong: 0 2px 4px rgba(30, 58, 48, .08), 0 14px 34px rgba(30, 58, 48, .12);
}

/* -------------------------------------------------------------- typography */

:root body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
}
:root h1 {
  font: 400 clamp(2rem, 1.4rem + 2.4vw, 2.85rem)/1.12 var(--font-read);
  letter-spacing: -.025em;
  color: var(--heading);
  text-wrap: balance;
}
:root h2 {
  font-family: var(--font-read);
  font-weight: 400;
  font-size: clamp(1.35rem, 1.15rem + .8vw, 1.65rem);
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--heading);
  text-wrap: balance;
}
:root h3 {
  font-family: var(--font-read);
  font-weight: 500;
  color: var(--heading);
}
:root a { color: var(--accent); text-underline-offset: 3px; }
:root .tagline { color: var(--accent2); }
:root .langswitch b { color: var(--accent); }
:root .langswitch a { color: var(--text-dim); }
:root code {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
}

/* ------------------------------------------------------------------- brand */

/* The real Horizon lockup: symbol + wordmark from the luminance masks in art/,
   tinted with currentColor, so it is forest green by day and brass by night. */
:root .brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--heading);
  text-decoration: none;
}
:root .brand svg { display: block; overflow: visible; flex-shrink: 0; }
:root .brand-symbol-img { width: 14px; height: 23px; }
:root .brand-wordmark-img { width: 154px; height: 13px; }
.brand-label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------------- hero */

/* The page's old square app icon becomes the Horizon scene: the lake at golden
   hour by day, the same lake by moonlight at night. Decorative, so it is a
   background and the old icon markup is simply hidden. */
:root .hero .mark {
  display: block;
  width: 100%;
  height: clamp(150px, 24vw, 300px);
  margin: 0 auto 2.2rem;
  border-radius: var(--radius);
  background: url('art/day.webp') center 58% / cover no-repeat;
  box-shadow: var(--shadow-ink);
}
:root .hero .mark svg { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero .mark { background-image: url('art/night.webp'); }
}
:root[data-theme="dark"] .hero .mark { background-image: url('art/night.webp'); }

/* ----------------------------------------------------------------- buttons */

:root .store,
:root .cta {
  background: var(--button-bg);
  color: var(--button-fg);
  border: 1px solid var(--button-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-ink);
  transition: transform .15s ease, box-shadow .15s ease;
}
:root .store:hover,
:root .cta:hover {
  transform: translateY(-1px);
  box-shadow: var(--ink-strong);
}
/* Until both store listings exist, the store buttons keep their full look but
   say "Coming soon", and are not links. The stores' own logos only appear as
   their official badges, which replace these at launch (STORE-LINK-TODO). */
:root .store.store-soon { cursor: default; }
:root .store.store-soon:hover { transform: none; box-shadow: var(--shadow-ink); }

:root .steps li::before {
  background: var(--button-bg);
  color: var(--button-fg);
  border-radius: var(--radius);
}

/* ---------------------------------------------------------------- surfaces */

/* Small radii, a fine rule and shallow depth, per DESIGN.md. Replaces both the
   old 14px cards and Green Ink's offset ink shadow. */
:root .card,
:root .feat,
:root .why-item,
:root .plan,
:root .included,
:root .compare a,
:root .postlist a,
:root .choose,
:root .closing,
:root table.cmp {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-ink);
}
:root .compare a:hover,
:root .postlist a:hover {
  transform: translateY(-1px);
  box-shadow: var(--ink-strong);
}
:root .plan.best { border-color: var(--accent); box-shadow: var(--ink-strong); }
:root .plan.limited { border-color: var(--accent2); }
:root .plan .flag,
:root .plan.limited .flag {
  background: var(--accent2);
  color: var(--bg);
  border-radius: 4px;
}
:root table.cmp th { background: var(--bg); color: var(--text-dim); }
:root table.cmp th,
:root table.cmp td { border-bottom-color: var(--line); }

/* ------------------------------------------------------------ accessibility */

:root :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  :root .store:hover,
  :root .cta:hover,
  :root .compare a:hover,
  :root .postlist a:hover { transform: none; }
}