/*
 * TaigiCubes design tokens (#1003, umbrella #997 slice A6).
 * Linked instead of /public/tokens.css when BRAND=taigicubes — every page's
 * stylesheet link comes from brand.tokensCss via {{BRAND_TOKENS_CSS}}
 * (lib/brand-html.js). Source of truth: design_refs/taigicubes/brand/SPEC.md.
 *
 * The block between the two "design sheet" rules below is
 * design_refs/taigicubes/brand/tokens-taigi.css copied verbatim — change the
 * design file and re-copy, never edit values here — with ONE deviation:
 * --text-tertiary (and its AA-table line), darkened for WCAG AA; see the
 * "Deviations" note in SPEC.md. test/brand-skin.test.js pins exactly that.
 * What follows it is app glue: the rules public/tokens.css carries under its :root (reset, page
 * canvas, grain overlay, focus ring) so this sheet is a full drop-in, the
 * two stacks the self-hosted card face needs (--display-han / --body-han),
 * and the self-hosted mono face.
 */

/* ───────────── design sheet (verbatim but for --text-tertiary) ───────────── */
/* TaigiCubes — tokens-taigi.css
 * Same variable names as tokens.css (Lingocubes); new values only.
 * Material reference: 花磚 Taiwanese majolica tile — glaze-white canvas, deep teal glaze accent,
 * peach / aqua / ochre glazes as support. Ink and shadows stay brown (never slate, never blue).
 * Type is self-hosted (no Google Fonts): GenRyuMin TW (display + wordmark), Iansui (body / UI / card Han),
 * Tāu-hū Môo-tn̄g (mono). Ship each as unicode-range woff2 slices from /fonts/taigi/ — see SPEC.md §Q3 for files and weights.
 */
