/*
 * KAGURA — design system token set.
 *
 * Ryokan and small Japanese inn. Quiet: mincho display type set open, an
 * unbleached paper ground that alternates with a deeper shade of itself, moss
 * for the one dark field, rust for the marks. Where MUSE creates rhythm with
 * contrast, KAGURA creates it with space.
 *
 * 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 typography without photographs, §13-7 inclusions as one
 * sentence.
 *
 * 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.
 * Neither is ever used as a full-bleed background, and on the moss and sumi
 * fields they are replaced by a design-managed light accent rather than dimmed.
 */

:root {
  /* ---- Surfaces -------------------------------------------------------- */
  /* Rotation (inc/display/sections.php): base -> alt -> base -> accent.
     Two unbleached papers carry the page and the moss field is the single
     emphasis, which is why `alt` here is a second paper rather than a
     contrast: the alternation is meant to be felt, not announced. */
  --qwe-surface-base: #f1eee5;
  --qwe-surface-base-ink: #24251f;
  --qwe-surface-alt: #e8e4d7;
  --qwe-surface-alt-ink: #24251f;
  --qwe-surface-inverted: #24251f;
  --qwe-surface-inverted-ink: #f1eee5;
  /* Moss, the fourth beat of the rotation and the ground of the temporary
     notice. White on it is 8.3:1 and it is Qwe-managed, so a facility colour
     can never turn a whole section unreadable. */
  --qwe-surface-accent: #445144;
  --qwe-surface-accent-ink: #ffffff;
  --qwe-surface-media: #1d1e19;
  --qwe-surface-media-ink: #ffffff;

  /* ---- Ink ------------------------------------------------------------- */
  /* Every ink clears 4.5:1 on the unbleached ground; --qwe-ink-faint carries
     real 16px notes in this theme and is not allowed to drift lighter. */
  --qwe-ink: #24251f;
  --qwe-ink-muted: #5b5b52;
  --qwe-ink-faint: #66665c;
  --qwe-ink-inverted: #f1eee5;

  /* ---- Accents --------------------------------------------------------- */
  /* 2026-08-30: 強調色は弁柄(#984b3d)だった。実測すると、トップ10,792pxの
     うちこの色が乗っていたのは客室番号「壱・弐・参」の3字だけで、他のどこにも
     出ていない（色の集計：ページ内の有彩色はこの1色のみ、塗られた面積は
     0.005%）。一方、押す先はすべて苔(#445144)で、献立の面も苔である。
     つまりこのページには強調色が2つあり、片方は3字しか背負っていなかった。
     一度しか出ない色は強調ではなく迷い子なので、苔に寄せて一色にする。
     和の側で赤が土産物屋に見えるのは彩度の問題ではなく、この「量が伴って
     いない」ことのほうが大きい。
     苔は紙(#f1eee5)に対して7.22:1、二枚目の紙(#e8e4d7)に対して6.59:1。
     施設が自分の色を入れれば従来どおりそちらが出る（管理画面で4.5:1を検証）。
     Action: 苔。予約の導線が家の一部として読まれるように。 */
  --qwe-accent-primary: #445144;
  --qwe-accent-action: #445144;
  --qwe-accent-action-ink: #ffffff;

  /* ---- Lines ----------------------------------------------------------- */
  /* Hairlines only. A rule in this design separates; it never frames. */
  --qwe-line: rgba(36, 37, 31, 0.18);
  --qwe-line-strong: rgba(36, 37, 31, 0.46);
  --qwe-line-inverted: rgba(241, 238, 229, 0.26);

  /* ---- Type ------------------------------------------------------------ */
  /* No web font is loaded. Headings are mincho with a full Japanese fallback
     chain ahead of the Latin serif; running text is gothic, because a long
     Japanese paragraph in mincho at 16px stops being readable on screen. */
  --qwe-font-display: "Hiragino Mincho ProN", "Hiragino Mincho Pro",
    "Yu Mincho", YuMincho, "YuMincho", "Noto Serif JP", "Shippori Mincho",
    "Times New Roman", serif;
  --qwe-font-body: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic",
    YuGothic, "Noto Sans JP", Meiryo, sans-serif;
  --qwe-font-label: var(--qwe-font-body);

  /* Smaller ceilings than MUSE: a mincho heading set with open tracking gains
     presence from its spacing, not from its size. Floors are what must
     survive 320px with a Japanese facility name that cannot break inside a
     word. */
  /* 2026-08-30: h2 の伸び率(3.9vw)が h1(3.8vw)より大きく、1440pxでは
     h1=54.7px / h2=54px と**ほぼ同じ**になっていた。実測すると10,670pxの
     あいだ見出しが全部54pxで、どこが大事なのか画面が何も言っていない。
     節見出しを本文寄りまで落として、ヒーローと写真に喋らせる。
     （the-kaku.com の節見出しは28px。写真を大きく、見出しを小さく、が高級の側の作法） */
  --qwe-size-h1: clamp(28px, 4.4vw, 64px);
  --qwe-size-h2: clamp(21px, 2.4vw, 34px);
  --qwe-size-h3: clamp(18px, 1.5vw, 21px);
  --qwe-size-h4: 18px;
  --qwe-size-body: 16px;
  --qwe-size-note: 16px;
  /* 14px, not the 12px MUSE uses. The two carry the same role but not the
     same script: KAGURA's eyebrows are Japanese — 「睦月　／　冬の献立」 — and a
     kanji packs several times the strokes of an uppercase latin letter into the
     same em. At 12px the tracking that makes MUSE's ROOMS / 03 TYPES read as a
     label instead turns 漢字 into grey texture. The guest reading this is often
     not a designer on a large screen. */
  --qwe-size-label: 14px;

  /* Open leading and positive tracking are the KAGURA signature. */
  --qwe-leading-display: 1.5;
  --qwe-leading-body: 1.95;
  --qwe-tracking-display: 0.08em;
  --qwe-tracking-label: 0.22em;
  --qwe-weight-display: 500;
  --qwe-weight-body: 400;

  /* ---- Rhythm ---------------------------------------------------------- */
  /* Taller sections, wider margins and a shorter measure than MUSE: the
     white space is the design. */
  --qwe-section-y: clamp(74px, 10vw, 148px);
  /* Two thirds of the full band rather than MUSE's three fifths: this design
     is made of space, so even a short section keeps more of it. A heading
     over one line still stops being a 534px band. */
  --qwe-section-y-tight: clamp(50px, 6.6vw, 98px);
  --qwe-section-x: clamp(20px, 6vw, 100px);
  --qwe-gap: clamp(18px, 3vw, 44px);
  --qwe-gap-tight: 14px;
  /* rem, not em (see tokens.css): 34rem is 544px at the default text size,
     which is where the 16px note already ended. The lead and the body now
     end there too, instead of 68px further right. */
  --qwe-measure: 34rem;
  /* --qwe-stagger stays at the neutral zero from tokens.css. Offsetting the
     second half of a pair is a MUSE move; here the pair sits on one line. */

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

  /* ---- Media ----------------------------------------------------------- */
  /* Photographs are delivered as supplied. The reference dimmed its hero with
     a brightness filter; here the same legibility is bought with an overlay
     that sits between the photograph and the text, so the facility's picture
     is never altered. */
  /* An even veil that deepens slowly, where MUSE opens dense at the top: the
     hero of this design is taller (802px measured at 1440px) and the text
     block sits lower in it. The floor is what a bright photograph needs, not
     what this facility's photograph happens to need — at 0.30 the eyebrow's
     worst pixel measured 3.79:1 against white. Re-measured with the same
     procedure (hide .qwe-hero__inner, read the background pixels at 1440px):
     eyebrow 4.61:1 worst / 11.78:1 median, heading 4.52:1 worst, lead 6.36:1
     worst, footnote 7.28:1 worst. The photograph itself is untouched.

     その計測は1440pxだけで行っていた。狭い幅では object-fit:cover の
     切り取りが変わり、眉見出しの下に明るい霧の部分が来る。公開中の見本を
     塗られた画素で測り直したところ、320pxで3.61、375pxで3.89だった
     (390px以上は合格)。眉見出しは hero の16〜20%にあり、この覆いの
     いちばん薄いところ——18%の停止点——にちょうど乗っている。
     そこだけ 0.44 から 0.54 へ上げる。0% は 0.42 のままなので、
     写真の上端の明るさは変えていない。 */
  --qwe-overlay-scrim: linear-gradient(180deg, rgba(29, 30, 25, 0.42) 0%, rgba(29, 30, 25, 0.54) 18%, rgba(29, 30, 25, 0.64) 45%, rgba(29, 30, 25, 0.78) 100%);
  --qwe-overlay-panel: rgba(29, 30, 25, 0.50);
  --qwe-overlay-ink: #ffffff;
  --qwe-ratio-hero: 16 / 9;
  --qwe-ratio-portrait: 3 / 4;
  --qwe-ratio-landscape: 3 / 2;
  --qwe-ratio-square: 1 / 1;

  /* ---- Motion ---------------------------------------------------------- */
  /* Slower and softer than MUSE, and still restrained: one long fade, never
     a sequence. */
  --qwe-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --qwe-duration: 420ms;
}

