/*
 * WorldStamped foundation layer — next-gen redesign R0.
 *
 * HtmlLayout loads this file after every page stylesheet, so these values
 * override the legacy token files (tokens.css, app.css) that page actions still
 * include. Legacy names are bridged below; remove the bridge once every screen
 * uses the new tokens directly (release step, spec §14).
 *
 * Dark mode ("Night Atlas") follows the system setting only inside surfaces that
 * opt in with .ws-ui-v2; a wrapper that is a direct child of <body> also switches
 * the document canvas.
 */

/* Self-hosted fonts (SIL OFL 1.1), generated from resources/fonts/fonts-lock.json. */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/bricolage-grotesque-latin-700-normal.woff2?v=20261019-rev-8") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/bricolage-grotesque-latin-ext-700-normal.woff2?v=20261019-rev-8") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-400-normal.woff2?v=20261019-rev-8") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-ext-400-normal.woff2?v=20261019-rev-8") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-500-normal.woff2?v=20261019-rev-8") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-ext-500-normal.woff2?v=20261019-rev-8") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-600-normal.woff2?v=20261019-rev-8") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-ext-600-normal.woff2?v=20261019-rev-8") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-latin-500-normal.woff2?v=20261019-rev-8") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-latin-ext-500-normal.woff2?v=20261019-rev-8") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
  /* @ws-theme light */
  --ws-paper: #f3ede2;
  --ws-paper-strong: #eae2d3;
  --ws-surface: #fbf8f2;
  --ws-surface-raised: #ffffff;
  --ws-ink: #1d2a22;
  --ws-ink-soft: #2e3d33;
  --ws-muted: #6b6a5e;
  --ws-line: rgb(29 42 34 / 14%);
  --ws-line-strong: rgb(29 42 34 / 24%);
  --ws-accent: #c65d3b;
  --ws-accent-strong: #b4502f;
  --ws-accent-text: #a8482a;
  --ws-accent-deep: #8f3d22;
  --ws-accent-soft: #f2d9cc;
  --ws-on-accent: #ffffff;
  /* Jewel status colours (2026-10-05), mirrored by map-theme.js journal/night. */
  --ws-status-visited: #c65d3b;
  --ws-on-visited: #ffffff;
  --ws-status-lived: #1d7a4c;
  --ws-on-lived: #ffffff;
  --ws-status-transit: #f5dfa4;
  --ws-status-transit-line: #8f6200;
  --ws-status-want: #e1e5fb;
  --ws-status-want-line: #4256c8;
  --ws-forest: #1d7a4c;
  --ws-sage: #a9b8a3;
  --ws-sea: #3e6b66;
  --ws-success: #2f6b4f;
  --ws-warning: #9a641c;
  --ws-danger: #a83831;
  --ws-focus: #a8482a;
  --ws-glass: rgb(247 244 238 / 72%);
  --ws-glass-line: rgb(180 194 175 / 85%);
  --ws-glass-fallback: #f7f4ee;
  /* Map chrome glass: opaque enough for small ink-soft text over any map colour. */
  --ws-glass-strong: rgb(247 244 238 / 88%);
  --ws-dock: rgb(24 30 26 / 88%);
  --ws-dock-fallback: #181e1a;
  --ws-dock-line: rgb(255 255 255 / 12%);
  --ws-dock-icon: rgb(243 237 226 / 62%);
  --ws-dock-text: #f3ede2;
  --ws-dock-pill: #f3ede2;
  --ws-dock-icon-active: #1d2a22;
  --ws-map-ocean: #e3e4d8;
  --ws-map-land: #eadfcb;
  --ws-map-border: #d3c6ae;
  --ws-shadow-float: 0 1.25rem 3rem -1rem rgb(29 42 34 / 28%);
  --ws-paper-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.11 0 0 0 0 0.16 0 0 0 0 0.13 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  .ws-ui-v2,
  :root:has(> body > .ws-ui-v2) {
    /* @ws-theme dark */
    --ws-paper: #0f1a21;
    --ws-paper-strong: #142129;
    --ws-surface: #16242d;
    --ws-surface-raised: #1c2c36;
    --ws-ink: #eee7d9;
    --ws-ink-soft: #d5cdbe;
    --ws-muted: #97a3a6;
    --ws-line: rgb(238 231 217 / 14%);
    --ws-line-strong: rgb(238 231 217 / 24%);
    --ws-accent: #f2a65a;
    --ws-accent-strong: #f2a65a;
    --ws-accent-text: #f2a65a;
    --ws-accent-deep: #f7b97a;
    --ws-accent-soft: #3a2a1c;
    --ws-on-accent: #1a1209;
    --ws-status-visited: #ff9466;
    --ws-on-visited: #1b0d07;
    --ws-status-lived: #46d487;
    --ws-on-lived: #05200f;
    --ws-status-transit: #4a3c12;
    --ws-status-transit-line: #f5c542;
    --ws-status-want: #26306a;
    --ws-status-want-line: #95a6ff;
    --ws-forest: #46d487;
    --ws-sage: #3b4b4f;
    --ws-sea: #7fa9a3;
    --ws-success: #7cc2a0;
    --ws-warning: #e0b36a;
    --ws-danger: #f08a7e;
    --ws-focus: #f2a65a;
    --ws-glass: rgb(22 36 45 / 62%);
    --ws-glass-line: rgb(238 231 217 / 16%);
    --ws-glass-fallback: #16242d;
    --ws-glass-strong: rgb(22 36 45 / 90%);
    --ws-dock: rgb(8 14 18 / 90%);
    --ws-dock-fallback: #080e12;
    --ws-dock-line: rgb(255 255 255 / 10%);
    --ws-dock-icon: rgb(238 231 217 / 60%);
    --ws-dock-text: #eee7d9;
    --ws-dock-pill: #eee7d9;
    --ws-dock-icon-active: #0f1a21;
    --ws-map-ocean: #0f1a21;
    --ws-map-land: #1d2d36;
    --ws-map-border: #2b3f4a;
    --ws-shadow-float: 0 1.25rem 3rem -1rem rgb(0 0 0 / 55%);
    --ws-paper-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.93 0 0 0 0 0.9 0 0 0 0 0.85 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    color-scheme: dark;
  }
}

