/* Stoury's design system (STOUR-186): Alex Ebright's Oct 15 design review, appendix pp. 13 to 19,
 * and her Figma "Components & Tokens" page. One file of tokens that every launch page links before its
 * own styles (/home, the old builder at /home-classic, /discovery, /discovery/map, /discovery-itinerary and the share page,
 * /trip, /about, /faq, /privacy, /terms). Pages read these roles; they never restate the values.
 *
 * Colour. Every colour has one job, and the pastels are FILLS, never text: dark brown text on every
 * pastel, cream text on olive. Text pairings, measured (scripts are in the STOUR-186 report):
 *   light  text #1c1a13 on background #f4ead2 14.5:1, on surface #fbf6ea 16.1:1
 *          muted #5c5940 on background 5.9:1, link #a8492a on background 4.8:1
 *   dark   text #f4ead2 on background #1c1a13 14.5:1, on surface #2a281d 12.4:1
 *          muted #c9bfa6 on surface 8.1:1 (9.5:1 on the background), link #f79e78 on surface 7.1:1
 *   fills  dark brown on coral 8.4:1, gold 12.0:1, lime 14.3:1, sage 7.6:1; cream on olive 5.9:1
 *
 * Type. SP Blunt ('Stoury Display', self-hosted, caps as drawn) shouts: display, H1 to H3, labels,
 * buttons and chips. Alga Regular (the Adobe Fonts kit, family "alga"; Alga Light self-hosted is the
 * fallback while the kit loads or if it fails) tells the story: lead, body, small. IBM Plex Mono (the
 * same kit, "ibm-plex-mono") is the meta line: times, films, prices. Desktop / phone sizes:
 *   display 96/56  h1 56/36  h2 32/24  h3 20  label 14/13  lead 28/22  body 20/18  small 18  meta 13
 *
 * Shape. 12px corners on buttons and cards; one coral primary action per screen (dark brown text);
 * the secondary is outlined in dark brown on the surface. Chips are pills. The ticket shape (the side
 * notches) is retired everywhere. The circle "O" gradient is only the logo O, a selected pin and a
 * film still.
 *
 * Pins and days. A place's pin is its kind's icon on its kind's pastel: open exterior sage (camera),
 * eat or drink coral (fork), stay gold (bed), buy a ticket lime (ticket). In a plan a place shows its
 * number in its day's colour: Day 1 coral, Day 2 sage, Day 3 gold, Day 4 lime, Day 5 olive (cream
 * number). stoury-map.js draws the pins from the same values.
 */

:root{
  --st-bg:#f4ead2; --st-surface:#fbf6ea; --st-raised:#efe4c8;
  --st-text:#1c1a13; --st-muted:#5c5940; --st-link:#a8492a;
  --st-line:rgba(28,26,19,.16); --st-line-strong:#1c1a13;
  --st-coral:#f79e78; --st-gold:#f7d18a; --st-lime:#e3f09c; --st-sage:#87b5a6; --st-olive:#5c5940;
  --st-on-fill:#1c1a13; --st-on-olive:#f4ead2;
  --st-day-1:#f79e78; --st-day-2:#87b5a6; --st-day-3:#f7d18a; --st-day-4:#e3f09c; --st-day-5:#5c5940;
  --st-kind-exterior:#87b5a6; --st-kind-dining:#f79e78; --st-kind-stay:#f7d18a; --st-kind-ticketed:#e3f09c;
  --st-o:linear-gradient(135deg,#2f4f44 0%,#1c1a13 52%,#f79e78 100%);
  --st-radius:12px; --st-radius-sm:8px; --st-pill:999px;
  --st-shadow:0 18px 40px -18px rgba(28,26,19,.35);
  --st-display:'Stoury Display',system-ui,sans-serif;
  --st-serif:alga,'Stoury Serif',Georgia,serif;
  --st-mono:'ibm-plex-mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --st-fs-display:96px; --st-fs-h1:56px; --st-fs-h2:32px; --st-fs-h3:20px; --st-fs-label:14px;
  --st-fs-lead:28px; --st-fs-body:20px; --st-fs-small:18px; --st-fs-meta:13px;
}
@media (max-width:640px){
  :root{ --st-fs-display:56px; --st-fs-h1:36px; --st-fs-h2:24px; --st-fs-label:13px; --st-fs-lead:22px; --st-fs-body:18px; }
}
:root[data-theme="dark"]{
  --st-bg:#1c1a13; --st-surface:#2a281d; --st-raised:#34311f;
  --st-text:#f4ead2; --st-muted:#c9bfa6; --st-link:#f79e78;
  --st-line:rgba(244,234,210,.16); --st-line-strong:#f4ead2;
  --st-shadow:0 18px 40px -18px rgba(0,0,0,.7);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --st-bg:#1c1a13; --st-surface:#2a281d; --st-raised:#34311f;
    --st-text:#f4ead2; --st-muted:#c9bfa6; --st-link:#f79e78;
    --st-line:rgba(244,234,210,.16); --st-line-strong:#f4ead2;
    --st-shadow:0 18px 40px -18px rgba(0,0,0,.7);
  }
}