/*
 * Dark surfaces re-point the shared ink and accent roles.
 *
 * A component that writes var(--qwe-ink-muted) for a note must stay readable
 * on moss and on sumi, and the facility's emphasis colour — guaranteed dark,
 * because it was measured against white — must not be printed onto a dark
 * 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: #b9b6a9;
  --qwe-ink-faint: #9c998d;
  --qwe-line: var(--qwe-line-inverted);
  --qwe-line-strong: rgba(241, 238, 229, 0.5);
  /* 苔を薄浅葱寄りの若草へ持ち上げる：墨(#24251f)に対して8.68:1。
     以前はここだけ樺色(#dda78f)で、紙の上と暗い面とで色の系統が変わっていた。 */
  --qwe-accent-primary: #b6c7b2;
}

/*
 * 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 an eyebrow or a footnote to 54% white and then prints it
 * onto an unknown photograph. Measured on the equivalent MUSE hero, that
 * reached 1.08:1; no scrim can repair it, because the text itself is the grey
 * half of the problem. 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);
}

[data-surface="accent"] {
  --qwe-ink: var(--qwe-surface-accent-ink);
  --qwe-ink-muted: #d8dbd3;
  --qwe-ink-faint: #cbcfc6;
  --qwe-line: rgba(255, 255, 255, 0.28);
  --qwe-line-strong: rgba(255, 255, 255, 0.5);
  /* 若草をもう一段淡く。苔の面(#445144)に対して6.42:1。 */
  --qwe-accent-primary: #dbe4d6;
  /* The action colour is the moss this surface is painted with, so a button
     on it would disappear. On this field the action inverts: paper ground,
     moss label. */
  --qwe-accent-action: var(--qwe-surface-base);
  --qwe-accent-action-ink: var(--qwe-surface-accent);
}

