/* Sarv: the design system of Soultan's World. Canonical tokens, shared by the world (assets/world/world.css) and the main site.
   Declared on :root for the site and kept on .sh-world so the world resolves them exactly as before. --sh-* are aliases the world still uses. */
:root, .sh-world {
  /* Sarv tokens (canonical) */
  --sarv-paper: var(--neutral-50, #faf9f7);
  --sarv-ink: var(--neutral-900, #1f1f1f);
  --sarv-muted: #5e574b;
  --sarv-clay: var(--orange-500, #a64823);
  --sarv-clay-dark: #8a3a1b;
  --sarv-green: #49734d;
  --sarv-green-dark: #3a5d3e;
  --sarv-success-bg: #f1f8ec;   /* a done message's fill (the site's sent alert) */
  --sarv-parch: #f5eedf;
  --sarv-bone: #efe8dc;
  --sarv-wood: #5a3d27;
  --sarv-wood-mid: #7a5233;
  --sarv-edge: #3b2718;
  --sarv-progress-track: #e9dcc3;
  --sarv-brass: #c9a24a;
  --sarv-brass-light: #ecd290;
  --sarv-rule: #c9b08a;
  --sarv-rule-dark: #a5835c;
  --sarv-halo: #fff8e6;
  --sarv-veil: rgb(251 247 238 / .94);   /* paper laid over a picture so words on it read (the case-study lock) */
  --sarv-inverse-ink-soft: #f1e6d0;   /* quieter text on a dark surface (the footer line) */
  --sarv-grain: repeating-linear-gradient(0deg, rgba(90, 61, 39, .035) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(90, 61, 39, .025) 0 1px, transparent 1px 7px);
  --sarv-paper-bg: var(--sarv-grain), radial-gradient(120% 90% at 0% 0%, #fffbf2, transparent 60%), linear-gradient(180deg, #f9f3e6, #f1e7d4);
  --sarv-wood-bg: repeating-linear-gradient(0deg, rgba(0, 0, 0, .1) 0 1px, transparent 1px 6px, rgba(255, 255, 255, .05) 6px 7px, transparent 7px 11px), linear-gradient(180deg, #6f4b2f, #57391f);
  --sarv-clay-bg: repeating-linear-gradient(0deg, rgba(0, 0, 0, .07) 0 1px, transparent 1px 6px), linear-gradient(180deg, #b5552c, #9a4220);
  /* faces: the house's pixel voice for everything it labels; a mono for reading (both registered by world.js) */
  --sarv-ui: "Pixelify Sans", system-ui, sans-serif;
  --sarv-display: "Pixelify Sans", system-ui, sans-serif;
  --sarv-body: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  /* type: every text style in the house is one of these (labels are also uppercase with .12em tracking in Latin) */
  --sarv-t-display: 700 24px/32px var(--sarv-display);   /* folio titles, the loader */
  --sarv-t-heading: 600 20px/28px var(--sarv-ui);                              /* section heads inside a folio */
  --sarv-t-body: 400 16px/28px var(--sarv-body);                               /* folio text */
  --sarv-t-speech: 400 16px/24px var(--sarv-body);                             /* Nour's words */
  --sarv-t-button: 600 16px/16px var(--sarv-ui);                               /* buttons and the trail's next/previous */
  --sarv-t-control: 500 16px/16px var(--sarv-ui);                             /* tools, tags, menus, the deck */
  --sarv-t-status: 600 16px/24px var(--sarv-ui);                                /* a form's status line */
  --sarv-t-small: 400 12px/16px var(--sarv-body);                            /* captions, notes, secondary lines */
  --sarv-t-label: 500 12px/16px var(--sarv-body);                                /* eyebrows, the speaker, list heads (uppercase, .06em) */
  /* motion: presses are instant-feeling, overlays quick, flights (a picture to its folio) unhurried; all off under reduced motion */
  /* the grid: 4 px half-step, 8 px steps; --sarv-hit is the smallest comfortable target (WCAG 2.2 asks 24, touch guidance 44) */
  --sarv-s1: 4px; --sarv-s2: 8px; --sarv-s3: 12px; --sarv-s4: 16px; --sarv-s5: 24px; --sarv-s6: 32px; --sarv-s7: 40px; --sarv-s8: 48px; --sarv-s9: 64px; --sarv-s10: 80px; --sarv-s11: 96px; --sarv-hit: 48px;
  --sarv-well: #1d130b;   /* the dark well behind the piano keys */
  --sarv-badge: #e9dcc0; --sarv-badge-wait: #f3da94; --sarv-badge-ok: #cfe0c8;   /* status badges (reading, read) */
  --sarv-badge-ok-edge: #9fbd96; --sarv-badge-ok-edge-dark: #7b9a73; --sarv-badge-wait-edge: #d9b85a; --sarv-badge-wait-edge-dark: #b8963b;   /* ok / wait frame and edge */
  --sarv-badge-ink: var(--sarv-ink-mid); --sarv-badge-track: .08em; --sarv-kicker-track: .08em; --sarv-tool-on-bg: var(--sarv-wood-bg); --sarv-tool-on-ink: var(--sarv-plaque-ink); --sarv-tool-on-edge: var(--sarv-brass);   /* badge text */
  /* component tokens: every pressable reads these, never a literal (assets/sarv/pressables.css) */
  --sarv-white: #fff; --sarv-ink-soft: #39342c; --sarv-say-bubble-bg: var(--sarv-white);   /* a transcript bubble that is not the visitor's (the site assistant's answers) */
  --sarv-on-clay: var(--sarv-white); --sarv-on-green: #fffaf0;
  --sarv-edge-primary: #6e2b12; --sarv-edge-primary-dark: #4a1c0b; --sarv-edge-on: #2a4530;   /* the primary button's and the pressed state's edges */
  --sarv-btn-pad: var(--sarv-s2) var(--sarv-s5); --sarv-btn-pad-sm: var(--sarv-s1) var(--sarv-s4); --sarv-btn-min-sm: var(--sarv-s7); --sarv-btn-min-dense: var(--sarv-s7); --sarv-btn-gap: var(--sarv-s2); --sarv-btn-icon: 16px;   /* dense: a link row inside a card or panel, 40 px on every screen, phones included (owner's call, 2026-10-27) */
  --sarv-edge-gold: #8a6a22; --sarv-edge-gold-dark: #5e4714;   /* the call-to-action chip */
  --sarv-disabled: .45; --sarv-press: 2px;   /* how far a pressable rises on hover and sinks on press */
  --sarv-hairline: #e3d6bd; --sarv-selected: #f4ead6; --sarv-hover: color-mix(in srgb, var(--sarv-clay) 10%, transparent); --sarv-current: color-mix(in srgb, var(--sarv-clay) 20%, var(--sarv-paper));   /* row dividers, the chosen row, a hovered row */
  --sarv-list-row: 48px; --sarv-list-icon: 20px; --sarv-list-bar: 4px; --sarv-list-gap: 4px; --sarv-list-gap-inline: 12px;   /* list navigation */
  --sarv-t-chip: 500 16px/24px var(--sarv-ui);   /* chip labels: the control face, a reading line height so a long question wraps cleanly */
  --sarv-chip-depth: 4px; --sarv-chip-pad-dot: 28px; --sarv-chip-dot: 7px; --sarv-chip-dot-x: 11px;   /* chip: small-control edge, room for the bullet */
  --sarv-chip-dot-shade: rgba(0, 0, 0, .55); --sarv-chip-ring: color-mix(in srgb, var(--sarv-clay) 55%, transparent); --sarv-chip-ring-green: color-mix(in srgb, var(--sarv-green) 70%, transparent);
  --sarv-t-tip: 500 16px/24px var(--sarv-ui); --sarv-tip-depth: 4px; --sarv-tip-gap: 8px; --sarv-tip-max: 320px;   /* tooltip: control face (Pixelify is weak below 15 px), small-control edge, gap from its anchor */
  --sarv-logo-rest: brightness(0) opacity(.5);   /* partner logos at rest: one flat tone for every mark (a silhouette at 50%), full colour on hover */
  --sarv-tile-size: 40px; --sarv-tile-icon: 20px; --sarv-tile-shine: rgba(255, 255, 255, .5);   /* icon tile: the square, its icon, the pixel highlight */
  --sarv-card-depth: 8px;   /* panels and cards rest on an 8 px edge */
  --sarv-t-num-xl: 600 48px/56px var(--sarv-body);   /* a headline figure (a milestone) */
  --sarv-plaque-depth: 6px; --sarv-plaque-icon: 24px; --sarv-plaque-ink: #fbf5e8;   /* plaque: control edge, icon, the light text on the wood */
  --sarv-t-plaque-kicker: 600 12px/16px var(--sarv-body); --sarv-t-plaque: 600 16px/20px var(--sarv-ui);   /* plaque: whose (small label), where (the name) */
  --sarv-field-bg: var(--sarv-mount); --sarv-field-invalid-bg: #fff7f3; --sarv-field-depth: 4px; --sarv-field-halo: 3px; --sarv-t-field: 500 16px/24px var(--sarv-body); --sarv-t-field-label: 600 16px/24px var(--sarv-ui); --sarv-t-hint: 400 16px/24px var(--sarv-body);   /* field: the input paper, its error tint, small-control edge, focus halo, what a visitor types is set in the body face (long text reads poorly in the pixel face), with a reading line height */
  --sarv-switch-w: 52px; --sarv-switch-h: 28px; --sarv-switch-knob: 20px; --sarv-switch-inset: 4px; --sarv-switch-depth: 2px; --sarv-switch-move: .14s; --sarv-switch-off: #e6d9bf; --sarv-switch-knob-on: #fbf5e8;   /* switch toggle: track, knob, edge, travel time, off track, on knob */
  --sarv-seg-depth: 4px; --sarv-seg-icon: 20px; --sarv-seg-divider: #e3d6bd; --sarv-seg-selected: #f4ead6; --sarv-seg-on-ink: #fbf7ee;   /* switch segmented: control edge, icon, divider, hover row, text on the chosen option */
  --sarv-sheet-max: 88dvh; --sarv-sheet-bar: calc(var(--sarv-s4) + var(--sarv-hit) + var(--sarv-s2)); --sarv-sheet-menu-w: 480px; --sarv-sheet-handle-w: 40px; --sarv-sheet-handle-h: 4px; --sarv-scrim: rgba(28, 20, 12, .52);   /* sheet: tallest it rises, the grab handle, the dimmed scene behind */
  --sarv-fast: .12s; --sarv-quick: .2s; --sarv-move: .46s; --sarv-ease: cubic-bezier(.2, .8, .2, 1);
  --sarv-t-meta: 500 16px/24px var(--sarv-body);   /* facts, dates, figures in text (site) */
  --sarv-t-num: 600 32px/40px var(--sarv-body);   /* stat figures */
  --sarv-t-stat: 600 32px/40px var(--sarv-body);   /* a stat figure in a narrow container (the world's stamps), the same size at every width */
  --sarv-t-lede: 400 20px/32px var(--sarv-body);   /* the line under a title: what this is, in one breath */
  --sarv-t-aside: italic 400 16px/24px var(--sarv-body);   /* an overheard or passing line: a glimpse, a toast, a photograph's verse */
  --sarv-t-callout: var(--sarv-t-hint);   /* the words inside a callout */
  --sh-t-meta: var(--sarv-t-meta); --sh-t-num: var(--sarv-t-num);
  /* aliases: the world's stylesheet and script still say --sh-*; --sarv-* above is the canonical name of the Sarv design system */
  --sh-paper: var(--sarv-paper); --sh-ink: var(--sarv-ink); --sh-muted: var(--sarv-muted); --sh-clay: var(--sarv-clay); --sh-clay-dark: var(--sarv-clay-dark); --sh-green: var(--sarv-green); --sh-green-dark: var(--sarv-green-dark); --sh-parch: var(--sarv-parch); --sh-bone: var(--sarv-bone); --sh-wood: var(--sarv-wood); --sh-wood-mid: var(--sarv-wood-mid); --sh-edge: var(--sarv-edge); --sh-brass: var(--sarv-brass); --sh-brass-light: var(--sarv-brass-light); --sh-rule: var(--sarv-rule); --sh-rule-dark: var(--sarv-rule-dark); --sh-halo: var(--sarv-halo); --sh-grain: var(--sarv-grain); --sh-paper-bg: var(--sarv-paper-bg); --sh-wood-bg: var(--sarv-wood-bg); --sh-clay-bg: var(--sarv-clay-bg); --sh-ui: var(--sarv-ui); --sh-display: var(--sarv-display); --sh-body: var(--sarv-body); --sh-t-display: var(--sarv-t-display); --sh-t-heading: var(--sarv-t-heading); --sh-t-body: var(--sarv-t-body); --sh-t-speech: var(--sarv-t-speech); --sh-t-button: var(--sarv-t-button); --sh-t-control: var(--sarv-t-control); --sh-t-small: var(--sarv-t-small); --sh-t-label: var(--sarv-t-label); --sh-s1: var(--sarv-s1); --sh-s2: var(--sarv-s2); --sh-s3: var(--sarv-s3); --sh-s4: var(--sarv-s4); --sh-s5: var(--sarv-s5); --sh-s6: var(--sarv-s6); --sh-hit: var(--sarv-hit); --sh-well: var(--sarv-well); --sh-badge: var(--sarv-badge); --sh-badge-wait: var(--sarv-badge-wait); --sh-badge-ok: var(--sarv-badge-ok); --sh-fast: var(--sarv-fast); --sh-quick: var(--sarv-quick); --sh-move: var(--sarv-move); --sh-ease: var(--sarv-ease);
  /* the World's own roles (assets/world/world.css reads only these, never a literal; docs/world-redesign/world-colour-tokens.md) */
  --sarv-black: #000; --sarv-shade: #2a221a;   /* bases, always mixed down: shadows, halos, tracks, dividers on paper */
  --sarv-curtain: #1f1f1f; --sarv-scene-ink: #fffaf0; --sarv-caption-bg: radial-gradient(closest-side, rgba(22, 15, 9, .52), rgba(22, 15, 9, .34) 55%, rgba(22, 15, 9, .1) 85%, transparent); --sarv-scene-halo: color-mix(in srgb, var(--sarv-black) 80%, transparent); --sarv-scene-halo-strong: color-mix(in srgb, var(--sarv-black) 90%, transparent); --sarv-aim-ink: #f6ead0; --sarv-aim-bg: #1f140b; --sarv-aim-ink-live: #fff3d6; --sarv-aim-dot: #e9503a;   /* over the 3D scene: ink, halos, the caption glow, the site-to-world curtain, the aim hint */
  --sarv-wood-edge-dark: #24170e;   /* the dark edge under the wood buttons */
  --sarv-placeholder-bg: linear-gradient(180deg, #ece2cd, #e2d4b8); --sarv-callout-bg: #f6ead3; --sarv-placeholder: #efe3c8; --sarv-mount: #fffdf8; --sarv-rule-soft: #d9c9ab; --sarv-ink-mid: #4a4439; --sarv-selected-green: #e4ecd9; --sarv-drop-shadow: color-mix(in srgb, var(--sarv-shade) 35%, transparent);   /* inside a folio: the bright mount, the soft rule, callouts, placeholders, secondary ink, a floating card's shadow, a pressed green toggle */
  --sarv-shelf-bg: linear-gradient(#dcc6a0, #ccb185); --sarv-mount-edge: #b99e72; --sarv-book-ink: #2b2118; --sarv-book-page: #efe4cf; --sarv-book-page-edge: #cdbb98; --sarv-book-ink-soft: #4a3a28; --sarv-star: #b57d16;   /* the shelf board, a mounted edge, book inks, the page block, the rating star */
  --sarv-sky-day: #a9c9dc; --sarv-night-edge: #2a3352; --sarv-night-edge-dark: #151a2c; --sarv-night-bg: repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 6px), linear-gradient(180deg, #313c60, #222a46); --sarv-keycap: #f3e4bf; --sarv-keycap-ink: #2a1b0e; --sarv-selected-gold: #f3e3b6; --sarv-sky-ink: #e9e2cf; --sarv-sky-figure: rgba(160, 182, 232, .85); --sarv-sky-deep: #05070c;   /* the night toggle, the sky behind the scene and charts, sky labels, a pressed sky layer, keycaps in hints */
  --sarv-cta-bg: linear-gradient(#f3da94, #e0bb5c); --sarv-cta-ink: #2b1f0c; --sarv-cta-bg-hover: linear-gradient(#f7e2a6, #e6c46b);   /* the gold call-to-action chip */
  --sarv-piano-now: #fff3c9; --sarv-key-btn: #4a3424; --sarv-key-btn-edge: #2b1c10; --sarv-key-btn-hover: #5d4230; --sarv-key-white: linear-gradient(#f7f1e4, #e9e0cd); --sarv-key-white-ink: #3a2a1a; --sarv-key-white-edge: #cfc3aa; --sarv-key-black: linear-gradient(#34281f, #14100c); --sarv-key-black-ink: #f0e4cf; --sarv-key-black-edge: #050403; --sarv-key-white-down: linear-gradient(#f4cf8c, #e9a85a); --sarv-key-white-down-edge: #b97a2c; --sarv-key-white-glow: rgba(243, 187, 98, .55); --sarv-key-black-down: linear-gradient(#c9633a, #8c3f22); --sarv-key-black-down-edge: #4a1f0f; --sarv-key-black-glow: rgba(201, 99, 58, .6);   /* the piano: now playing, its wood buttons, white and black keys at rest and held */
  --sarv-groove: #efe4cb; --sarv-groove-line: #e6d8bb; --sarv-data-contract: #3d5a73; --sarv-data-freelance: #b88a22; --sarv-plan-house: #efe3c8; --sarv-plan-visited: #e9d3a9; --sarv-scroll-thumb-edge: #7d6320; --sarv-scroll-thumb-rim: #3a2a18; --sarv-scroll-track: #ecdfc4;   /* slider grooves, the timeline's work kinds, the pixel scroll bar, the Map */
}
@media (min-width: 640px) { :root, .sh-world { --sarv-t-display: 700 32px/40px var(--sarv-display); } }
@media (min-width: 1024px) { :root, .sh-world { --sarv-t-num: 600 40px/48px var(--sarv-body); --sarv-t-num-xl: 600 64px/72px var(--sarv-body); } }
/* Inverse surface (dark wood: the site footer; any dark panel later). The same role tokens, re-pointed for a dark ground, so every Sarv
   component inside (quiet button, button, chip...) stays legible with no per-component rule. Contrast on the wood: ink 10:1, accent 7:1, underline 4.5:1. */
.sarv-inverse { --sarv-ink: var(--sarv-halo); --sarv-clay-dark: var(--sarv-brass-light); --sarv-rule-dark: var(--sarv-brass); --sarv-hover: color-mix(in srgb, var(--sarv-brass-light) 14%, transparent); }
/* A paper panel that opens over the inverse surface (the footer's version menu) restores the four role tokens the inverse re-points; keep in step with the root block above. */
.sarv-inverse .sarv-paper { --sarv-ink: var(--neutral-900, #1f1f1f); --sarv-clay-dark: #8a3a1b; --sarv-rule-dark: #a5835c; --sarv-hover: color-mix(in srgb, var(--sarv-clay) 10%, transparent); color: var(--sarv-ink); }