/* ============================================================
   JIMOTT Travel — Design Tokens  "YOHAKU / 余白"
   Single source of truth for colour, type, space, line, motion.
   Do NOT hard-code colour values in page CSS — reference these.
   Ref: docs/デザインシステム_JIMOTT_Travel.md §2–4
   ============================================================ */

:root {
  /* ---- 2. Colour -------------------------------------------- */
  --washi:        #FAF8F5;   /* base background (unbleached paper) */
  --washi-warm:   #F3EFE8;   /* alternating section background     */
  --sumi:         #1A1817;   /* body text (ink)                    */
  --sumi-deep:    #0E0D0C;   /* dark sections / footer             */
  --shu:          #D1241A;   /* PRIMARY accent (logo vermilion)    */
  --shu-deep:     #A81C14;   /* vermilion hover / active           */
  --kin:          #C9A962;   /* secondary (gold) — lines & marks   */
  --kin-light:    #E8D5A3;   /* gold light (headings on dark)      */
  --koke:         #7D8A7A;   /* tertiary (moss) — nature / success */
  --hai:          #8A857D;   /* muted text (ash)                   */
  --line:         #E5DFD5;   /* hairline rule                      */
  --ink-on-dark:  #F5F1EA;   /* body text on dark                  */
  --hai-on-dark:  #A39D93;   /* muted text on dark                 */

  /* Semantic aliases (page code should prefer these) */
  --bg:            var(--washi);
  --bg-alt:        var(--washi-warm);
  --bg-dark:       var(--sumi-deep);
  --text:          var(--sumi);
  --text-muted:    var(--hai);
  --accent:        var(--shu);
  --accent-hover:  var(--shu-deep);
  --rule:          var(--line);

  /* Vermilion tint for soft fills (badges, hovers) */
  --shu-tint:     rgba(209, 36, 26, 0.08);
  --shadow-soft:  0 18px 48px -28px rgba(26, 24, 23, 0.45);

  /* ---- 3. Typography ---------------------------------------- */
  --font-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-body:    "Noto Serif", Georgia, "Times New Roman", serif;
  --font-ui:      "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Fluid type scale (clamp min / preferred / max) */
  --fs-display: clamp(2.4rem, 5vw, 4.5rem);   /* H1 / hero        */
  --fs-h1:      clamp(2.4rem, 5vw, 4.5rem);
  --fs-h2:      clamp(2rem, 3.6vw, 3.2rem);
  --fs-h3:      clamp(1.5rem, 2.4vw, 2rem);
  --fs-h4:      clamp(1.2rem, 1.6vw, 1.4rem);
  --fs-lead:    clamp(1.15rem, 1.5vw, 1.4rem);
  --fs-body:    1.05rem;
  --fs-small:   0.9rem;
  --fs-eyebrow: 0.72rem;
  --fs-ui:      0.9rem;
  --fs-price:   clamp(2.5rem, 4vw, 3.2rem);
  --fs-quote:   clamp(1.4rem, 2.4vw, 1.6rem);
  --fs-stat:    clamp(2.6rem, 5vw, 3.8rem);

  --lh-display: 1.12;
  --lh-body:    1.85;
  --lh-tight:   1.25;

  --ls-display: -0.01em;
  --ls-eyebrow: 0.18em;
  --ls-ui:      0.06em;
  --ls-button:  0.14em;

  --measure:    34em;   /* max body line length */

  /* ---- 4. Space (base 8px) ---------------------------------- */
  --space-1:  8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  48px;
  --space-6:  64px;
  --space-7:  96px;
  --space-8:  128px;
  --space-9:  160px;
  --space-10: 192px;
  --space-11: 256px;
  --space-12: 320px;

  --section-y: clamp(96px, 12vw, 160px);   /* generous section rhythm */
  --gutter:    clamp(20px, 5vw, 48px);      /* container side padding  */

  /* ---- 4. Layout ------------------------------------------- */
  --container:        1200px;
  --container-narrow: 720px;
  --grid-cols: 12;

  /* ---- 4. Radius & Line ------------------------------------ */
  --radius-0:  0;         /* default — straight, composed          */
  --radius-sm: 2px;       /* form fields & cards only              */
  --border-hairline: 1px solid var(--line);
  --border-ink:      1px solid var(--sumi);

  /* ---- 7. Motion ------------------------------------------- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --transition:      0.3s var(--ease-out);
  --transition-slow: 0.6s var(--ease-out);
  --reveal-shift: 12px;

  /* Fixed header height (used for sticky offsets, scroll-margin) */
  --header-h: 76px;
}