/* css/tokens.css — Pharloom: design tokens.
   Every colour, type and spacing value comes from here.

   Measured on Silksong's own sprites and screenshots (design/02-silksong.md), and decided on
   27 September 2026 (its §5). The page is the game's two families of screens:
     · the page itself is the main menu (title, options, profile select): a black with a red
       cast (#0f0604) and a red light rising from the bottom centre (--ember-glow), with orange
       embers drifting up (--mote). The surfaces are that black's ramp (H 5°, S under 30%);
     · the screens (.screen: the Crest, the Inventory, the Journal) are the pause menu: pure
       black, a warm spotlight (#23201d) and the white filigree, with no colour of their own;
     · the red is atmosphere only: never the accent, a figure or text;
     · the accent is bone (#f1ebdc, the Crest screen's cream): the game selects with white on
       grey, not with a hue, so what responds to the finger is told by its shape and its glow;
     · every screen is framed and titled in the pause menu's white filigree (--filigree): no
       section has a colour of its own, as none of the game's panes does.
   What's the web's stays (design/01-web.md): the type scale, the spacing, the tracking, the
   control heights, the motion, the atmosphere.

   Three decisions that carry over as they are:

   1. Numbers don't go in Cinzel. It's a Roman capital with no real lowercase, so every number
      goes in --font-num, a system sans with tabular figures.
   2. The accent has a single job: what responds to the finger (focus, hover, equipped). The
      figures go in bone, like the game's HUD.
   3. Depth is built downwards (the field sinks, the sheet stays), so all the ink passes AA. */
/* The typefaces travel with the site (assets/fonts/, Google Fonts' Latin subset): opened with a
   double click and offline, it looks the same. Silksong's interface is Trajan Pro and its
   dialogue Perpetua, as Hollow Knight's: Cinzel and Spectral stand in for them here too. Cinzel
   is variable: one file for 400–900. */
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('../assets/fonts/cinzel.woff2') 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: 'Spectral'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('../assets/fonts/spectral-300.woff2') 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: 'Spectral'; font-style: italic; font-weight: 300; font-display: swap;
  src: url('../assets/fonts/spectral-300-italic.woff2') 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: 'Spectral'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../assets/fonts/spectral-400.woff2') 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: 'Spectral'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../assets/fonts/spectral-500.woff2') 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: 'Spectral'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../assets/fonts/spectral-600.woff2') 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: 'Patrick Hand SC'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../assets/fonts/patrick-hand-sc.woff2') 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; }

