/*
 * Design token vocabulary.
 *
 * This file declares role names and safe neutral defaults. It never expresses
 * a brand. A design system file (muse.css / kagura.css) binds the roles to
 * values, and components reference only these roles — a component that names
 * a colour, a typeface or a pixel rhythm directly is a bug, because it makes
 * the third design system cost a rewrite instead of a token set.
 *
 * The nine documented branch points between MUSE and KAGURA all resolve here
 * or in the display dictionary. Do not add a tenth without updating
 * docs/INFORMATION_ARCHITECTURE.md §13.
 */

:root {
  /* ---- Surfaces -------------------------------------------------------- */
  /* Sections declare a role (base / alt / inverted / accent / media) and take
     both background and foreground from the pair, so contrast can never be
     half-applied. */
  --qwe-surface-base: #ffffff;
  --qwe-surface-base-ink: #1a1a18;
  --qwe-surface-alt: #f4f2ed;
  --qwe-surface-alt-ink: #1a1a18;
  --qwe-surface-inverted: #1a1a18;
  --qwe-surface-inverted-ink: #f5f3ee;
  --qwe-surface-accent: #1a1a18;
  --qwe-surface-accent-ink: #ffffff;
  --qwe-surface-media: #111111;
  --qwe-surface-media-ink: #ffffff;

  /* ---- Ink ------------------------------------------------------------- */
  --qwe-ink: #1a1a18;
  --qwe-ink-muted: #6b6b63;
  --qwe-ink-faint: #8d8d85;
  --qwe-ink-inverted: #f5f3ee;

  /* ---- Accents --------------------------------------------------------- */
  /* The two the facility may override. Everything else stays Qwe-managed.
     The default has to clear the same 4.5:1 the admin screen enforces on a
     facility's own choice — the previous #8a7a5c measured 3.42:1 on MUSE paper
     and 3.29:1 on KAGURA's, so a facility that set no accent was handed a
     colour its own settings screen would have rejected. */
  --qwe-accent-primary: #665c46;
  --qwe-accent-action: #1a1a18;
  --qwe-accent-action-ink: #ffffff;

  /* ---- Lines ----------------------------------------------------------- */
  --qwe-line: rgba(26, 26, 24, 0.18);
  --qwe-line-strong: rgba(26, 26, 24, 0.42);
  --qwe-line-inverted: rgba(255, 255, 255, 0.26);

  /* ---- Type ------------------------------------------------------------ */
  --qwe-font-display: Georgia, "Times New Roman", serif;
  --qwe-font-body: system-ui, -apple-system, "Hiragino Sans", "Yu Gothic", sans-serif;
  --qwe-font-label: var(--qwe-font-body);

  /* Display sizes are fluid; the floor is what must survive 320px. */
  --qwe-size-h1: clamp(34px, 6vw, 76px);
  --qwe-size-h2: clamp(26px, 4vw, 52px);
  --qwe-size-h3: clamp(19px, 2.4vw, 30px);
  --qwe-size-h4: 18px;
  /* Body and notes never drop below 16px — this is an accessibility floor,
     not a stylistic preference. */
  --qwe-size-body: 16px;
  --qwe-size-note: 16px;
  --qwe-size-label: 12px;

  --qwe-leading-display: 1.28;
  --qwe-leading-body: 1.85;
  --qwe-tracking-display: 0;
  --qwe-tracking-label: 0.18em;
  --qwe-weight-display: 500;
  --qwe-weight-body: 400;

  /* ---- Rhythm ---------------------------------------------------------- */
  --qwe-section-y: clamp(64px, 9vw, 132px);
  /* The same rhythm for a section whose body is a single short block. A
     heading plus one line does not earn the full band: measured at 1440px,
     a 21-character charges section still stood 443px tall. Templates declare
     the case; the design systems decide how much air it keeps. */
  --qwe-section-y-tight: clamp(40px, 5.5vw, 76px);
  --qwe-section-x: clamp(20px, 6vw, 104px);
  --qwe-gap: clamp(16px, 2.4vw, 34px);
  --qwe-gap-tight: 12px;
  /* Resolved in rem, never in em. An em measure is resolved against each
     element's own font-size, so a lead at 18px and a note at 16px inside one
     section end at different right edges (measured: 68px apart). rem resolves
     once, per root, so every block in a section shares one right edge and the
     measure still follows the reader's own text size. */
  --qwe-measure: 44rem;
  /* Headings do not want the reading measure. A hero title set at 72px needs
     room for the line the author actually wrote: KAGURA's 34rem column forced
     「波の音だけが、／時間を知らせる。」— two lines, with an explicit <br> — into
     four, stranding 「る。」 on its own. Prose keeps --qwe-measure; display type
     gets this. */
  --qwe-measure-display: 60rem;
  /* Vertical offset of the second item in a two-item editorial pair. Zero is
     the neutral value: a design system that does not stagger says nothing. */
  --qwe-stagger: 0px;

  /* ---- Controls -------------------------------------------------------- */
  /* 44px is the minimum touch target and is not overridable per design. */
  --qwe-tap: 44px;
  --qwe-radius: 0px;
  --qwe-border-width: 1px;

  /* ---- Media ----------------------------------------------------------- */
  /* Photographs are never dimmed with a filter: the facility's own images
     must render as supplied. Legibility over an image is bought with these
     overlay tokens, which sit between the photo and the text. */
  /* The neutral scrim is already legible: the default has to be the safe one,
     because a design system that forgets to bind it must not ship a hero with
     white text on an unknown photograph. Density is held across the whole
     band the text sits in, not only at the foot of the image. */
  --qwe-overlay-scrim: linear-gradient(180deg, rgba(0, 0, 0, 0.44) 0%, rgba(0, 0, 0, 0.38) 18%, rgba(0, 0, 0, 0.60) 45%, rgba(0, 0, 0, 0.74) 100%);
  --qwe-overlay-panel: rgba(0, 0, 0, 0.42);
  --qwe-overlay-ink: #ffffff;
  --qwe-ratio-hero: 16 / 9;
  --qwe-ratio-portrait: 4 / 5;
  --qwe-ratio-landscape: 4 / 3;
  --qwe-ratio-square: 1 / 1;

  /* ---- Motion ---------------------------------------------------------- */
  /* Restraint is the house style: luxury is not produced by animation volume. */
  --qwe-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --qwe-duration: 240ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --qwe-duration: 0ms;
  }
}