/* masugami — visual design system v1
   Look & feel ONLY: color, type, paper, marks, creases, controls.
   Does NOT change game behavior — keep your existing fold preview and interactions.
   Import once at app root: @import "./masugami-theme.css";

   THEMES. A theme is a *material*; blocks below are keyed by [data-theme="…"], plus
   [data-appearance="light"|"dark"]. The web settings controller sets both resolved
   attributes on the root; "auto" remains the saved preference and resolves through the
   browser's prefers-color-scheme media query.

   THREE MATERIALS (HOW_TO_PLAY_WORK_ORDER §5, Vince 2026-09-06):
     washi  — default; sumi ink as a soft brush dab on fibrous handmade paper
     ai     — pale indigo pooled on deep indigo-dyed paper, yamabuki accent (2026-10-08)
     kasure — dry ink on cool paper, with verdigris surroundings and indigo type
   Every material carries ink, and ink is always a *mark*. The relief material is gone with
   no alias: no player was ever on the platform, and both platforms fall back to the default
   theme for an unknown stored id. Relief drawing survives only for Smooth's bump/dent cells.
   The mark silhouettes themselves live in masugami-marks.css + masugami-paper.js.

   THIS FILE IS THE ONLY PLACE A COLOUR IS WRITTEN AS A LITERAL (DESIGN_POLISH_WORK_ORDER.md
   L2w), and the home of every shared size, duration and shadow token. Every other stylesheet —
   masugami-player.css (the player page), masugami-marks.css, masugami-howto.css,
   masugami-navigation.css, masugami-legal.css and site/static — spends these tokens;
   scripts/theme-tokens.test.mjs fails on a colour literal elsewhere and on a material whose
   token set differs from the others. Off-scale sizes and spacing still written in those files
   are Phase 3's to lay out. Three kinds of block:
     :root                                   shared rhythm, scales, type, motion, chrome
     [data-theme] [data-appearance]          the six palettes (XOPalette's mirror)
     [data-theme] vocabulary                 the component tokens a material derives from
                                             its palette (paper light, relief, crease…),
                                             scoped to html: the landing mounts demo
                                             wrappers that carry their own data-theme
   The Swift mirror of the palettes is Packages/XODesign (XOPalette); XOPaletteTests fails if
   a palette value here drifts from the Swift table. */

/* ============================================================
   Shared — independent of material and appearance
   ============================================================ */
