@import url('../fonts/approved-chinese.css');
@import url('../fonts/alegreya.css');
/* Míngbai learner design tokens — warm paper and ink.
   One semantic token contract for the learner product: page
   stylesheets map their own names onto these roles and own the components.
   The shared extension shell keeps its own CSS adapter onto the same roles. */

:root {
  /* Surfaces */
  --mb-paper: #f4eee3;
  --mb-paper-raised: #fbf8f2;
  --mb-paper-sunk: #f1eadd;

  /* Text */
  --mb-ink: #1e1a16;
  --mb-ink-secondary: #554c42;
  --mb-ink-muted: #716659;

  /* Rules and dividers */
  --mb-rule: #d6c9b3;
  --mb-rule-soft: #e6dccb;
  --mb-hairline: rgba(30, 26, 22, .12);
  --mb-hairline-soft: rgba(30, 26, 22, .08);

  /* Target Chinese: the part of a line under study, always marked by an underline
     on Chinese text. Also the brand seal colour. */
  --mb-target: #a3302a;
  --mb-target-underline: rgba(163, 48, 42, .55);
  --mb-brand-seal: #a3302a;

  /* Accent: the same crimson, with four Round 2 jobs only — Chinese in focus
     (selected token tint/target underline), kept (the Save seal moment and settled
     seal), where you are (active nav/tab rule, current time/step) and the brand seal.
     Not for buttons, card borders, eyebrows, links, errors or destructive actions. */
  --mb-accent: #a3302a;
  --mb-accent-hover: #87251f;
  --mb-accent-soft: rgba(163, 48, 42, .07);
  --mb-accent-rule: rgba(163, 48, 42, .5);

  /* Actions */
  --mb-action-primary-bg: #1e1a16;
  --mb-action-primary-bg-hover: #87251f;
  --mb-action-primary-fg: #fbf8f2;
  --mb-action-secondary-border: rgba(30, 26, 22, .3);
  --mb-action-secondary-bg-hover: rgba(30, 26, 22, .06);
  --mb-action-secondary-fg: #1e1a16;
  --mb-action-tertiary-fg: #554c42;

  /* Links */
  --mb-link: #1e1a16;
  --mb-link-underline: rgba(30, 26, 22, .35);

  /* Status */
  --mb-error: #9f1d35;
  --mb-success: #3f5f46;
  --mb-warning: #7a5410;
  --mb-focus: #1e1a16;

  /* Verified local Alegreya roles. Chinese retains licensed Noto Serif SC;
     TC regional glyph forms require a separately approved TC font, see design capsule. */
  --mb-family-heading: "Mingbai Alegreya", "Noto Serif SC", "Source Serif 4", Georgia, serif;
  --mb-family-reading: "Mingbai Alegreya", "Noto Serif SC", "Source Serif 4", Georgia, serif;
  --mb-family-controls: "Mingbai Alegreya Sans", "Noto Serif SC", "Trebuchet MS", Arial, sans-serif;
  --mb-font-zh-sans: "Mingbai Noto Sans SC", "Mingbai Noto Sans TC", sans-serif;
  --mb-family-chinese: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif;
  --mb-family-pinyin: var(--mb-family-controls);
  --mb-font-heading: var(--mb-family-heading);
  --mb-font-reading: var(--mb-family-reading);
  --mb-font-controls: var(--mb-family-controls);
  --mb-font-zh: var(--mb-family-chinese);
  --mb-font-pinyin: var(--mb-family-pinyin);
  /* Compatibility names remain public for existing consumers. */
  --mb-font-display: var(--mb-font-heading);
  --mb-font-ui: var(--mb-font-controls);
  --mb-font-action: var(--mb-font-controls);

  /* Meaningful interaction roles: Save is crimson; ordinary primary stays ink.
     Selection, grammar, retrieval/status and destructive feedback are distinct jobs. */
  --mb-save-fg: var(--mb-accent);
  --mb-save-border: var(--mb-accent);
  --mb-save-bg: transparent;
  --mb-save-active-bg: var(--mb-accent);
  --mb-save-active-fg: var(--mb-paper-raised);
  --mb-selection-fg: var(--mb-ink);
  --mb-selection-bg: #f4e0d7;
  --mb-selection-border: var(--mb-accent);
  --mb-grammar: #73566f;
  --mb-grammar-soft: rgba(115, 86, 111, .10);
  --mb-paper-panel: #e8decb;
  --mb-control-border: #a89a85;
  --mb-control-radius: 5px;
  --mb-control-height: 44px;
  --mb-focus-width: 2px;
  --mb-focus-offset: 2px;

  /* Type scale */
  --mb-zh-xl: 40px;
  --mb-zh-l: 32px;
  --mb-zh-m: 28px;
  --mb-zh-s: 20px;
  --mb-zh-xs: 18px;
  --mb-text-l: 20px;
  --mb-text-m: 17px;
  --mb-text-s: 15px;
  --mb-ui-m: 14px;
  --mb-ui-s: 13px;

  /* Spacing, shape and frame */
  --mb-space-1: 4px;
  --mb-space-2: 8px;
  --mb-space-3: 12px;
  --mb-space-4: 16px;
  --mb-space-5: 24px;
  --mb-space-6: 32px;
  --mb-space-7: 48px;
  --mb-space-8: 64px;
  --mb-radius-surface: 16px;
  --mb-radius-chip: 8px;
  --mb-radius-pill: 999px;
  --mb-shadow-raised: 0 30px 80px -60px rgba(30, 26, 22, .22);
  --mb-frame: 760px;
  --mb-gutter: clamp(16px, 4vw, 32px);
}

/* Regional forms follow explicit canonical display-script language, never guessed content. */
:lang(zh-Hant) {
  --mb-family-chinese: "Mingbai Noto Serif TC", "Mingbai Noto Serif SC", serif;
  --mb-font-zh: var(--mb-family-chinese);
  --mb-font-zh-sans: "Mingbai Noto Sans TC", "Mingbai Noto Sans SC", sans-serif;
}