/* MuseArch front-end brand guideline v0.1 — implementation proposal, 2026-09-29.
 * Primitive values are centralized here. Product theme variables (--bg,
 * --bg-image, --text, --accent) are scoped separately to each Muse page.
 * The px equivalents in the guide assume a 16px browser default.
 */
:root {
  --ma-brand-red: #a93632;
  --ma-brand-gold: #b89a62;
  --ma-brand-paper: #faf7f0;
  --ma-brand-ink: #3d2419;
  --ma-brand-soft: #f0e3da;
  --ma-brand-white: #fffefb;
  --ma-neutral-muted: #75645b;
  --ma-neutral-rule: #d9cbc0;
  --ma-neutral-control: #988579;

  --ma-color-canvas: var(--ma-brand-paper);
  --ma-color-surface: var(--ma-brand-white);
  --ma-color-text: var(--ma-brand-ink);
  --ma-color-muted: var(--ma-neutral-muted);
  --ma-color-rule: var(--ma-neutral-rule);
  --ma-color-control-border: var(--ma-neutral-control);
  --ma-color-action: var(--ma-brand-red);
  --ma-color-on-action: var(--ma-brand-paper);
  --ma-color-selection: var(--ma-brand-soft);
  --ma-color-error: var(--ma-brand-red);
  --ma-color-focus: var(--ma-color-text);

  --ma-font-ui: "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
  --ma-font-display: "Shippori Mincho", "Noto Serif CJK JP", serif;
  --ma-font-hand: "Zen Kurenaido", "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
  --ma-weight-body: 400;
  --ma-weight-ui: 600;
  --ma-weight-display: 500;
  --ma-weight-hand: 400;

  /* Article typeface (記事の題・本文だけに掛かる、保存項目でテーマの4値とは別。
   * 既定は明朝。GUIDELINES.md §3「記事の書体」参照。行送り・字間はここでは
   * 変えない ── 3書体で共通の --ma-line-body / letter-spacing 0 を使う。
   */
  --ma-article-font: var(--ma-font-display);
  --ma-article-title-weight: var(--ma-weight-display);
  --ma-article-body-weight: var(--ma-weight-display);
  --ma-text-caption: .75rem;
  --ma-text-label: .875rem;
  --ma-text-body: 1rem;
  --ma-text-lead: 1.125rem;
  --ma-text-section: 1.25rem;
  --ma-text-page: 1.5rem;
  --ma-text-name: 1.75rem;
  --ma-text-display: clamp(1.75rem, 3vw + 1rem, 3.5rem);
  --ma-line-tight: 1.35;
  --ma-line-ui: 1.5;
  --ma-line-body: 1.875;
  --ma-line-display: 1.5;

  --ma-space-1: .25rem;
  --ma-space-2: .5rem;
  --ma-space-3: .75rem;
  --ma-space-4: 1rem;
  --ma-space-5: 1.25rem;
  --ma-space-6: 1.5rem;
  --ma-space-8: 2rem;
  --ma-space-10: 2.5rem;
  --ma-space-12: 3rem;
  --ma-space-16: 4rem;

  --ma-target-min: 2.75rem;
  --ma-control-height: 3rem;
  --ma-header-height: 3.5rem;
  --ma-bottom-nav-height: 3.5rem;
  --ma-icon-inline: 1.25rem;
  --ma-icon-standalone: 1.5rem;
  --ma-avatar-small: 2.5rem;
  --ma-avatar-profile: 4rem;
  --ma-symbol-min: 3rem;
  --ma-wordmark-min: 10rem;
  --ma-wordmark-standard: 12rem;
  --ma-product-column: 24.375rem;
  --ma-console-width: 60rem;
  --ma-page-gutter: 1rem;

  --ma-radius-control: .25rem;
  --ma-radius-surface: .5rem;
  --ma-radius-circle: 50%;
  --ma-border-width: 1px;
  --ma-selection-line: 2px;
  --ma-focus-width: 2px;
  --ma-focus-offset: 3px;
  --ma-z-base: 0;
  --ma-z-sticky: 10;
  --ma-z-navigation: 20;
  --ma-z-popover: 30;
  --ma-z-dialog: 40;
  --ma-z-notice: 50;

  --ma-duration-press: 100ms;
  --ma-duration-state: 150ms;
  --ma-duration-overlay: 240ms;
  --ma-ease-out: cubic-bezier(.16, 1, .3, 1);
  --ma-ease-in: cubic-bezier(.7, 0, .84, 0);
  --ma-ease-state: cubic-bezier(.65, 0, .35, 1);
}

/* Default mapping. The product writes these four values onto the Muse root.
 * Navigation and widgets within that root consume the same page theme.
 * No selectors here change font family, geometry, or product layout.
 */
.ma-muse-theme {
  --ma-color-canvas: var(--yumemi-theme-bg, var(--ma-brand-paper));
  --ma-color-surface: var(--ma-color-canvas);
  --ma-color-text: var(--yumemi-theme-text, var(--ma-brand-ink));
  --ma-color-muted: var(--ma-color-text);
  --ma-color-action: var(--yumemi-theme-accent, var(--ma-brand-red));
  --ma-color-focus: var(--ma-color-text);
  --ma-color-control-border: var(--ma-color-text);
  /* Error falls back to the theme's own text color, not the brand red.
   * State is carried by the "！" mark and the message text, not by color
   * alone (see GUIDELINES.md §13). Verified 2026-09-29: an arbitrary Muse
   * background can make brand-red-on-brand-red invisible; the text color is
   * chosen to already pass contrast in this theme.
   */
  --ma-color-error: var(--ma-color-text);
  /* The current text/foreground pair must pass contrast validation before
   * the theme is accepted. Action-label foreground must be selected for the
   * actual accent; the default cream label is not universally valid. This
   * derivation is SSR's responsibility; it is not held in CSS.
   */
  /* Selection and rule are mixed from the theme's own text/canvas, not the
   * fixed brand soft/rule. On a dark Muse background the fixed soft would
   * stay a light tint that a cream foreground can't sit on top of readably
   * (裁定:鷹野 2026-09-29).
   */
  --ma-color-selection: color-mix(in srgb, var(--ma-color-text) 12%, var(--ma-color-canvas));
  --ma-color-rule: color-mix(in srgb, var(--ma-color-text) 20%, var(--ma-color-canvas));
  background-color: var(--ma-color-canvas);
  background-image: var(--yumemi-theme-bg-image, none);
  color: var(--ma-color-text);
}