/*
 * MUSE — design system token set.
 *
 * Independent boutique hotel. Editorial: heavy sans display type set tight,
 * a paper ground interrupted by full black fields, one warm accent and one
 * decisive action colour.
 *
 * This file binds the roles declared in tokens.css to values. It is loaded
 * after tokens.css and before components.css, so it may only:
 *   1. re-declare custom properties (they win through var(), not source order)
 *   2. compose the two layout variants that exist in this design system only
 *      (IA §13-6 room index, §13-7 inclusions) — addressed through the data
 *      attribute the template emits, so components.css keeps the class.
 * It never paints .qwe-section itself: the data-surface -> background/colour
 * binding belongs to components.css and is shared by both design systems.
 *
 * Branch points expressed here: §13-1 tokens, §13-4 surface rotation values,
 * §13-6 room index as photograph cards, §13-7 inclusions as a checked list.
 *
 * Facility-editable tokens: --qwe-accent-primary and --qwe-accent-action only.
 * Both are validated at 4.5:1 against white before they are stored
 * (inc/admin/validate.php), so every value that reaches this file is dark
 * enough to carry white text and light enough to read on the paper ground.
 * Nothing here multiplies that guarantee away: the accents are never used as
 * a full-bleed background, and on dark surfaces they are replaced by a
 * design-managed light accent rather than dimmed.
 */

