/* ======================================================================
   YUKI NO KUNI — DESIGN TOKENS
   Single source of truth for color, type, spacing, motion.
   Load this BEFORE any other stylesheet.
====================================================================== */

:root{
  /* ===== PAPER (warm light surfaces) ===== */
  --paper-0:#fcf9ef;   /* masthead, cards lifted above page */
  --paper:#f4efe1;     /* primary page background */
  --paper-1:#ede6d2;   /* alternating section, card hover */
  --paper-2:#e2dbc1;   /* image placeholder, deepest paper */
  --paper-deep:#d6cdaf;

  /* ===== INK (warm dark) ===== */
  --ink:#13120e;       /* primary type, brand mark, dark sections */
  --ink-2:#3a382e;     /* body copy, decks, secondary type */
  --ink-3:#4a4536;     /* captions, eyebrows, italic metadata */
  --ink-4:#6e6957;     /* separators, dividers, micro type */

  /* ===== RULES ===== */
  --rule:rgba(19,18,14,0.14);
  --rule-2:rgba(19,18,14,0.07);

  /* ===== ACCENTS ===== */
  --pine:#1f3a2e;
  --pine-deep:#0b1d14;
  --vermillion:#a8331f;       /* brand punctuation — used <1% per page */
  --vermillion-soft:#c14a36;  /* on dark grounds (better contrast) */
  --gold:#a07a26;             /* reserved tier / footer subhead */

  /* ===== TYPE FAMILIES ===== */
  --serif:'Cormorant Garamond', 'Times New Roman', serif;
  --jp:'Noto Serif JP', serif;
  --sans:'Inter', system-ui, -apple-system, sans-serif;
  --mono:'JetBrains Mono', Menlo, monospace;

  /* ===== TYPE SCALE ===== */
  --t-display-xl: clamp(58px, 9vw, 132px);
  --t-display-l:  clamp(38px, 4.6vw, 64px);
  --t-display-m:  clamp(28px, 3vw, 40px);
  --t-title:      22px;
  --t-lede:       21px;
  --t-body:       17px;
  --t-caption:    14px;
  --t-ui:         14px;
  --t-eyebrow:    11px;

  /* ===== SPACING (8pt with editorial overrides) ===== */
  --s-2:8px;
  --s-3:14px;
  --s-4:20px;
  --s-5:28px;
  --s-6:40px;
  --s-7:56px;
  --s-8:80px;
  --s-9:120px;
  --s-10:160px;

  /* ===== CONTAINERS ===== */
  --col-narrow:920px;
  --col:1320px;
  --col-wide:1560px;
  --pad-x:64px;

  /* ===== MOTION ===== */
  --ease:cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:cubic-bezier(0.16, 1, 0.3, 1);
  --t-micro:300ms;
  --t-macro:1000ms;

  /* ===== ELEVATION ===== */
  --shadow-card:0 8px 24px -12px rgba(19,18,14,0.18);
  --shadow-lift:0 24px 60px -20px rgba(19,18,14,0.25);
}

/* ===== reset / base ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--t-body);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern","liga","calt","onum";
  overflow-x:hidden;
  position:relative;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--vermillion);color:var(--paper-0)}

/* paper texture overlay (very subtle) */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(168,51,31,0.015) 1px, transparent 1px),
    radial-gradient(circle at 80% 70%, rgba(19,18,14,0.018) 1px, transparent 1px);
  background-size:24px 24px, 32px 32px;
  opacity:0.6;mix-blend-mode:multiply;
}

/* reduced-motion respect */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
  .snowfall{display:none}
}

/* ===== container utilities ===== */
.col{max-width:var(--col);margin:0 auto;padding:0 var(--pad-x);position:relative;z-index:2}
.col-narrow{max-width:var(--col-narrow);margin:0 auto;padding:0 var(--pad-x);position:relative;z-index:2}
.col-wide{max-width:var(--col-wide);margin:0 auto;padding:0 var(--pad-x);position:relative;z-index:2}
@media(max-width:780px){
  :root{--pad-x:28px}
}