:root {
  /* Canvas & borders — glazed tile surface: whiter and one step cooler than Lingocubes paper */
  --bg-base: #f6f3ec;
  --bg-surface: #fcfaf5;
  --bg-surface-alt: #ebe6da;
  --cream: #faf7f0;
  --border-default: #d3ccbd;
  --border-subtle: #e4dfd2;

  /* Ink — warm brown-black, never cool */
  --text-primary: #1e1c18;
  --text-secondary: #575247;
  --text-tertiary: #756f5f;   /* #1003 deviation from the design sheet (#8b8371): same hue, darkened to >= 4.5:1 on --bg-surface and --bg-base — the app sets 10-15 px labels and placeholders in it */

  /* Accent — deep teal glaze (the 花磚 border colour) */
  --accent: #1d6b72;
  --accent-hover: #155559;
  --accent-light: #d8ecea;
  --accent-border: #a9d1cd;
  --accent-ink: #11464b;

  /* Support — same names, new glazes */
  --clay: #a88a6e;          /* warm neutral, kit-name underline */
  --leaf: #b8862e;          /* was leaf green → ochre glaze (secondary / manual-path affordances) */
  --leaf-light: #f3e6c6;
  --sunset: #eeb4a2;        /* was sunset orange → peach glaze (avatar ring, warm highlights) */

  /* Semantic — kept in the same hue families, tuned to the new canvas */
  --success: #4e7d4a;
  --success-light: #dfeadb;
  --error: #b04529;
  --error-light: #f6dcd4;
  --warning: #c07a2a;
  --warning-light: #f6e5cf;

  /* Shadows — brown pigment tinted to glaze white, rgba(70,60,40,·) */
  --shadow-xs: 0 1px 1px rgba(70,60,40,0.05);
  --shadow-sm: 0 1px 2px rgba(70,60,40,0.06), 0 1px 3px rgba(70,60,40,0.05);
  --shadow-md: 0 4px 14px rgba(70,60,40,0.10), 0 1px 3px rgba(70,60,40,0.06);
  --shadow-lg: 0 12px 32px rgba(70,60,40,0.14), 0 2px 6px rgba(70,60,40,0.08);
  --shadow-xl: 0 24px 56px rgba(70,60,40,0.18), 0 4px 12px rgba(70,60,40,0.08);
  --shadow-ring: 0 0 0 3px rgba(29,107,114,0.16);
  --shadow-up: 0 -6px 20px rgba(70,60,40,0.10);
  --inset-top: inset 0 1px 0 rgba(255,252,246,0.9);
  --inset-bottom: inset 0 -2px 0 rgba(70,60,40,0.06);

  /* Tile pastels — glaze family: peach, apricot, ochre-oat, oat, sage, mint, aqua, mist, lilac, rose */
  --pastel-1: #f4cfc2;
  --pastel-2: #f0d9a2;
  --pastel-3: #e6c88f;
  --pastel-4: #dccfb2;
  --pastel-5: #c7dab0;
  --pastel-6: #b0d9cc;
  --pastel-7: #a9d2d3;
  --pastel-8: #bfcde6;
  --pastel-9: #d6c6e0;
  --pastel-10: #efc0c7;

  /* Type — all three self-hosted, all OFL, all drawn with Tâi-lô in mind */
  --display: 'GenRyuMin TW', 'Noto Serif TC', serif;                 /* M 500 kit names · SB 600 headings · B 700 wordmark */
  --body: 'Iansui', 'Noto Sans TC', system-ui, sans-serif;            /* one face for UI, Han and Tâi-lô */
  --mono: 'Tauhu Mootng', ui-monospace, monospace;                    /* tracker labels + phonetic lines */
  --han-card: 'Iansui', 'GenRyuMin TW', 'Noto Serif TC', serif;       /* one face per cube, no patch fonts */

  /* Focus — teal glaze, pairs with --shadow-ring */
  --border-focus: #1d6b72;

  /* Motion curves — unchanged from Lingocubes */
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-pop:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-unfold:   cubic-bezier(0.22, 1.3, 0.36, 1);

  /* Grain — same SVG noise as Lingocubes; opacity retuned below */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.3  0 0 0 0 0.2  0 0 0 0 0.1  0 0 0 0.11 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
/* Grain: keep the paper-grain overlay, retint from opacity .32 multiply to .18 multiply so it reads as glaze speckle, not paper fibre. */
body.lb-grain::before { opacity: 0.18; }

/* AA table — every text / ground pair used in the UI (WCAG 2.x, computed from the hexes above)
 *  text-primary   #1e1c18 on bg-base      #f6f3ec  15.9:1  AA
 *  text-primary   #1e1c18 on bg-surface   #fcfaf5  16.8:1  AA
 *  text-primary   #1e1c18 on surface-alt  #ebe6da  14.4:1  AA
 *  text-secondary #575247 on bg-base      #f6f3ec   6.6:1  AA
 *  text-secondary #575247 on bg-surface   #fcfaf5   7.0:1  AA
 *  text-secondary #575247 on surface-alt  #ebe6da   6.0:1  AA
 *  text-tertiary  #756f5f on bg-surface   #fcfaf5   4.8:1  AA   (#1003 deviation; on bg-base 4.5:1, on surface-alt 4.0:1)
 *  bg-surface     #fcfaf5 on accent       #1d6b72   5.9:1  AA   (Save cubes)
 *  bg-surface     #fcfaf5 on accent-hover #155559   8.0:1  AA
 *  accent         #1d6b72 on bg-surface   #fcfaf5   5.9:1  AA   (accent as text, "Cubes")
 *  accent-ink     #11464b on accent-light #d8ecea   8.6:1  AA   (sparks chip)
 *  leaf/ochre     #b8862e on bg-surface   #fcfaf5   3.0:1  large only, never body text
 *  success        #4e7d4a on success-lt   #dfeadb   4.6:1  AA
 *  error          #b04529 on error-light  #f6dcd4   4.9:1  AA
 *  warning        #c07a2a on warning-lt   #f6e5cf   3.4:1  large / icon only
 *  text-primary   #1e1c18 on pastel-1..10           >= 10:1 AA
 */
/* ───────────── end design sheet ───────────── */

/* ── App glue (#1003) ─────────────────────────────────────────────────── */

/* Tāu-hū Môo-tn̄g 豆腐魔頭 — the --mono face (tracker labels, phonetic lines).
   One 12 KB woff2 with Latin + the Tâi-lô combining marks; no Han by design.
   OFL 1.1 — public/fonts/tauhu-mootng/LICENSE.txt. */
@font-face {
  font-family: 'Tauhu Mootng';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/public/fonts/tauhu-mootng/TauhuMootng20.05-Regular.woff2) format('woff2');
}