:root {
  /* ---------- Page rhythm ----------
     Section gaps, heading-to-content gaps and heading rules use these tokens on every screen
     width; consumers should not add section-specific spacing overrides. */
  --ms-section-space: clamp(48px, 6vw, 64px);
  --ms-section-content-space: clamp(32px, 4vw, 48px);
  --ms-section-heading-space: 14px;

  /* ---------- Spacing scale (4px base) ----------
     Phase 3 lays screens out on this scale; today only the values that already sit on it are
     spent through it, so nothing moves. */
  --ms-space-1: 4px;
  --ms-space-2: 8px;
  --ms-space-3: 12px;
  --ms-space-4: 16px;
  --ms-space-5: 20px;
  --ms-space-6: 24px;
  --ms-space-7: 32px;
  --ms-space-8: 48px;

  /* ---------- Geometry ---------- */
  --ms-gutter: 26px;                /* .wrap side padding; XOMetrics.gutter */
  --ms-cell: 42px;                  /* XOMetrics cell */
  --ms-tile-size: 34px;             /* XOMetrics tile */
  --ms-hit-min: 46px;               /* XOMetrics.hitMinimum */
  --ms-crease-width: 2px;
  --ms-crease-hit: 26px;
  --ms-radius-pip: 50%;             /* the pip strip's circles, the design law's one exemption */
  --ms-focus-width: 2px;            /* the keyboard focus ring every control draws */
  --ms-focus-offset: 3px;
  --ms-award-size: 64px;            /* the Folded Washi award on the cleared sheet; XOPaperIcon size 64 */

  /* ---------- Type ----------
     Two bundled OFL faces (masugami-player.css declares the @font-face rules). One fallback
     chain per face on every material. */
  --ms-font-display: "Shippori Mincho", Georgia, "Times New Roman", serif;   /* 400/500 */
  --ms-font-ui: "Zen Kaku Gothic New", system-ui, -apple-system, "Segoe UI", sans-serif;  /* 300/400 */
  --ms-wordmark: 400 27px/1 var(--ms-font-display);   /* letter-spacing --ms-track-wordmark, lowercase */
  /* The sizes the pages set today, named by role. Thirteen steps is the inventory, not a
     scale; Phase 3 (D2–D4) collapses it. Weights and line-heights stay with the rules. */
  --ms-size-micro: 12px;            /* the micro register, its two places: the pip caption and the level descriptor; 12px regular as XOTypography.micro */
  --ms-size-chip: 10.5px;           /* tabs, mode chips, buttons */
  --ms-size-footnote: 12px;         /* legal lines, theme captions, legend operators */
  --ms-size-caption: 12.5px;        /* the three laws */
  --ms-size-small: 13px;            /* quiet result actions, playback guidance */
  --ms-size-text: 13.5px;           /* lesson paragraphs, pitch copy */
  --ms-size-body: 14.5px;           /* tagline, hint, mode blurb, result line */
  --ms-size-cell: 15px;             /* relief numerals; theme names; pitch headings */
  --ms-size-input: 16px;            /* the email field (never smaller: iOS zooms) */
  --ms-size-title: 17px;            /* the status title; the account identity */
  --ms-size-h2: 20px;               /* playback title */
  --ms-size-wordmark: 27px;
  --ms-track-micro: 2.4px;          /* section labels, tabs, status eyebrow */
  --ms-track-chip: 2.2px;           /* chips, buttons, counters */
  --ms-track-wordmark: 2.5px;

  /* ---------- Motion ---------- */
  --ms-ease: cubic-bezier(0.25, 0.7, 0, 1);
  --ms-ease-pop: cubic-bezier(0.2, 1.4, 0.4, 1);   /* an overshooting arrival; iOS spends it (XOMotion.easePop) */
  --ms-dur-sheet: 460ms;            /* sheet resize after a fold (read by the player and the how-to) */
  --ms-dur-hover: 0.14s;            /* control hover and chrome transitions; the auth panel's 140ms */
  --ms-dur-crease: 0.12s;           /* crease arm/disarm */
  --ms-dur-cell: 0.15s;             /* cell background */
  --ms-dur-exposed: 0.22s;          /* the ground revealed under a lifted flap */
  --ms-dur-land: 0.3s;              /* a tile landing */
  --ms-dur-cue: 0.45s;              /* the armed-crease pulse */
  --ms-dur-pop: 0.35s;              /* the result arriving; the web dialog no longer animates, iOS fades over it (XOMotion.pop) */
  --ms-dur-flash: 0.55s;            /* poof and worsening flashes */
  --ms-dur-confetti: 0.95s;

  /* ---------- Chrome that is the same on every material ----------
     These were literals in the page. Material-neutral by design; a Phase 3 slice that wants
     one to follow the material moves it into the palette blocks. The result's veil follows
     the room by construction: it is the room's own colour, so the words beneath the sheet stay
     ink on the room in every material and appearance (W4, D6). */
  --ms-scrim: color-mix(in srgb, var(--ms-bg) 90%, transparent);   /* the result's veil, cut away over the sheet */
  --ms-scrim-soft: rgba(11,11,11,0.55);     /* milestones dialog backdrop */
  --ms-btn-primary-hover: #ffffff;
  --ms-edge-shadow: 0 0 4px rgba(0,0,0,0.22), 0 0 1px rgba(255,255,255,0.7);   /* paper thickness */
  --ms-fold-shadow: radial-gradient(ellipse at center, rgba(0,0,0,0.72), rgba(0,0,0,0) 72%);
  /* The worsening flash ring and the legend's dents: a neutral shade, never a hue. */
  --ms-worse-rgb: 24,22,20;
  /* Smooth's relief vocabulary, drawn only for archived bump/dent cells. */
  --ms-relief-ink: rgba(52,49,45,0.82);
  --ms-relief-face: #fcfbf9;
  --ms-dent-ink: rgba(244,242,238,0.8);
  --ms-dent-wash: linear-gradient(126deg, rgba(28,26,24,0.22) 0%, rgba(28,26,24,0.05) 62%, rgba(255,255,255,0.12) 100%);
  --ms-legend-hole: radial-gradient(circle at 34% 28%, rgba(0,0,0,0.3), rgba(0,0,0,0.86) 72%), #0f0e0d;
  --ms-legend-hole-shadow: inset 0 2px 5px rgba(0,0,0,0.7), 0 0.5px 0 rgba(255,255,255,0.4);
}