/* ── Type roles ─────────────────────────────────────────────────────────────── */
.st-display{font:400 var(--st-fs-display)/.95 var(--st-display);letter-spacing:.005em;}
.st-h1{font:400 var(--st-fs-h1)/1 var(--st-display);letter-spacing:.005em;}
.st-h2{font:400 var(--st-fs-h2)/1.08 var(--st-display);letter-spacing:.01em;}
.st-h3{font:400 var(--st-fs-h3)/1.15 var(--st-display);letter-spacing:.01em;}
.st-label{font:400 var(--st-fs-label)/1.2 var(--st-display);letter-spacing:.04em;}
.st-lead{font:400 var(--st-fs-lead)/1.35 var(--st-serif);}
.st-body{font:400 var(--st-fs-body)/1.5 var(--st-serif);}
.st-small{font:400 var(--st-fs-small)/1.4 var(--st-serif);}
.st-meta{font:400 var(--st-fs-meta)/1.45 var(--st-mono);letter-spacing:0;}
/* Her small label above a heading: SP Blunt, tracked, in the link colour. */
.st-eyebrow{font:400 var(--st-fs-label)/1.2 var(--st-display);letter-spacing:.14em;color:var(--st-link);}

/* ── Buttons and chips ──────────────────────────────────────────────────────── */
.st-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 22px;
  border-radius:var(--st-radius);font:400 var(--st-fs-label)/1.2 var(--st-display);letter-spacing:.04em;
  text-decoration:none;cursor:pointer;border:1.5px solid transparent;}
.st-btn--primary{background:var(--st-coral);color:var(--st-on-fill);border-color:var(--st-coral);}
.st-btn--primary:hover{filter:brightness(1.04);}
.st-btn--secondary{background:var(--st-surface);color:var(--st-text);border-color:var(--st-line-strong);}
.st-btn--secondary:hover{background:var(--st-raised);}
.st-btn:focus-visible{outline:2.5px solid var(--st-text);outline-offset:2px;}
.st-chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 12px;border-radius:var(--st-pill);
  font:400 13px/1.2 var(--st-display);letter-spacing:.04em;background:var(--st-surface);color:var(--st-text);
  border:1.5px solid var(--st-line-strong);}

/* Her arrows. The partner buttons already end in the up-right arrow in their own words ("Book a table on
   Resy"); the run's "Skip this one" gets her right arrow from the stylesheet, so its words stay as they
   are and a screen reader hears no glyph. .st-ext and .st-next put the same arrows on any other button. */
.st-ext::after{content:"\2197" / "";margin-left:6px;}
.st-next::after,.sbr-lnk[data-a="skip"]::after{content:"\2192" / "";margin-left:6px;}

/* ── Kinds: the pin's fill and icon (Alex's Figma "Map pins"; icons on her 24 grid, 1.75 stroke) ───────
   Open exterior sage + camera, eat or drink coral + fork and knife, stay gold + bed, buy a ticket lime +
   ticket, all with a dark brown icon and a thin dark brown ring; not checked yet is the raised surface
   with a muted dot. Four kinds since STOUR-179 retired the permission and route kinds into Open exterior.
   stoury-map.js draws the map's pins from the same paths (StouryMap.KIND_ICON). */
:root{
  --st-kind-unchecked:#efe4c8;
  --st-i-exterior:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%231c1a13'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3.5%208.5h3.2l1.6-2.5h7.4l1.6%202.5h3.2V19h-17z'/%3E%3Ccircle%20cx='12'%20cy='13.2'%20r='3.3'/%3E%3C/svg%3E");
  --st-i-dining:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%231c1a13'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%203v6a2.5%202.5%200%200%200%202.5%202.5v9.5M8.5%203v5M11%203v6a2.5%202.5%200%200%201-2.5%202.5'/%3E%3Cpath%20d='M17.5%2021V3c-2.2%201.4-3.3%204-3.3%207v3.5h3.3'/%3E%3C/svg%3E");
  --st-i-stay:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%231c1a13'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2019V6M3%2015h18v4M21%2015v-2.5A3.5%203.5%200%200%200%2017.5%209H11v6'/%3E%3Ccircle%20cx='7'%20cy='11.8'%20r='1.8'/%3E%3C/svg%3E");
  --st-i-ticketed:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%231c1a13'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%207.5h18v3a2%202%200%200%200%200%204v3H3v-3a2%202%200%200%200%200-4z'/%3E%3Cpath%20d='M9%207.5v1.6M9%2011.2v1.6M9%2014.9v1.6'/%3E%3C/svg%3E");
  --st-i-unchecked:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%235c5940'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='3.4'%20fill='%235c5940'%20stroke='none'/%3E%3C/svg%3E");
}
:root[data-theme="dark"]{
  --st-kind-unchecked:#34311f;
  --st-i-unchecked:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23c9bfa6'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='3.4'%20fill='%23c9bfa6'%20stroke='none'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --st-kind-unchecked:#34311f;
    --st-i-unchecked:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23c9bfa6'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='3.4'%20fill='%23c9bfa6'%20stroke='none'/%3E%3C/svg%3E");
  }
}
.st-kind{display:inline-block;flex:none;width:22px;height:22px;border-radius:50%;box-sizing:border-box;
  border:1px solid #1c1a13;background:var(--kc,var(--st-kind-unchecked)) var(--ki,var(--st-i-unchecked)) center/64% no-repeat;}
.st-kind.k-exterior{--kc:var(--st-kind-exterior);--ki:var(--st-i-exterior);}
.st-kind.k-dining{--kc:var(--st-kind-dining);--ki:var(--st-i-dining);}
.st-kind.k-stay{--kc:var(--st-kind-stay);--ki:var(--st-i-stay);}
.st-kind.k-ticketed{--kc:var(--st-kind-ticketed);--ki:var(--st-i-ticketed);}
.st-kind.k-unchecked{--kc:var(--st-kind-unchecked);--ki:var(--st-i-unchecked);border-color:var(--st-muted);}

/* STOUR-268: Amazon's required sentence in a page footer (app/services/affiliate_note.py), the meta size, muted. */
.aff-note{margin:4px 0 0;padding:0;text-align:inherit;color:var(--st-muted);font:400 var(--st-fs-meta,13px)/1.45 var(--st-mono);}