:root {
  /* ---- Surfaces -------------------------------------------------------- */
  /* Rotation (inc/display/sections.php): base -> inverted -> base -> alt.
     The rhythm is light/dark: paper, then a full black field, then paper,
     then a lifted paper. `alt` stays quiet because room and plan detail
     pages use it for secondary blocks, not only as the fourth beat. */
  --qwe-surface-base: #ece8df;
  --qwe-surface-base-ink: #171715;
  --qwe-surface-alt: #f7f5ef;
  --qwe-surface-alt-ink: #171715;
  --qwe-surface-inverted: #171715;
  --qwe-surface-inverted-ink: #f3f1ea;
  /* The attention field: the temporary notice and any accent section. Warm
     amber with black ink is 8.4:1 and is Qwe-managed, so a facility colour
     can never turn a whole section unreadable. */
  --qwe-surface-accent: #f1a128;
  --qwe-surface-accent-ink: #171715;
  --qwe-surface-media: #100f0e;
  --qwe-surface-media-ink: #ffffff;

  /* ---- Ink ------------------------------------------------------------- */
  /* Every ink here clears 4.5:1 on the paper ground; --qwe-ink-faint is real
     16px text in this theme, not decoration, so it is not allowed to drift
     lighter. */
  --qwe-ink: #171715;
  --qwe-ink-muted: #56564f;
  --qwe-ink-faint: #67675e;
  --qwe-ink-inverted: #f3f1ea;

  /* ---- Accents --------------------------------------------------------- */
  /* Emphasis: burnt amber, the reference orange taken down to a value that
     reads as text on paper (4.8:1). The vivid #f1a128 survives as the accent
     surface above and as the accent on dark surfaces below. */
  --qwe-accent-primary: #995107;
  /* Action: 参考にした青(#3448d8)をやめ、この設計自身のインクに寄せた。
     2026-08-22、Bulgari Hotel Tokyo / Aman Amanemu / Four Seasons Kyoto を
     実際に開いて比べたところ、予約ボタンはいずれも黒に近い矩形で、
     彩度の高い色は一つも使っていない。色は写真に持たせている。
     彩度の高い青は、写真の上で最も強い要素になり、量産テンプレートの
     合図として読まれる。白文字とのコントラストは 16.4:1。 */
  --qwe-accent-action: #171715;
  --qwe-accent-action-ink: #ffffff;

  /* ---- Lines ----------------------------------------------------------- */
  --qwe-line: rgba(23, 23, 21, 0.22);
  --qwe-line-strong: rgba(23, 23, 21, 0.55);
  --qwe-line-inverted: rgba(243, 241, 234, 0.28);

  /* ---- Type ------------------------------------------------------------ */
  /* No web font is loaded. Each stack names a Latin display face first and a
     Japanese face after it, so a Japanese facility name falls back to a real
     gothic instead of a substituted serif. */
  /* 2026-08-30: 先頭が "Arial Black" だった。欧文は極太、和文は
     ヒラギノ角ゴを 900 で描くことになり、1440pxで74px・字間 -0.04em。
     実測して見ると、ブティックホテルというより量販店のポスターの組みだった。
     極太の一枚看板をやめ、太さは 700 に、字間は詰めすぎない。 */
  --qwe-font-display: "Helvetica Neue", Helvetica, Arial,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic,
    "Noto Sans JP", Meiryo, sans-serif;
  --qwe-font-body: "Helvetica Neue", Helvetica, Arial,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic,
    "Noto Sans JP", Meiryo, sans-serif;
  --qwe-font-label: var(--qwe-font-body);

  /* Floors are what must survive 320px with a Japanese facility name that
     cannot break inside a word. */
  /* 2026-08-30: h2(5.2vw)が h1(4.4vw)より**大きかった**。節見出しがページの
     見出しより大きく叫ぶ状態で、1440pxでは h1=63px / h2=74px。逆転を直す。 */
  --qwe-size-h1: clamp(36px, 5.2vw, 76px);
  --qwe-size-h2: clamp(24px, 2.9vw, 42px);
  --qwe-size-h3: clamp(19px, 1.7vw, 24px);
  --qwe-size-h4: 18px;
  --qwe-size-body: 16px;
  --qwe-size-note: 16px;
  /* Uppercase latin with wide tracking, four to six short words. It stays at
     12px where KAGURA moves to 14px: the same size does not buy the same
     legibility across two scripts. */
  --qwe-size-label: 12px;

  /* Tight display leading and negative tracking are the MUSE signature. The
     leading stays above 1 so Japanese headings do not collide. */
  --qwe-leading-display: 1.08;
  --qwe-leading-body: 1.8;
  --qwe-tracking-display: -0.015em;
  --qwe-tracking-label: 0.2em;
  --qwe-weight-display: 700;
  --qwe-weight-body: 400;

  /* ---- Rhythm ---------------------------------------------------------- */
  --qwe-section-y: clamp(70px, 9vw, 132px);
  /* Roughly three fifths of the full band. A section carrying one short
     paragraph keeps the rhythm of the page without standing as tall as a
     section that carries a photograph and three. */
  --qwe-section-y-tight: clamp(44px, 5.4vw, 78px);
  --qwe-section-x: clamp(20px, 5vw, 74px);
  --qwe-gap: clamp(16px, 2.4vw, 34px);
  --qwe-gap-tight: 12px;
  /* rem, not em (see tokens.css): 38rem is 608px at the default text size,
     which is where the lead already sat, so the measure is unchanged — what
     changes is that the note under it now ends at the same place. */
  --qwe-measure: 38rem;
  /* The editorial step of this design: the second half of a photographic pair
     starts lower than the first. components.css spends it on the highlight
     cards and this file on the room index; KAGURA leaves it at the neutral
     zero, which is how a design system says "no stagger" without a rule. */
  --qwe-stagger: clamp(24px, 4vw, 76px);

  /* ---- Controls -------------------------------------------------------- */
  --qwe-tap: 44px;
  --qwe-radius: 0px;
  --qwe-border-width: 1px;

  /* ---- Media ----------------------------------------------------------- */
  /* Photographs are delivered as supplied. Legibility over an image comes
     from these overlays, never from a filter on the picture. */
  /* The hero text block sits between 20% and 80% of the hero's height, so the
     scrim has to hold its density across that whole band rather than only
     darken the foot of the picture. The previous ramp started at zero and
     measured 2.05:1 under the eyebrow and 2.15:1 under the 106px heading at
     1440px; the photograph itself is untouched — this is bought entirely in
     the overlay. Re-measured with the same procedure (hide .qwe-hero__inner,
     read the background pixels at 1440px): eyebrow 4.52:1 worst / 6.05:1
     median, heading 4.18:1 worst, lead 6.14:1 worst, footnote 6.78:1 worst —
     every band clears 4.5:1 on its worst pixel, not only on its median. */
  /* 2026-08-23、ヒーローの写真を差し替えて 18% の帯（eyebrow が乗る位置）が
     4.33:1 に落ちた。新しい写真はそこに真鍮ランプの光溜まりがあり、
     いちばん薄い 0.42 と重なる。0.52 に上げて測り直した。写真は触っていない。 */
  --qwe-overlay-scrim: linear-gradient(180deg, rgba(16, 15, 14, 0.56) 0%, rgba(16, 15, 14, 0.56) 18%, rgba(16, 15, 14, 0.66) 45%, rgba(16, 15, 14, 0.80) 100%);
  --qwe-overlay-panel: rgba(16, 15, 14, 0.58);
  --qwe-overlay-ink: #ffffff;
  --qwe-ratio-hero: 3 / 2;
  --qwe-ratio-portrait: 4 / 5;
  --qwe-ratio-landscape: 4 / 3;
  --qwe-ratio-square: 1 / 1;

  /* ---- Motion ---------------------------------------------------------- */
  --qwe-ease: cubic-bezier(0.16, 0.84, 0.36, 1);
  --qwe-duration: 200ms;
}

