/* SHUNPO — Design Tokens
 * Source: SHUNPO-BRAND.pdf + Belmard.OS production implementation
 * ----------------------------------------------------------------
 * The brandbook defines 8 named colors across primary/secondary plus
 * a dominance rule (Shiro 38% · Fushimi 23% · Fuji 17% · rest 8% each).
 * Belmard extended that core with three working accents needed for
 * data UI (olive for "inclus/safe", seal re-skinned to tenku, sumac
 * for warm highlights). Both sets ship together here.
 */

/* ───────── BRAND FONTS ─────────
 * Calibre — primary. Licensed OTF shipped in /fonts.
 * SF Pro Display — secondary. Apple licensing allows web use here.
 * Noto Sans SC — Japanese/CJK accent.
 * Minion Pro, swissel — optional editorial accents. */
@font-face { font-family: "Calibre"; src: url("fonts/CalibreThin.otf") format("opentype");         font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Calibre"; src: url("fonts/CalibreThinItalic.otf") format("opentype");   font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: "Calibre"; src: url("fonts/CalibreLight.otf") format("opentype");        font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Calibre"; src: url("fonts/CalibreLightItalic.otf") format("opentype");  font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Calibre"; src: url("fonts/CalibreRegular.otf") format("opentype");      font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Calibre"; src: url("fonts/CalibreRegularItalic.otf") format("opentype");font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Calibre"; src: url("fonts/CalibreMedium.otf") format("opentype");       font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Calibre"; src: url("fonts/CalibreMediumItalic.otf") format("opentype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Calibre"; src: url("fonts/CalibreSemibold.otf") format("opentype");     font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Calibre"; src: url("fonts/CalibreSemiboldItalic.otf") format("opentype");font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Calibre"; src: url("fonts/CalibreBold.otf") format("opentype");         font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Calibre"; src: url("fonts/CalibreBoldItalic.otf") format("opentype");   font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Calibre"; src: url("fonts/CalibreBlack.otf") format("opentype");        font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Calibre"; src: url("fonts/CalibreBlackItalic.otf") format("opentype");  font-weight: 900; font-style: italic; font-display: swap; }

@font-face { font-family: "SF Pro Display"; src: url("fonts/SF-Pro-Display-Ultralight.ttf") format("truetype"); font-weight: 100; font-display: swap; }
@font-face { font-family: "SF Pro Display"; src: url("fonts/SF-Pro-Display-Thin.ttf") format("truetype");       font-weight: 200; font-display: swap; }
@font-face { font-family: "SF Pro Display"; src: url("fonts/SF-Pro-Display-Light.ttf") format("truetype");      font-weight: 300; font-display: swap; }
@font-face { font-family: "SF Pro Display"; src: url("fonts/SF-Pro-Display-Regular.ttf") format("truetype");    font-weight: 400; font-display: swap; }
@font-face { font-family: "SF Pro Display"; src: url("fonts/SF-Pro-Display-Medium.ttf") format("truetype");     font-weight: 500; font-display: swap; }
@font-face { font-family: "SF Pro Display"; src: url("fonts/SF-Pro-Display-Semibold.ttf") format("truetype");   font-weight: 600; font-display: swap; }
@font-face { font-family: "SF Pro Display"; src: url("fonts/SF-Pro-Display-Bold.ttf") format("truetype");       font-weight: 700; font-display: swap; }
@font-face { font-family: "SF Pro Display"; src: url("fonts/SF-Pro-Display-Heavy.ttf") format("truetype");      font-weight: 800; font-display: swap; }
@font-face { font-family: "SF Pro Display"; src: url("fonts/SF-Pro-Display-Black.ttf") format("truetype");      font-weight: 900; font-display: swap; }

@font-face { font-family: "Noto Sans SC"; src: url("fonts/NotoSansSC-VariableFont_wght.ttf") format("truetype-variations"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Minion Pro"; src: url("fonts/MinionPro-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Swissel"; src: url("fonts/swissel.ttf") format("truetype"); font-weight: 400; font-display: swap; }

:root {
  /* ────────── PRIMARY (brandbook) ───────── */
  --fuji-night:    #1E2629;   /* ink · dark sections · primary text */
  --blue-tenku:    #2B718C;   /* structural · links · tertiary accent */
  --shiro:         #E5DFD3;   /* cream · secondary surface */
  --fushimi-glow:  #B94532;   /* PRIMARY ACCENT — shuriken red */

  /* ───────── SECONDARY (brandbook) ────────── */
  --ink-shadow:    #474747;   /* neutral warm grey */
  --hikari-frost:  #BDC8CC;   /* cool light · dividers */
  --kome:          #F3F0E9;   /* rice paper · DOMINANT BACKGROUND */
  --kurenai-blush: #B05F60;   /* soft red · supportive accent */

  /* ───────── EXTENDED WORKING PALETTE (Belmard.OS) ─────────
     Kept compatible with brandbook; used for data UI states. */
  --kome-alt:      #EDE8DC;   /* alternate section bg */
  --bone:          #F8F5EE;   /* near-white surface */
  --white-smoke:   #F1F1F1;

  --brick:         #9C3A2B;   /* Fushimi darkened for text/CTA */
  --brick-soft:    #C46A5A;
  --brick-glow:    #E2A597;

  --olive:         #5C6B3A;   /* safe / inclus / positive */
  --olive-soft:    #8A9865;
  --olive-pale:    #D6DCC5;

  --seal:          #2A4A5C;   /* deepened tenku */
  --seal-soft:     #5C7D90;

  --sumac:         #C88A2E;   /* warm highlight · sakura gold */
  --sumac-pale:    #ECD7A7;

  --ink-warm:      #5B5347;
  --ink-soft:      #847761;
  --line:          #D8D2C3;   /* default border on kome */

  /* ───────── TYPOGRAPHY ─────────
     All families are the real brand files, shipped in /fonts. */
  --font-display:   "Calibre", "Archivo", "Arial Black", sans-serif;
  --font-body:      "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
  --font-editorial: "Minion Pro", "Instrument Serif", ui-serif, Georgia, serif;
  --font-mono:      "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --font-jp:        "Noto Sans SC", "Noto Serif JP", ui-serif, serif;

  /* ───────── TYPE SCALE ─────────
     Calibrated for editorial density. Hero scales with viewport. */
  --fs-hero:    clamp(42px, 6.4vw, 88px);
  --fs-display: clamp(32px, 4.2vw, 56px);
  --fs-title:   clamp(26px, 3vw,   40px);
  --fs-h3:      clamp(20px, 2.2vw, 26px);
  --fs-body-lg: 17px;
  --fs-body:    15px;
  --fs-small:   13px;
  --fs-micro:   10.5px;   /* uppercase meta labels */

  --lh-tight:   1.02;
  --lh-snug:    1.2;
  --lh-body:    1.55;
  --lh-prose:   1.65;

  --ls-tight:   -0.012em;
  --ls-loose:   0.18em;    /* .widest2 — uppercase meta tracking */

  /* ───────── SPATIAL ─────────
     Bento rhythm: 4/8/12/16/24/32/48/64/96. */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ───────── RADII ─────────
     Generous but calm — bento is the core radius. */
  --r-xs:     12px;
  --r-sm:     14px;
  --r-md:     16px;
  --r-bento:  18px;
  --r-lg:     20px;
  --r-xl:     24px;
  --r-pill:   99rem;

  /* ───────── SHADOWS ───────── */
  --shadow-card:    0 1px 0 rgba(30,38,41,0.04) inset, 0 0 0 1px rgba(30,38,41,0.06);
  --shadow-bento:   0 1px 2px rgba(30,38,41,0.04), 0 12px 32px -20px rgba(30,38,41,0.15);
  --shadow-soft:    0 10px 30px -22px rgba(30,38,41,0.15);
  --shadow-hero:    0 20px 50px -30px rgba(30,38,41,0.20);
  --shadow-glow:    0 12px 30px -18px rgba(156,58,43,0.40);
  --shadow-summary: 0 20px 50px -28px rgba(30,38,41,0.30);

  /* ───────── MOTION ─────────
     Easing is the Apple-ish out-quart — brand wants "déplacement
     instantané" but never abrupt. */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --ease-soft:  cubic-bezier(0.45, 0, 0.55, 1);
  --dur-fast:   180ms;
  --dur-base:   280ms;
  --dur-slow:   600ms;

  /* ───────── GRADIENTS (brandbook) ───────── */
  --grad-paper: linear-gradient(135deg, #F3F0E9 0%, #E5DFD3 45%, #2B718C 100%);
  --grad-deep:  linear-gradient(135deg, #F3F0E9 0%, #E5DFD3 35%, #2B718C 70%, #1E2629 100%);
  --grad-heat:  linear-gradient(135deg, #FEFEFE 0%, #B94532 45%, #1E2629 85%, #474747 100%);
  --grad-footer:linear-gradient(195deg, #474747, #1E2629 40%);
}

/* Grain overlay — "kome rice paper" editorial texture.
 * Apply via .grain::after on any positioned element. */
.grain { position: relative; }
.grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Optical adjustments for uppercase display type. */
.u-caps {
  text-transform: uppercase;
  letter-spacing: -0.005em;
  font-feature-settings: "case" on;
}

/* Editorial italic inside uppercase display — a signature move. */
.u-accent {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.01em;
}

/* Micro meta tags: [MOT-FR ・カタカナ ・01] */
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(30, 38, 41, 0.04);
  border: 1px solid rgba(30, 38, 41, 0.08);
  color: var(--ink-warm);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  font-family: var(--font-body);
}
.section-tag .jp {
  font-family: var(--font-jp);
  color: var(--fushimi-glow);
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 11px;
}
.section-tag .num {
  color: rgba(30, 38, 41, 0.4);
  font-variant-numeric: tabular-nums;
}