/* 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     — true indigo pooled on cool smooth paper
     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. */

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

/* ---------- kasure · dark — deep teal surroundings, cool paper ---------- */
[data-theme="kasure"] {
  /* ---------- Ground ---------- */
  --ms-bg: #142F34;                 /* app background, flat black */
  --ms-bg-glow: none;

  /* ---------- Paper ---------- */
  --ms-paper: #DDE6DF;              /* the sheet, smooth cream */
  --ms-paper-flap: #C7DAD2;         /* the lifted flap, one step darker */
  --ms-paper-texture: url("assets/cutpaper.png");   /* multiply, background-size ~240% */
  --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-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);

  /* ---------- 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-radius: 0;              /* square corners — no rounding */
  --ms-tile-inset: 4px;             /* tile is 34px inside a 42px cell */

  /* 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);

  /* ---------- 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);
  --ms-crease-width: 2px;
  --ms-crease-hit: 26px;

  /* ---------- Accent (used sparingly) ---------- */
  --ms-accent: #E0503A;             /* active crease, cancelling pair. Nothing else. */

  /* ---------- Text ---------- */
  --ms-text: #E4F0ED;
  --ms-text-bright: #F2F8F4;
  --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);

  /* ---------- Type ---------- */
  --ms-font-display: "Shippori Mincho", Georgia, serif;   /* 400/500 */
  --ms-font-ui: "Zen Kaku Gothic New", system-ui, sans-serif;  /* 300/400 */

  --ms-wordmark: 400 27px/1 var(--ms-font-display);   /* letter-spacing 2.5px, LOWERCASE */
  --ms-numeral-lg: 400 30px/1 var(--ms-font-display);
  --ms-numeral-sm: 400 21px/1 var(--ms-font-display);
  --ms-status: 400 16px/1.65 var(--ms-font-display);
  --ms-micro: 400 12px/1 var(--ms-font-ui);           /* letter-spacing 2.2–2.4px, uppercase */
  --ms-button: 400 12px/1 var(--ms-font-ui);          /* letter-spacing 2.2px, uppercase */

  /* ---------- Geometry ---------- */
  --ms-gutter: 26px;
  --ms-cell: 42px;
  --ms-tile-size: 34px;
  --ms-hit-min: 46px;

  /* ---------- 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;

  /* ---------- Motion ---------- */
  --ms-ease: cubic-bezier(0.25, 0.7, 0, 1);
  --ms-dur-sheet: 460ms;   /* sheet resize after a fold */

  /* ---------- Token-table completeness ----------
     Present so every theme defines the same token set; mostly unused by the kasure look
     (its flap shows no paper thickness, its creases no scored groove, and a dry stroke
     soaks nothing — --ms-ink-soak is deliberately fully transparent: no halo). */
  --ms-paper-edge: #EDF4EE;
  --ms-groove-light: rgba(255,255,255,0.5);
  --ms-ink-soak: rgba(0,0,0,0);
  --ms-indigo-wash: #93A2F2;
  --ms-bg-deep: #0D2328;
  --ms-text-soft: rgba(228,240,237,0.92);
  --ms-text-faint: rgba(228,240,237,0.13);
  --ms-card-line: rgba(170,203,199,0.32);
  --ms-accent-soft: rgba(224,80,58,0.9);
  --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-ornament-gold: #C8AB61;
  --ms-ornament-plum: #D0A0BB;
}

/* ============================================================
   Palette mirror — the three materials: washi, ai, kasure
   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, 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; 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.
   ============================================================ */

/* ---------- 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-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-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-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;
}

[data-theme="ai"][data-appearance="light"] {
  --ms-bg: #ece9e1;
  --ms-bg-deep: #e1ddd2;
  --ms-paper: #f1eee6;
  --ms-paper-flap: #f1eee6;
  /* true indigo: *ai* is the word for it, and the old charcoal was not it. */
  --ms-tile-1: #2a3160;
  --ms-tile-2: #171c3a;
  --ms-tile-3: #0e1126;
  --ms-tile-ghost: rgba(23,28,58,0.32);
  --ms-text: #23262f;
  --ms-text-bright: #14161c;
  --ms-text-soft: #5a5f6c;
  --ms-text-faint: rgba(35,38,47,0.1);
  --ms-cell-line: rgba(35,38,47,0.16);
  --ms-card-line: rgba(35,38,47,0.12);
  --ms-crease-dark: rgba(35,38,47,0.3);
  --ms-accent: #4353b8;
  --ms-accent-soft: rgba(67,83,184,0.14);
  --ms-gold: #a8841c;
  --ms-gold-glow: rgba(198,161,47,0.55);
  --ms-warn: #b0453a;
  --ms-warn-glow: rgba(176,69,58,0.45);
  --ms-card: #f3f1ea;
  --ms-shadow: rgba(24,26,34,0.14);
  --ms-mat: #cfc9ba;
  --ms-paper-edge: #f1eee6;
  --ms-groove-light: rgba(35,38,47,0.3);
  --ms-ink-soak: rgba(23,28,58,0.38);   /* the pool soaks deeper than a dab */
  --ms-indigo-wash: #4353b8;
}

[data-theme="ai"][data-appearance="dark"] {
  --ms-bg: #12141c;
  --ms-bg-deep: #0c0e14;
  --ms-paper: #1c1f2a;
  --ms-paper-flap: #1c1f2a;
  /* true indigo, lifted for the dark room: the pool reads as pale indigo on ink-blue paper. */
  --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: #9aa0b2;
  --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: #93a2f2;
  --ms-accent-soft: rgba(147,162,242,0.16);
  --ms-gold: #d9b94a;
  --ms-gold-glow: rgba(217,185,74,0.55);
  --ms-warn: #e08578;
  --ms-warn-glow: rgba(224,133,120,0.5);
  --ms-card: #1a1d27;
  --ms-shadow: rgba(0,0,0,0.45);
  --ms-mat: #07080d;
  --ms-paper-edge: #1c1f2a;
  --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;
}