:root {
  /* The self-hosted-Han stacks the html[data-card-font="genryumin"] card
     rules use (tokens.css defines the Lingocubes pair). The card face stays
     GenRyuMin in this slice; the swap to --han-card (self-hosted Iansui) is
     #1013. The note line puts Iansui first with GenRyuMin as the per-glyph
     backstop for Ext-B (𠢕) and any Tâi-lô mark the Google-served Iansui
     subset drops. */
  --display-han: 'GenRyuMin TW', 'Noto Serif TC', serif;
  --body-han:    'Iansui', 'GenRyuMin TW', 'Noto Sans TC', system-ui, sans-serif;
  /* Tāu-hū Môo-tn̄g has no Han, so a mono label that may carry Han (the
     foot strip's 服務條款) names the body's Han face next, ahead of the
     generic families (tokens.css explains the token). */
  --mono-han:    'Tauhu Mootng', 'Iansui', 'Noto Sans TC', ui-monospace, monospace;
  /* #1116 — dark ochre (--leaf, deepened): the 修訂 N 張 → button and the
     selected report chips of the 校對回合. App glue, not part of the design
     sheet above (that block is copied verbatim). */
  --leaf-ink: #5c4310;
}

/* Everything below mirrors public/tokens.css after its :root, so a page
   that links this sheet instead of tokens.css keeps the same reset, canvas
   and focus ring. Only the values differ. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: var(--body);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* None of the three faces ships an italic, and a slanted Han or Tâi-lô
     glyph is a browser forgery, not type: italic rules render upright on
     TaigiCubes. Weight synthesis stays on (Iansui has one weight). */
  font-synthesis: weight;
}

body {
  background: var(--bg-base);
  /* Same two soft washes as Lingocubes, retinted from warm paper glow to
     glaze white + a trace of the teal glaze, so the canvas stays a notch
     cooler than Lingocubes paper (SPEC Q2). */
  background-image:
    radial-gradient(ellipse 80% 60% at 30% 0%, rgba(255, 253, 247, 0.55) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 100%, rgba(169, 209, 205, 0.16) 0%, transparent 55%);
  min-height: 100vh;
  overscroll-behavior: none;
}

/* Grain overlay — the design sheet retunes it to .18 on `body.lb-grain`, a
   class the app never sets; the app's overlay is plain body::before, so the
   retune is applied here. */
body::before {
  content: '';
  position: fixed; inset: 0;
  background: var(--grain);
  pointer-events: none;
  opacity: 0.18;
  z-index: 2000;
  mix-blend-mode: multiply;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Lockup (SPEC Q4) ─────────────────────────────────────────────────────
   {{BRAND_WORDMARK}} / {{BRAND_NAME_BLOCK}} (lib/brand-html.js) emit these
   classes on TaigiCubes only. Sizes are relative to the wordmark they sit
   under, so one rule serves the login card, the verify page and /welcome.
   The wordmark weight is GenRyuMin SB (600) until the B (700) slices land
   with #1013. */
.brand-wordmark-accent { color: var(--accent); }
.brand-name-zh {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-family: var(--display);
  font-weight: 500;
  font-style: normal;
  font-size: 17px;
  letter-spacing: 0.04em;
  line-height: 1.4;                     /* the ê circumflex never clips */
  color: var(--text-primary);
}
.brand-name-reading {
  font-family: var(--mono);
  font-size: max(10px, 0.5em);          /* N2: ~50% of the Han size */
  letter-spacing: 0.06em;
  line-height: 1.4;
  color: var(--accent-ink);
}