/*
 * Dark surfaces re-point the shared ink and accent roles.
 *
 * A component that writes var(--qwe-ink-muted) for a note must stay readable
 * when the section behind it is black, and the facility's emphasis colour —
 * guaranteed dark, because it was measured against white — must not be
 * printed onto a black field. Both problems are solved once, here, instead of
 * in every component.
 */
[data-surface="inverted"],
[data-surface="media"] {
  --qwe-ink: var(--qwe-ink-inverted);
  --qwe-ink-muted: #a9a79f;
  --qwe-ink-faint: #8c8a82;
  --qwe-line: var(--qwe-line-inverted);
  --qwe-line-strong: rgba(243, 241, 234, 0.52);
  /* The vivid amber of the reference: 8.4:1 on the black field. */
  --qwe-accent-primary: #f1a128;
}

/*
 * Over a photograph, nothing is mixed down.
 *
 * components.css derives the muted and faint foregrounds by mixing the
 * foreground into --qwe-bg. On a flat surface that is exactly right. On
 * `media` it is not, because --qwe-bg is only the ground behind the picture:
 * the mix resolves the eyebrow and the footnote to 54% white and then prints
 * them onto an unknown photograph. Measured on the MUSE hero at 1440px before
 * this rule: 12px eyebrow 1.08:1 worst / 1.57:1 median, 16px footnote 2.36:1
 * worst. No scrim can repair that, because the text itself is the grey half
 * of the problem — a 0.58 veil still left the eyebrow at 4.05:1 median.
 * Over a photograph the hierarchy is carried by size and tracking, so both
 * roles take the overlay ink and the scrim carries the contrast.
 *
 * The leading class exists only to outrank the [data-surface] rule in
 * components.css. When that rule stops applying to `media`, this block can be
 * deleted from both design systems and --qwe-overlay-ink resolves it alone.
 */
.qwe [data-surface="media"] {
  --qwe-fg-muted: var(--qwe-overlay-ink);
  --qwe-fg-faint: var(--qwe-overlay-ink);
}

/* The accent field is light amber, so marks on it take the surface ink. */
[data-surface="accent"] {
  --qwe-ink: var(--qwe-surface-accent-ink);
  --qwe-ink-muted: #4a3611;
  --qwe-ink-faint: #4a3611;
  --qwe-line: rgba(23, 23, 21, 0.34);
  --qwe-line-strong: rgba(23, 23, 21, 0.62);
  --qwe-accent-primary: var(--qwe-surface-accent-ink);
}

/* tokens.css zeroes the duration under reduced motion before this file is
   read, so the rule has to be restated after the value is rebound. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --qwe-duration: 0ms;
  }
}

/* -------------------------------------------------------------------------
 * Composition — only what this design system adds on top of components.css.
 *
 * components.css already owns the shared structure of both layouts (the grid,
 * the rules, the checked mark) and both variants of the inclusions, so those
 * are not restated here: two files describing one rule is how a design drifts.
 * What is left below exists in MUSE only, and is addressed through the data
 * attribute the template emits so it sits one step above the component class.
 * ---------------------------------------------------------------------- */

/*
 * IA §13-6 — the room index is a set of photograph cards.
 * parts/room-list.php emits data-qwe-layout="gallery" here. The staggered
 * column is the editorial move of this design: it starts only where there is
 * room for it, never on a single-column layout.
 */
@media (min-width: 900px) {
  .qwe-room-list[data-qwe-layout="gallery"] > .qwe-room-list__item:nth-child(even) {
    margin-block-start: var(--qwe-stagger);
  }
}

/* The photograph is not filtered, tinted or dimmed. The only thing that moves
   is its scale, and only while a pointer or the keyboard is on the card —
   reduced motion zeroes the duration above. */
.qwe-room-list[data-qwe-layout="gallery"] .qwe-room-card__media .qwe-image {
  overflow: hidden;
}

.qwe-room-list[data-qwe-layout="gallery"] .qwe-room-card__media img {
  transition: transform var(--qwe-duration) var(--qwe-ease);
}

.qwe-room-list[data-qwe-layout="gallery"] .qwe-room-card:hover .qwe-room-card__media img,
.qwe-room-list[data-qwe-layout="gallery"] .qwe-room-card:focus-within .qwe-room-card__media img {
  transform: scale(1.02);
}

/* The number that opens a card is a mark in the emphasis colour, which on the
   paper ground is the burnt amber and on a dark section the vivid one. */
.qwe-room-list[data-qwe-layout="gallery"] .qwe-room-card__number {
  color: var(--qwe-accent-primary);
}