/* ============================================================
   kasure — dry ink on cool paper, verdigris surroundings
   The dark face is the base block; the light face overrides what differs.
   ============================================================ */
[data-theme="kasure"] {
  /* ---------- Ground ---------- */
  --ms-bg: #142F34;                 /* app background, deep teal (the verdigris room) */
  --ms-bg-deep: #0D2328;
  --ms-bg-glow: none;
  --ms-site-ground: #142F34;        /* masugami.com ground; the static pages pin kasure light */
  --ms-site-grain-opacity: 0.05;

  /* ---------- Paper ---------- */
  --ms-paper: #DDE6DF;              /* the sheet, cool pale paper */
  --ms-paper-flap: #C7DAD2;         /* the lifted flap, one step darker */
  --ms-paper-edge: #EDF4EE;
  --ms-paper-light: linear-gradient(126deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 42%);
  --ms-paper-shade: linear-gradient(126deg, rgba(0,0,0,0) 58%, rgba(36,59,80,0.16) 100%);
  --ms-paper-lift: 0 2px 3px rgba(0,0,0,0.6), 0 16px 30px rgba(0,0,0,0.6),
                   0 40px 70px rgba(0,0,0,0.45);
  --ms-paper-cut-shadow: drop-shadow(0 2px 2px rgba(0,0,0,.58))
                         drop-shadow(0 16px 24px rgba(0,0,0,.48));
  --ms-board-frame: 1px solid rgba(54,92,96,0.24);  /* hairline of the sheet's full extent */

  /* ---------- Ink (the mark) ----------
     Same three ramp stops the ai and washi blocks publish, in the same order: the dry
     brush is muted pine green, distinct from washi's charcoal. --ms-cell-line is the pencil grid
     ruled inside each cell; --ms-ink-soak is zero because a dry stroke has no halo. */
  --ms-tile-1: #293D3A;
  --ms-tile-2: #1B2D2A;
  --ms-tile-3: #11201E;
  --ms-tile-ghost: rgba(41,61,58,0.16);
  --ms-cell-line: rgba(54,92,96,0.24);
  --ms-ink-soak: rgba(0,0,0,0);
  --ms-groove-light: rgba(255,255,255,0.5);

  /* ---------- Tile (Smooth's relief square) ---------- */
  --ms-tile: linear-gradient(126deg, #ffffff 0%, #fbfaf7 46%, #eeebe5 100%);
  --ms-tile-relief: 0 0.5px 0 rgba(255,255,255,0.9),
                    1px 2px 2px rgba(24,22,20,0.32),
                    3px 6px 9px rgba(24,22,20,0.30),
                    7px 12px 20px rgba(24,22,20,0.22);
  --ms-tile-relief-2: 0 0.5px 0 rgba(255,255,255,0.95),
                      2px 3px 3px rgba(24,22,20,0.36),
                      5px 9px 14px rgba(24,22,20,0.34),
                      11px 18px 28px rgba(24,22,20,0.26);
  --ms-tile-relief-flap: 1px 2px 3px rgba(24,22,20,0.35),
                         4px 7px 12px rgba(24,22,20,0.28);
  --ms-tile-radius: 0;              /* square corners — no rounding */

  /* tile shown flat / pending move */
  --ms-tile-flat: rgba(255,255,255,0.30);
  --ms-tile-flat-shadow: inset 0 0 0 0.5px rgba(70,66,62,0.28),
                         inset 1px 1px 3px rgba(40,36,32,0.18);
  /* tile pressed flat by the fold (cancelling pair) */
  --ms-tile-cancel: rgba(214,208,200,0.6);
  --ms-tile-cancel-shadow: inset 0 0 0 1.5px rgba(224,80,58,0.9),
                           inset 2px 2px 5px rgba(40,36,32,0.25);
  /* tile the fold would make worse */
  --ms-tile-worse: rgba(186,180,171,0.85);
  --ms-tile-worse-shadow: inset 0 0 0 1px rgba(40,36,32,0.55),
                          inset 0 0 0 3px rgba(40,36,32,0.16),
                          inset 2px 3px 7px rgba(24,22,20,0.42);
  /* Smooth's dents */
  --ms-dent: #c4bfb5;
  --ms-dent-2: #b1aca1;
  --ms-dent-shadow: inset 2px 3px 6px rgba(24,22,20,0.45),
                    inset -1px -1px 2px rgba(255,255,255,0.42);
  --ms-dent-shadow-2: inset 3px 5px 10px rgba(24,22,20,0.6),
                      inset -1px -1px 2px rgba(255,255,255,0.32);

  /* ---------- Crease ---------- */
  --ms-crease: linear-gradient(90deg, rgba(36,59,80,0.10) 0%, rgba(255,255,255,0.5) 100%);
  --ms-crease-folded: linear-gradient(90deg, rgba(36,59,80,0.30) 0%, rgba(255,255,255,0.95) 100%);
  --ms-crease-h: linear-gradient(180deg, rgba(36,59,80,0.10) 0%, rgba(255,255,255,0.5) 100%);
  --ms-crease-h-folded: linear-gradient(180deg, rgba(36,59,80,0.30) 0%, rgba(255,255,255,0.95) 100%);
  /* The folded crease dark stop on its own, for the marks that stroke with it
     (masugami-marks.css .will-worse). Every material publishes it. */
  --ms-crease-dark: rgba(36,59,80,0.3);

  /* ---------- Accent (used sparingly) ---------- */
  --ms-accent: #E0503A;             /* active crease, cancelling pair. Nothing else. */
  --ms-accent-soft: rgba(224,80,58,0.9);

  /* ---------- Text ---------- */
  --ms-text: #E4F0ED;
  --ms-text-bright: #F2F8F4;
  --ms-text-soft: rgba(228,240,237,0.92);
  --ms-text-faint: rgba(228,240,237,0.13);
  --ms-text-2: rgba(228,240,237,0.85);
  --ms-text-3: rgba(228,240,237,0.92);   /* status line */
  --ms-text-4: rgba(228,240,237,0.78);   /* micro caps — do not go lower */
  --ms-rule: 1px solid rgba(170,203,199,0.32);
  --ms-card-line: rgba(170,203,199,0.32);

  /* ---------- Controls ---------- */
  --ms-btn-stroke: 1px solid rgba(170,203,199,0.32);
  --ms-btn-stroke-hover: rgba(228,240,237,0.6);
  --ms-btn-fill-hover: rgba(228,240,237,0.06);
  --ms-btn-primary-bg: #E4F0ED;
  --ms-btn-primary-text: #142F34;

  /* ---------- Decoration, awards, surfaces ---------- */
  --ms-gold: #E4F0ED;
  --ms-gold-glow: rgba(228,240,237,0.3);
  --ms-warn: #F2F8F4;
  --ms-warn-glow: rgba(242,248,244,0.3);
  --ms-card: #1E3C42;
  --ms-shadow: rgba(0,0,0,0.6);
  --ms-mat: #0D2328;
  --ms-indigo-wash: #93A2F2;
  --ms-ornament-gold: #C8AB61;
  --ms-ornament-plum: #D0A0BB;
}

/* ---------- kasure · light — verdigris surroundings, cool paper ---------- */
[data-theme="kasure"][data-appearance="light"] {
  /* ---------- masugami.com ground (the light splash room) ---------- */
  --ms-site-ground: linear-gradient(169deg, #fcfaf5 0%, #f8f4ec 100%);
  --ms-site-grain-opacity: 0.05;
  --ms-bg: #D3DFDA;
  --ms-bg-deep: #C0CFC7;
  --ms-bg-glow: none;
  --ms-paper: #F0F2EE;
  --ms-paper-flap: #DDE6DF;
  --ms-tile-1: #293D3A;
  --ms-tile-2: #1B2D2A;
  --ms-tile-3: #11201E;
  --ms-tile-ghost: rgba(41,61,58,0.14);
  --ms-cell-line: rgba(54,92,96,0.2);
  --ms-paper-light: linear-gradient(126deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 50%);
  --ms-paper-shade: linear-gradient(126deg, rgba(36,59,80,0) 58%, rgba(36,59,80,0.10) 100%);
  --ms-paper-lift: 0 1px 2px rgba(36,59,80,0.35), 0 12px 26px rgba(36,59,80,0.30),
                   0 30px 50px rgba(36,59,80,0.18);
  --ms-paper-cut-shadow: drop-shadow(0 2px 2px rgba(36,59,80,.22))
                         drop-shadow(0 14px 22px rgba(36,59,80,.18));
  --ms-board-frame: 1px solid rgba(54,92,96,0.2);
  --ms-tile-relief: 0 0.5px 0 rgba(255,255,255,1),
                    1px 2px 2px rgba(74,64,52,0.28),
                    3px 6px 9px rgba(74,64,52,0.24),
                    7px 12px 20px rgba(74,64,52,0.16);
  --ms-tile-relief-2: 0 0.5px 0 rgba(255,255,255,1),
                      1px 2px 2px rgba(74,64,52,0.32),
                      4px 8px 14px rgba(74,64,52,0.28),
                      9px 16px 26px rgba(74,64,52,0.18);
  --ms-tile-flat: rgba(255,255,255,0.55);
  --ms-tile-flat-shadow: inset 0 0 0 0.5px rgba(90,80,68,0.3),
                         inset 1px 1px 3px rgba(60,52,42,0.14);
  --ms-tile-cancel: rgba(222,216,206,0.8);
  --ms-tile-cancel-shadow: inset 0 0 0 1.5px rgba(224,80,58,0.9),
                           inset 2px 2px 5px rgba(60,52,42,0.2);
  --ms-tile-worse: rgba(198,192,182,0.9);
  --ms-tile-worse-shadow: inset 0 0 0 1px rgba(60,52,42,0.5),
                          inset 2px 2px 5px rgba(60,52,42,0.22);
  --ms-crease: linear-gradient(90deg, rgba(36,59,80,0.16) 0%, rgba(255,255,255,0.85) 100%);
  --ms-crease-folded: linear-gradient(90deg, rgba(36,59,80,0.34) 0%, #ffffff 100%);
  --ms-crease-h: linear-gradient(180deg, rgba(36,59,80,0.16) 0%, rgba(255,255,255,0.85) 100%);
  --ms-crease-h-folded: linear-gradient(180deg, rgba(36,59,80,0.34) 0%, #ffffff 100%);
  --ms-crease-dark: rgba(36,59,80,0.34);
  --ms-text: #243B50;
  --ms-text-bright: #1B3245;
  --ms-text-2: rgba(36,59,80,0.85);
  --ms-text-3: rgba(36,59,80,0.92);
  --ms-text-4: rgba(36,59,80,0.78);
  --ms-rule: 1px solid rgba(54,92,96,0.35);
  --ms-btn-stroke: 1px solid rgba(54,92,96,0.35);
  --ms-btn-stroke-hover: rgba(36,59,80,0.6);
  --ms-btn-fill-hover: rgba(36,59,80,0.06);
  --ms-btn-primary-bg: #243B50;
  --ms-btn-primary-text: #D3DFDA;
  --ms-card: #F0F2EE;
  --ms-paper-edge: #F7FAF7;
  --ms-groove-light: rgba(255,255,255,0.85);
  --ms-ink-soak: rgba(36,59,80,0);
  --ms-indigo-wash: #4353B8;
  /* dent base #ccc7bb (the sheet darkened); hole/mat opening #b6b0a4 — derived from
     --ms-paper by the renderer, per the handoff's comment lines. */
  --ms-text-soft: rgba(36,59,80,0.92);
  --ms-text-faint: rgba(36,59,80,0.14);
  --ms-card-line: rgba(54,92,96,0.35);
  --ms-accent: #E0503A;
  --ms-accent-soft: rgba(224,80,58,0.9);
  --ms-gold: #243B50;
  --ms-gold-glow: rgba(36,59,80,0.3);
  --ms-warn: #1B3245;
  --ms-warn-glow: rgba(27,50,69,0.3);
  --ms-shadow: rgba(36,59,80,0.22);
  --ms-mat: #A4BFBA;
  --ms-ornament-gold: #A47D29;
  --ms-ornament-plum: #75445F;
}

/* ============================================================
   Palette mirror — ai and washi
   The blocks below are the color-token mirror held to XOPaletteTests-style discipline:
   the same token names in the same order, values pinned literal-for-literal against
   Packages/XODesign (XOPalette.aiLight / .aiDark / .sumi / .hiru, and kasure's pair above,
   which keeps the plain names .light / .dark it inherited from the relief material it
   replaced — they are also the fallback pair XOPalette.resolved(for:) hands out). The web
   player derives its component-level paper, cell and control tokens from these literal
   palettes in the vocabulary block that follows; change a value here and you change it in
   the Swift table, or the tests fail. The exact values set on 2026-09-06 are listed for the
   Swift mirror in docs/handoff/evidence/theme-tokens-2026-09-06.md; ai's were replaced on
   2026-10-08 (docs/decision-log.md).
   ============================================================ */

/* ai — *katazome* / *konshi*: pale indigo pooled on deep indigo-dyed paper, one yamabuki
   accent (decision log 2026-10-08). The sheet and the pool are the same in both faces; only the
   room changes. gold/warn are text and their glows are the accent and a neutral halo, so no
   preview spends a second hue. */
[data-theme="ai"][data-appearance="light"] {
  --ms-bg: #dee2ee;
  --ms-bg-deep: #cdd3e2;
  --ms-paper: #192f60;
  --ms-paper-flap: #192f60;
  /* the pool, pale on the dyed sheet: it brightens where it thins at the fringe. */
  --ms-tile-1: #c9d1f7;
  --ms-tile-2: #e4e9ff;
  --ms-tile-3: #f4f6ff;
  --ms-tile-ghost: rgba(201,209,247,0.30);
  --ms-text: #1b2547;
  --ms-text-bright: #10162f;
  --ms-text-soft: #4b5573;
  --ms-text-faint: rgba(27,37,71,0.1);
  --ms-cell-line: rgba(27,37,71,0.18);
  --ms-card-line: rgba(27,37,71,0.12);
  --ms-crease-dark: rgba(236,232,220,0.32);
  --ms-accent: #f8b500;
  --ms-accent-soft: rgba(248,181,0,0.16);
  --ms-gold: #1b2547;
  --ms-gold-glow: rgba(248,181,0,0.55);
  --ms-warn: #10162f;
  --ms-warn-glow: rgba(27,37,71,0.3);
  --ms-card: #ebeef5;
  --ms-shadow: rgba(10,16,40,0.22);
  --ms-mat: #a3adc6;
  --ms-paper-edge: #192f60;
  --ms-groove-light: rgba(236,232,220,0.32);
  --ms-ink-soak: rgba(201,209,247,0.26);   /* the pool soaks deeper than a dab */
  --ms-indigo-wash: #4353b8;
}

[data-theme="ai"][data-appearance="dark"] {
  --ms-bg: #0e1122;
  --ms-bg-deep: #080a16;
  --ms-paper: #192f60;
  --ms-paper-flap: #192f60;
  /* the same pale pool on the same dyed sheet; the night room is the only change. */
  --ms-tile-1: #c9d1f7;
  --ms-tile-2: #e4e9ff;
  --ms-tile-3: #f4f6ff;
  --ms-tile-ghost: rgba(201,209,247,0.30);
  --ms-text: #ece8dc;
  --ms-text-bright: #fffdf4;
  --ms-text-soft: #9ea6c0;
  --ms-text-faint: rgba(236,232,220,0.08);
  --ms-cell-line: rgba(236,232,220,0.16);
  --ms-card-line: rgba(236,232,220,0.1);
  --ms-crease-dark: rgba(236,232,220,0.32);
  --ms-accent: #f8b500;
  --ms-accent-soft: rgba(248,181,0,0.16);
  --ms-gold: #ece8dc;
  --ms-gold-glow: rgba(248,181,0,0.55);
  --ms-warn: #fffdf4;
  --ms-warn-glow: rgba(236,232,220,0.3);
  --ms-card: #161a30;
  --ms-shadow: rgba(0,0,0,0.5);
  --ms-mat: #05060d;
  --ms-paper-edge: #192f60;
  --ms-groove-light: rgba(236,232,220,0.32);
  --ms-ink-soak: rgba(201,209,247,0.30);   /* the pool soaks deeper than a dab */
  --ms-indigo-wash: #93a2f2;
}

/* washi light face — *hiru* (daylight): sumi ink on sun-warmed paper. */
[data-theme="washi"][data-appearance="light"] {
  --ms-bg: #eee8dc;
  --ms-bg-deep: #e1d8c9;
  --ms-paper: #f6f0e2;
  --ms-paper-flap: #eae2cf;
  --ms-tile-1: #2b241c;
  --ms-tile-2: #171209;
  --ms-tile-3: #0f0b05;
  --ms-tile-ghost: rgba(23,18,9,0.1);
  --ms-text: #2b241c;
  --ms-text-bright: #171209;
  --ms-text-soft: rgba(43,36,28,0.80);
  --ms-text-faint: rgba(43,36,28,0.1);
  --ms-cell-line: rgba(43,36,28,0.22);
  --ms-card-line: rgba(43,36,28,0.18);
  --ms-crease-dark: rgba(60,46,32,0.16);
  --ms-accent: #d64a33;
  --ms-accent-soft: rgba(214,74,51,0.55);
  --ms-gold: #2b241c;
  --ms-gold-glow: rgba(43,36,28,0.3);
  --ms-warn: #171209;
  --ms-warn-glow: rgba(23,18,9,0.3);
  --ms-card: #f7f1e5;
  --ms-shadow: rgba(60,46,32,0.4);
  --ms-mat: #8f8272;
  --ms-paper-edge: #fbf6ea;
  --ms-groove-light: rgba(255,255,255,0.7);
  --ms-ink-soak: rgba(30,20,10,0.3);
  --ms-indigo-wash: #4353b8;
}

/* washi dark face — *sumi* (ink): pale sheet lit against a near-black ground. */
[data-theme="washi"][data-appearance="dark"] {
  --ms-bg: #12100e;
  --ms-bg-deep: #0c0a08;
  --ms-paper: #e8e3d7;
  --ms-paper-flap: #dcd5c6;
  --ms-tile-1: #2b2620;
  --ms-tile-2: #17120d;
  --ms-tile-3: #100c08;
  --ms-tile-ghost: rgba(23,18,13,0.1);
  --ms-text: #f4f2ee;
  --ms-text-bright: #fbfaf8;
  --ms-text-soft: rgba(244,242,238,0.62);
  --ms-text-faint: rgba(244,242,238,0.1);
  --ms-cell-line: rgba(244,242,238,0.14);
  --ms-card-line: rgba(244,242,238,0.18);
  --ms-crease-dark: rgba(28,26,24,0.14);
  --ms-accent: #d64a33;
  --ms-accent-soft: rgba(214,74,51,0.55);
  --ms-gold: #f4f2ee;
  --ms-gold-glow: rgba(244,242,238,0.3);
  --ms-warn: #fbfaf8;
  --ms-warn-glow: rgba(251,250,248,0.3);
  --ms-card: #1b1815;
  --ms-shadow: rgba(0,0,0,0.55);
  --ms-mat: #0c0a08;
  --ms-paper-edge: #f2ecdd;
  --ms-groove-light: rgba(255,255,255,0.42);
  --ms-ink-soak: rgba(20,14,8,0.35);
  --ms-indigo-wash: #93a2f2;
}

/* ============================================================
   ai and washi vocabulary — the component tokens the player speaks (paper, flap, relief,
   crease, controls), derived from the palettes above so the game renderer stays identical
   while each material keeps its own face. kasure publishes the same names as literals in
   its own block. Nothing here overlaps a palette name, so the cascade order against the
   palette blocks does not matter. Scoped to html on purpose: the landing mounts how-to
   demo wrappers that carry data-theme="washi" inside a kasure page, and they must keep
   inheriting the page's vocabulary (masugami-howto.css reads the palette, not this block).
   ============================================================ */
html[data-theme="ai"], html[data-theme="washi"] {
  --ms-bg-glow: radial-gradient(120% 70% at 50% 20%, rgba(255,255,255,.08), rgba(255,255,255,0) 62%);
  --ms-site-ground: var(--ms-bg);           /* the static pages pin kasure light; present for parity */
  --ms-site-grain-opacity: 0.05;
  --ms-paper-light: linear-gradient(126deg, rgba(255,255,255,.32), rgba(255,255,255,0) 48%);
  --ms-paper-shade: linear-gradient(126deg, rgba(0,0,0,0) 58%, rgba(0,0,0,.13) 100%);
  --ms-paper-lift: 0 2px 3px var(--ms-shadow), 0 16px 30px var(--ms-shadow), 0 40px 70px var(--ms-shadow);
  --ms-paper-cut-shadow: drop-shadow(0 2px 2px var(--ms-shadow)) drop-shadow(0 16px 24px var(--ms-shadow));
  --ms-board-frame: 1px solid var(--ms-card-line);
  --ms-tile: linear-gradient(126deg, var(--ms-tile-1), var(--ms-tile-2));
  --ms-tile-relief: 0 1px 1px rgba(255,255,255,.18), 2px 4px 8px var(--ms-shadow), 6px 10px 18px var(--ms-shadow);
  --ms-tile-relief-2: 0 1px 1px rgba(255,255,255,.22), 3px 6px 10px var(--ms-shadow), 8px 14px 24px var(--ms-shadow);
  --ms-tile-relief-flap: 1px 2px 3px var(--ms-shadow), 4px 7px 12px var(--ms-shadow);
  --ms-tile-flat: var(--ms-tile-ghost);
  --ms-tile-flat-shadow: inset 0 0 0 1px var(--ms-cell-line);
  --ms-tile-cancel: var(--ms-tile-ghost);
  --ms-tile-cancel-shadow: inset 0 0 0 1.5px var(--ms-accent), inset 2px 2px 5px var(--ms-shadow);
  --ms-tile-worse: var(--ms-mat);
  --ms-tile-worse-shadow: inset 0 0 0 1px var(--ms-cell-line), inset 2px 3px 7px var(--ms-shadow);
  --ms-dent: var(--ms-mat);
  --ms-dent-2: var(--ms-bg-deep);
  --ms-dent-shadow: inset 2px 3px 6px var(--ms-shadow), inset -1px -1px 2px rgba(255,255,255,.24);
  --ms-dent-shadow-2: inset 3px 5px 10px var(--ms-shadow), inset -1px -1px 2px rgba(255,255,255,.18);
  --ms-crease: linear-gradient(90deg, var(--ms-crease-dark), var(--ms-groove-light));
  --ms-crease-folded: linear-gradient(90deg, var(--ms-crease-dark), var(--ms-groove-light));
  --ms-crease-h: linear-gradient(180deg, var(--ms-crease-dark), var(--ms-groove-light));
  --ms-crease-h-folded: linear-gradient(180deg, var(--ms-crease-dark), var(--ms-groove-light));
  --ms-text-2: var(--ms-text-soft);
  --ms-text-3: var(--ms-text);
  --ms-text-4: var(--ms-text-soft);
  --ms-rule: 1px solid var(--ms-card-line);
  --ms-btn-stroke: 1px solid var(--ms-card-line);
  --ms-btn-stroke-hover: var(--ms-text-soft);
  --ms-btn-fill-hover: var(--ms-text-faint);
  --ms-btn-primary-bg: var(--ms-text);
  --ms-btn-primary-text: var(--ms-bg);
  /* decorative colours resolve to ink in a material that has none (the ai decision) */
  --ms-ornament-gold: var(--ms-text);
  --ms-ornament-plum: var(--ms-text);
}
html[data-theme="ai"] { --ms-tile-radius: 7px; }      /* the pool's rounded tile (XOBoard aiShape) */
html[data-theme="washi"] { --ms-tile-radius: 2px; }   /* a softened square; the sheet itself stays square */