/* 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 hairlines, the row padding) 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 KAGURA 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 set as typography, without photographs.
 * parts/room-list.php emits data-qwe-layout="index" and renders no media, so
 * a row carries the whole entry. Wide enough for two columns, the name reads
 * on the left and the specification, price and link on the right. Dense
 * placement is what lifts the second column back up to the first row; where
 * it is not honoured the row falls back to the stacked column, which is the
 * mobile layout and still correct.
 */
@media (min-width: 900px) {
  .qwe-room-list[data-qwe-layout="index"] .qwe-room-card__body {
    display: grid;
    /* 2026-08-30: 0.85fr / 1.15fr だと1440pxで左508px・右687pxになり、
       左は14pxの番号と21pxの室名だけを載せて、その下に432pxの空白が残った
       （いさりは409px）。写真が無いからではない——この目次には元から写真が
       無い——名前の欄が中身に対して広すぎるだけだった。空白が大きいほど
       「画像が抜けている」に見える。
       0.42fr にすると1440pxで左345px・900pxで左220px。「潮見の間 ふたり」
       （21px明朝で約181px）が最小幅でも1行に収まる。 */
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
    grid-auto-flow: row dense;
    column-gap: clamp(28px, 5vw, 72px);
    row-gap: var(--qwe-gap-tight);
    align-items: start;
  }

  .qwe-room-list[data-qwe-layout="index"] .qwe-room-card__number,
  .qwe-room-list[data-qwe-layout="index"] .qwe-room-card__name,
  .qwe-room-list[data-qwe-layout="index"] .qwe-room-card__latin {
    grid-column: 1;
  }

  .qwe-room-list[data-qwe-layout="index"] .qwe-room-card__specline,
  .qwe-room-list[data-qwe-layout="index"] .qwe-room-card__catch,
  .qwe-room-list[data-qwe-layout="index"] .qwe-room-card__price,
  .qwe-room-list[data-qwe-layout="index"] .qwe-room-card__status,
  .qwe-room-list[data-qwe-layout="index"] .qwe-room-card__more {
    grid-column: 2;
  }
}

/* The number that opens a row is a rust mark, as in the reference index. On
   the moss and sumi fields the same role resolves to clay. */
.qwe-room-list[data-qwe-layout="index"] .qwe-room-card__number {
  color: var(--qwe-accent-primary);
}

/* A row is given more air than the shared rule allows: the space between the
   entries is what makes this list read as a page rather than as a table. */
.qwe-room-list[data-qwe-layout="index"] > .qwe-room-list__item {
  padding-block: clamp(26px, 3.4vw, 46px);
}