/* Type, rhythm and motion tokens (same in both themes). */
:root {
  --ws-font-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --ws-font-ui: "Inter", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --ws-font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ws-tracking-tight: -0.03em;
  --ws-weight-regular: 400;
  --ws-weight-medium: 600;
  --ws-weight-bold: 700;
  --ws-spring: cubic-bezier(0.2, 1.6, 0.4, 1);
  --ws-ease-out: cubic-bezier(0.2, 0.9, 0.3, 1);
  --ws-t-fast: 120ms;
  --ws-t-base: 240ms;
  --ws-t-slow: 420ms;
  --ws-t-hero: 700ms;
  font-family: var(--ws-font-ui);
  font-synthesis: none;
}

/* Legacy bridge: unconverted screens adopt the new palette through old names. */
:root,
.ws-ui-v2 {
  --ws-color-canvas: var(--ws-paper);
  --ws-color-canvas-strong: var(--ws-paper-strong);
  --ws-color-surface: var(--ws-surface);
  --ws-color-surface-raised: var(--ws-surface-raised);
  --ws-color-map: var(--ws-ink);
  --ws-color-map-soft: var(--ws-ink-soft);
  --ws-color-map-water: var(--ws-sea);
  --ws-color-map-land: var(--ws-map-land);
  --ws-color-map-land-active: var(--ws-accent);
  --ws-color-text: var(--ws-ink);
  --ws-color-text-soft: var(--ws-muted);
  /* Legacy accents are used both as text on paper and as button fills with inverse
     text, so they map to the AA-safe text accent (see FoundationAssetsTest). */
  --ws-color-text-inverse: var(--ws-on-accent);
  --ws-color-accent: var(--ws-accent-text);
  --ws-color-accent-strong: var(--ws-accent-deep);
  --ws-color-accent-soft: var(--ws-accent-soft);
  --ws-color-sea: var(--ws-sea);
  --ws-color-success: var(--ws-success);
  --ws-color-warning: var(--ws-warning);
  --ws-color-danger: var(--ws-danger);
  --ws-color-focus: var(--ws-focus);
  --ws-color-border: var(--ws-line);
  --ws-color-border-strong: var(--ws-line-strong);
  --ws-glass-fill: var(--ws-glass);
  --ws-glass-border: var(--ws-glass-line);
  --color-ink: var(--ws-ink);
  --color-ink-soft: var(--ws-ink-soft);
  --color-paper: var(--ws-paper);
  --color-paper-bright: var(--ws-surface);
  --color-coral: var(--ws-accent-text);
  --color-coral-dark: var(--ws-accent-deep);
  --color-sea: var(--ws-sea);
  --color-line: var(--ws-line);
  --color-glass: var(--ws-glass);
}

/* Opted-in surfaces paint their own paper (color-scheme comes from the theme block),
   the body too: a page capped at --ws-content-max must not show the legacy gradient
   and grid beside it on wide screens. */
:root:has(> body > .ws-ui-v2),
:root:has(> body > .ws-ui-v2) body {
  background: var(--ws-paper);
}

:root:has(> body > .ws-ui-v2) body {
  background-image: var(--ws-paper-texture);
}

:root:has(> body > .ws-ui-v2) body::before {
  content: none;
}

.ws-ui-v2 {
  color: var(--ws-ink);
  background-color: var(--ws-paper);
  background-image: var(--ws-paper-texture);
  font-family: var(--ws-font-ui);
}

@media (prefers-reduced-transparency: reduce) {
  :root,
  .ws-ui-v2,
  :root:has(> body > .ws-ui-v2) {
    --ws-glass: var(--ws-glass-fallback);
    --ws-glass-strong: var(--ws-glass-fallback);
    --ws-dock: var(--ws-dock-fallback);
  }
}

/* .ws-lite (boot.js, low-memory devices): the same solid chrome, and no live blur
   over moving maps, which weak GPUs redraw on every frame. */
:root.ws-lite,
:root.ws-lite:has(> body > .ws-ui-v2),
.ws-lite .ws-ui-v2,
.ws-lite .ws-map-app {
  --ws-glass: var(--ws-glass-fallback);
  --ws-glass-strong: var(--ws-glass-fallback);
  --ws-dock: var(--ws-dock-fallback);
  --ws-map-blur: none;
}

.ws-lite .ws-dock {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Cross-document page transitions: new pages spread like ink from the last tap. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: none;
}

::view-transition-new(root) {
  animation: ws-ink-reveal var(--ws-t-slow) var(--ws-ease-out) both;
}

html[data-ws-vt="back"]::view-transition-old(root) {
  animation: ws-fade-out var(--ws-t-base) var(--ws-ease-out) both;
}

html[data-ws-vt="back"]::view-transition-new(root) {
  animation: ws-fade-in var(--ws-t-base) var(--ws-ease-out) both;
}

@keyframes ws-ink-reveal {
  from {
    clip-path: circle(0 at var(--ws-vt-x, 50%) var(--ws-vt-y, 50%));
  }

  to {
    clip-path: circle(150vmax at var(--ws-vt-x, 50%) var(--ws-vt-y, 50%));
  }
}

@keyframes ws-fade-out {
  to {
    opacity: 0;
  }
}

@keyframes ws-fade-in {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}