:root {
  --font-display: 'Cinzel', 'Trajan Pro', Georgia, 'Times New Roman', serif;
  --font-body: 'Spectral', Georgia, 'Times New Roman', serif;
  /* The Hunter's hand, for the Journal's notes, and only there. */
  --font-hand: 'Patrick Hand SC', 'Segoe Print', 'Bradley Hand', cursive;
  /* System sans: zero network bytes, and its figures are already tabular out of the box. */
  --font-num: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
              'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;

  /* Background and surfaces: the main menu's red-cast black. Depth is built downwards. */
  --bg: #0f0604;
  --page-bg: #0f0604;
  --panel: linear-gradient(180deg, #302322 0%, #211817 100%);
  --block: #281d1c;         /* raised surface: blocks and inner panels */
  --card: #150f0f;          /* sunken surface: fields, cells, wells */
  --card-idle: #312422;     /* interactive piece at rest, raised above the block */
  --card-on: #43312f;       /* the same, selected */
  --ctl: #2e2120;
  --well: #0c0908;

  /* Lines */
  --line-panel: #523b39;
  --line: #42302e;
  --line-card: #443130;
  --line-row: #332524;
  --line-ctl: #503a38;
  --well-line: #483432;
  --bracket: #85605d;

  /* Ink. Four steps and each with a job; all pass AA (min. 4.7:1) on the surfaces above. */
  --ink-strong: #fdf9f7;    /* figures and titles */
  --ink: #f8f3f0;           /* body */
  --ink-2: #c6bdb8;         /* secondary */
  --label: #beb5b1;         /* small-caps labels */
  --muted: #ada5a1;         /* notes, captions, supporting text */
  --ink-idle: #cfc5c1;

  /* Accent: bone, interactive things only. See the header. */
  --accent: #f1ebdc;
  --accent-line: #a69d93;
  --accent-ink: #f1ebdc;
  --accent-soft: rgba(241, 235, 220, 0.1);
  --glow: 0 0 22px -8px #f1ebdc;

  /* Round wells for the icons */
  --medal: #261c1b;
  --medal-line: #a67874;
  --medal-off: #1c1414;
  --medal-off-line: #4a3634;
  --medal-off-ink: #aba39f;

  /* HUD, measured on the game's sprites (design/02-silksong.md §2). Bone, not colour: the one
     saturated piece is the Plasmium mask. */
  --mask: #e7d8e0;                        /* SS Mask.png: ivory with the faintest mauve */
  --mask-line: #c3b7c2;                   /* its shaded half */
  --mask-empty: #363335;
  --silk: #ffffff;                        /* Silk.png: pure white, measured */
  --silk-well: #312d2f;                   /* the empty spool's strands */
  --silk-rim: #bab0b1;                    /* its bone rim */
  --plasmium: #1d4879;                    /* the Plasmium (lifeblood) mask */
  --plasmium-line: #57b3ce;
  --hud-frame: #dad1d3;                   /* the Crest wheel's frame: warm bone */

  /* The Crest screen's slots (§3): data, not the accent. One family: S 46–51%, V 92–94%. */
  --slot-red: #eb857d;
  --slot-blue: #76def0;
  --slot-yellow: #f0cc7e;
  --slot-skill: #ffffff;
  --slot-locked: #606060;
  --slot-locked-rim: #dcdcdc;

  /* The screens are scenes from the game: a black field and the Crest screen's warm spotlight
     (#23201d). The --scene-cold* names are kept from the skeleton; the light isn't cold. */
  --scene-bg: #010101;
  --scene-glow: rgba(94, 84, 74, 0.3);
  --scene-glow-low: rgba(94, 84, 74, 0.12);
  --scene-floor: #000;
  --scene-flash: rgba(248, 244, 240, 0.34);    /* the flash when taking a hit */
  --focus-glow: rgba(255, 255, 255, 0.85);     /* a Bind's white glow */
  --area-spot: rgba(236, 236, 236, 0.13);
  --area-spot-off: rgba(236, 236, 236, 0.04);
  --scene-cold: rgba(94, 84, 74, 0.3);
  --scene-cold-off: rgba(94, 84, 74, 0.1);
  --map-faint: 0.45;                           /* the Map's guide view: what the game doesn't draw yet (js/map-paint.js reads it) */
  /* The Map's tone: the drawing as the game's files have it, much dimmer and a little greyer, as
     mapgenie's whole map of Pharloom shows it (measured 3-Oct-2026), so its soft edges and dashes
     hardly show. Not yet checked against the game's own map screen. */
  --map-tone: saturate(0.8) brightness(0.7) contrast(0.95);
  --map-plate: rgba(236, 236, 236, 0.46);      /* the plate behind a mark's picture: --halo-plate's */
  --map-plate-mid: rgba(236, 236, 236, 0.16);
  /* Each area's light (design/02-silksong.md §4, measured on the wiki's area maps): the fill and
     the line the game's map screen draws it in, by the save's area ids (js/collectibles.js
     AREAS). Your game's bench card is lit by its area (js/app-home.js); an area not measured
     (Songclave, the Exhaust Organ, the Red Memory, Wisp Thicket's line) falls back to the
     spotlight's bone. Coral Tower is drawn inside the Sands of Karak. */
  --area-bonebottom-fill: #2d4125; --area-bonebottom-line: #94bf81;   /* Bone Bottom */
  --area-crawl-fill: #2b251c; --area-crawl-line: #988873;   /* Wormways */
  --area-wilds-fill: #262a11; --area-wilds-line: #87924e;   /* Far Fields */
  --area-shellwood-fill: #3a3d2d; --area-shellwood-line: #b6bd9b;   /* Shellwood */
  --area-docks-fill: #4d3213; --area-docks-line: #daa254;   /* Deep Docks */
  --area-weave-prime-fill: #242638; --area-weave-prime-line: #9da0bc;   /* Weavenest Atla */
  --area-bellhart-fill: #634e34; --area-bellhart-line: #fce5b9;   /* Bellhart */
  --area-cogwork-core-fill: #3b3e2f; --area-cogwork-core-line: #aaae90;   /* Cogwork Core */
  --area-shadow-fill: #3d3a16; --area-shadow-line: #e9e7ca;   /* Bilewater */
  --area-slab-fill: #3a3e43; --area-slab-line: #b0b8c2;   /* The Slab */
  --area-mountain-fill: #111b2a; --area-mountain-line: #bac4d2;   /* Mount Fay */
  --area-coral-steps-fill: #3b2f1f; --area-coral-steps-line: #b9a075;   /* Blasted Steps */
  --area-greymoor-fill: #172729; --area-greymoor-line: #6e8f93;   /* Greymoor */
  --area-understore-fill: #242527; --area-understore-line: #7d8087;   /* Underworks */
  --area-grandgate-fill: #4b453a; --area-grandgate-line: #d7ccb5;   /* Grand Gate */
  --area-ward-fill: #474747; --area-ward-line: #cfcfcf;   /* Whiteward */
  --area-hang-fill: #47301c; --area-hang-line: #ca9d6e;   /* High Halls */
  --area-hunters-march-fill: #472119; --area-hunters-march-line: #c47461;   /* Hunter's March */
  --area-halls-fill: #554e30; --area-halls-line: #f0e5ab;   /* Choral Chambers */
  --area-library-fill: #5d411d; --area-library-line: #e9b96f;   /* Whispering Vaults */
  --area-arborium-fill: #4e493f; --area-arborium-line: #e4daca;   /* Memorium */
  --area-coral-river-fill: #583038; --area-coral-river-line: #f1a1b4;   /* Sands of Karak */
  --area-coral-tower-fill: #583038; --area-coral-tower-line: #f1a1b4;   /* Sands of Karak */
  --area-boneforest-fill: #4a4a4a; --area-boneforest-line: #d8d8d8;   /* The Marrow */
  --area-aqueducts-fill: #1d2d35; --area-aqueducts-line: #729bad;   /* Putrified Ducts */
  --area-dustpens-fill: #30251d; --area-dustpens-line: #b08772;   /* Sinner's Road */
  --area-cradle-fill: #242537; --area-cradle-line: #8183ae;   /* The Cradle */
  --area-abyss-fill: #202020; --area-abyss-line: #bdbdbd;   /* The Abyss */
  --area-mosscave-fill: #2d4125; --area-mosscave-line: #a9cb99;   /* Moss Grotto */
  --area-mosstown-fill: #2b4124; --area-mosstown-line: #92bd7f;   /* Mosslands */
  --area-grove-fill: #163420; --area-grove-line: #5fa879;   /* Verdania */
  --area-mistmaze-fill: #494949; --area-mistmaze-line: #9d9d9d;   /* The Mist */
  --area-wisp-fill: #132f1b;   /* Wisp Thicket */

  /* Traffic light for the deltas and conditional notices */
  --good: #7fc7a0;
  --good-soft: rgba(127, 199, 160, 0.14);
  --bad: #e2705f;
  --bad-soft: rgba(226, 112, 95, 0.14);
  --cond: #ccbe9c;
  --notice-bg: #1a1312;
  --notice-line: #3b3422;

  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 18px 54px rgba(0, 0, 0, 0.62);

  /* Typography: seven steps and two scaled ones. No half pixels on purpose. */
  --fs-2xs: 11px;     /* small-caps labels, units, badges */
  --fs-xs: 13px;      /* dense cells, notes under a figure */
  --fs-sm: 14px;      /* secondary interface */
  --fs-md: 16px;      /* body ← base */
  --fs-lg: 18px;      /* prose, lead paragraph */
  --fs-xl: 24px;      /* block titles, medium figures */
  --fs-2xl: 34px;     /* large figures */
  --fs-brand: clamp(1.5rem, 1rem + 1.2vw, 2.125rem);     /* 24 → 34 px: the title, in the one-row header */
  --fs-hero: clamp(3.5rem, 2.2rem + 4vw, 5.5rem);        /* 56 → 88 px */

  /* Spacing: eight steps, deliberately non-linear. */
  --sp-half: 2px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* Tracking: one step per use, not per element. Figures go at 0. */
  --track-title: 0.04em;
  --track-label: 0.08em;
  --track-caps: 0.12em;
  --track-wide: 0.2em;

  /* Control heights: two with a mouse, and both at 44 px with a finger. */
  --ctl-sm: 32px;
  --ctl: 40px;

  /* The drawn interface icons: 12 px inside text, 16 px alone in a button, one stroke. */
  --icon-sm: 12px;
  --icon: 16px;
  --icon-stroke: 1.6px;
  --diamond: 5px;           /* the game's small hollow diamond, in front of a tag or a notice's tag */

  /* Motion: ~250 ms to respond to the finger, ~400 ms for a fade, no bounce. */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 250ms;
  --dur-slow: 400ms;
  --ease-fade: cubic-bezier(0.45, 0, 0.55, 1);
  /* The Hornet who walks the page (js/app-hornet.js, css: .hn): a frame of her run (the game's
     Run clip plays at 15 a second; 12 here, slowed with her pace so her feet keep the ground),
     how long 100 px take her running along the bar (the sibling Knight's pace), and her cell's
     height on the screen bar and on the Map (the strips are 120 × 120 cells,
     tools/extract-hornet.py). */
  --dur-step: 84ms;
  --dur-run: 500ms;
  --hn-bar: 28px;      /* sitting under a tab's title without touching its letters */
  --hn-map: 44px;      /* at her bench on the Map, as big as the old still */
  --hm-map-max: 340px; /* the tallest the area's map gets beside the bench card in Your game */
  --hn-rest: 0.5;      /* resting on her bench in Your game's card: the wiki's sprites at half (her 186 px → 93) */
  --hm-art: 36px;      /* a picture in Your game's lists, as Progress's rows (css: .hm-art) */

  --page-max: 1216px;
  --page-pad: var(--sp-8);
  /* What the screen bar stuck at the top takes up. */
  --sticky-h: 64px;
  --measure: 68ch;    /* maximum measure for long prose */
  --column: 720px;    /* a single column of lists: Your game's categories, its changes, the road */


  /* The screens are the game's inventory: almost pure black, and the light behind a plate is
     white and only where you look. */
  --inv-bg: var(--scene-bg);
  --inv-line: #362726;
  --halo-plate: radial-gradient(closest-side, rgba(236, 236, 236, 0.2), rgba(236, 236, 236, 0.06) 58%, transparent);
  --halo-plate-off: radial-gradient(closest-side, rgba(128, 128, 128, 0.2), transparent 78%);
  --mote: rgba(241, 139, 69, 0.8);     /* the main menu's embers (#f18b45) */

  /* ── Atmosphere and the section's lights ───────────────────────────────
     The whole page is the main menu: its red light from below, a vignette on the four edges,
     embers across the window, and a grain so faint it's felt rather than seen. All three fixed to the window and
     BEHIND the content (css/app.css, .atmos). The grain is an inline SVG: over file:// nothing
     is fetched. */
  --vignette: radial-gradient(ellipse 75% 70% at 50% 45%, transparent 55%, rgba(15, 6, 4, 0.55) 85%, rgba(15, 6, 4, 0.9) 100%);
  /* The main menu's red light, rising from the bottom centre of the window. The game's reaches
     #93342f at the edge; the page stops at #5b2424 (the options menu at 85% of its height) so
     that --muted still reads 5:1 on it. */
  --ember-glow: radial-gradient(ellipse 80% 85% at 50% 100%, #5b2424 0%, #3d1716 32%, #260f0c 62%, transparent 100%);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-opacity: 0.025;
  /* The frame of every screen: the pause menu's white filigree (#f6f6f6, measured on its
     screenshots), and its light, the warm bone of the Crest screen's spotlight. The same for
     every section, and the titles are the filigree's too (css/app.css). The shares below say
     how much of each goes into the brackets, the glows and the plates' halo. */
  --filigree: #f6f6f6;
  --spotlight: #f1ebdc;
  --lamp-line: 78%;
  --lamp-glow: 20%;
  --lamp-glow-low: 8%;
  --lamp-plate: 24%;
  --lamp-plate-edge: 7%;
  /* The frame's own pieces (design/03-redesign.md, step 1): the thin filigree line inset all
     round, its share of the filigree, and the curled corner that crowns each end. */
  --lamp-frame: 24%;
  --frame-inset: var(--sp-2);
  --frame-corner: var(--sp-12);
  --dur-flash: 900ms;                   /* the glow of a figure that just changed */
  --dur-delta: 4s;                      /* how long your last change's chip stays in view */
  /* What's touched on that black goes unboxed: on hover, a veil of ink; the chosen one, a
     veil of the accent with its rule (--accent-line). */
  --veil: color-mix(in oklab, var(--ink) 5%, transparent);
  --picked: color-mix(in oklab, var(--accent) 8%, transparent);

  /* What you don't have yet, everywhere: colourless and half-lit. */
  --missing-art: grayscale(1) brightness(0.4);
  /* The Map's round badge (design/13-map-symbols-variants.html, C): the dark disc under a piece's
     picture, as the game's own pin_flea and pin_bench, and the black that sets it off the map. */
  --badge: radial-gradient(circle at 50% 40%, #2a2322, #0b0909);
  --badge-shadow: #000;
  /* The Inventory's, lighter so the shape still reads (design/08-missing-variants.html): with it
     half opacity, and the diamond pip under each picture says had or missing outright. */
  --missing-soft: grayscale(1) brightness(0.6);
  --missing-soft-opacity: 0.55;
  /* The Journal's kill ring (design/15-journal-variants.html, A): the kills as an arc of the
     silk's white round each portrait, over a faint track of its rim; the mask keeps the ring's
     width (--ring) and cuts out the middle. Not seen: the portrait in shadow (they're drawn on a dark
     disc, so a flat silhouette would be a blank disc). */
  --ring: 3px;
  --ring-track: color-mix(in oklab, var(--silk-rim) 18%, transparent);
  --ring-mask: #000;
  --unseen-art: grayscale(1) brightness(0.32);
  /* The light the Journal's pane sets each drawing on (light_effect_v02 at 0.81 grey, measured
     in its files): a soft white disc fading to nothing. */
  /* The Crest screen's Crest: px to the game's unit (its art is 100 px to the unit, 4.3 to 6.1
     units wide), smaller on a phone. */
  --crest-k: 64px;
  --crest-k-sm: 48px;
  /* Progress's completion ring (design/20-progress-total-variants.html, A); smaller on a phone. */
  --pg-ring: 220px;
  /* Its two tabs' pictures, the rings of what's left for the next Act and their medallions
     (design/27b-progress-variants.html, 1 D and 2 C); smaller on a phone. */
  --pg-tab-art: 56px;
  --pg-rg-ring: 128px;
  --pg-md: 60px;
  /* Each tab's light (design/03-redesign.md, step 1, third round, E): the colour of its place in
     the game, from the area tokens, for its frame, corners, plaque and the light from its top.
     Your game and Saves keep the main menu's red. */
  --tab-home: #b0463b;
  --tab-game: color-mix(in oklab, var(--area-library-line) 55%, var(--area-library-fill));
  --tab-progress: color-mix(in oklab, var(--area-bonebottom-line) 55%, var(--area-bonebottom-fill));
  --tab-map: color-mix(in oklab, var(--area-greymoor-line) 55%, var(--area-greymoor-fill));
  --tab-journal: color-mix(in oklab, var(--area-mountain-line) 55%, var(--area-mountain-fill));
  --tab-tools: color-mix(in oklab, var(--area-bellhart-line) 55%, var(--area-bellhart-fill));
  --tab-fight: color-mix(in oklab, var(--area-docks-line) 55%, var(--area-docks-fill));
  --tab-light: 38%;     /* the light from the top, inside */
  --tab-frame: 70%;     /* the frame line and its corners */
  /* The static pages' art, at the top of their block (tools/pages.js). */
  --about-art: 340px;
  --journal-light: radial-gradient(closest-side, color-mix(in oklab, var(--silk) 20%, transparent), color-mix(in oklab, var(--silk) 6%, transparent) 55%, transparent);

  color-scheme: dark;
}
@media (pointer: coarse) {
  :root { --ctl-sm: 44px; --ctl: 44px; }
}