/* =========================================================
   Studio AKARI — Design Tokens
   Single source of truth. Import this on every page:
     <link rel="stylesheet" href="/tokens.css">
   ========================================================= */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "M PLUS 1p";
  src: url("fonts/MPLUS1p-Thin.ttf") format("truetype");
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "M PLUS 1p";
  src: url("fonts/MPLUS1p-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "M PLUS 1p";
  src: url("fonts/MPLUS1p-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "M PLUS 1p";
  src: url("fonts/MPLUS1p-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "M PLUS 1p";
  src: url("fonts/MPLUS1p-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "M PLUS 1p";
  src: url("fonts/MPLUS1p-ExtraBold.ttf") format("truetype");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "M PLUS 1p";
  src: url("fonts/MPLUS1p-Black.ttf") format("truetype");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-Variable.ttf") format("truetype-variations");
  font-weight: 100 1000; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-Italic-Variable.ttf") format("truetype-variations");
  font-weight: 100 1000; font-style: italic; font-display: swap;
}

:root {
  /* ---------- Core palette (per Brand Colors AKARI.pdf) ---------- */
  --akari-ink:     #231f20;  /* core black, never pure #000 */
  --akari-paper:   #ffffff;  /* pure white */
  --akari-orange:  #fcbb67;  /* warm, primary accent */
  --akari-yellow:  #ffda55;  /* bright, attention */
  --akari-blue:    #a8e0f9;  /* soft sky, calm */
  --akari-pink:    #f8b1b3;  /* muted coral */

  /* Tints (paper-mixed, for large fills / hover states) */
  --akari-orange-tint: #fee4c3;
  --akari-yellow-tint: #fff0aa;
  --akari-blue-tint:   #daf2fd;
  --akari-pink-tint:   #fcdadb;

  /* Shades (ink-mixed, for type-on-color / borders) */
  --akari-orange-deep: #c98a3a;
  --akari-yellow-deep: #c99d1f;
  --akari-blue-deep:   #5ba8ca;
  --akari-pink-deep:   #c57c7e;

  /* Neutral ladder (derived from ink, warm cast) */
  --akari-ink-95: #2e2a2b;
  --akari-ink-80: #4a4547;
  --akari-ink-60: #767173;
  --akari-ink-40: #a8a4a5;
  --akari-ink-20: #d8d5d6;
  --akari-ink-10: #eeecec;
  --akari-ink-05: #f7f6f5;
  --akari-cream:  #faf7f2;  /* off-paper, default page bg */

  /* ---------- Semantic ---------- */
  --bg:            var(--akari-cream);
  --surface:       var(--akari-paper);
  --surface-sunk:  var(--akari-ink-05);
  --text:          var(--akari-ink);
  --text-muted:    var(--akari-ink-60);
  --text-subtle:   var(--akari-ink-40);
  --line:          var(--akari-ink-10);
  --line-strong:   var(--akari-ink);

  --accent:        var(--akari-orange);
  --accent-2:      var(--akari-blue);
  --accent-3:      var(--akari-pink);
  --accent-4:      var(--akari-yellow);

  /* ---------- Type ---------- */
  --font-display:  "M PLUS 1p", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  --font-body:     "DM Sans", "M PLUS 1p", system-ui, -apple-system, sans-serif;
  --font-jp:       "M PLUS 1p", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-mono:     ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale — generous, editorial */
  --fs-display:   clamp(56px, 9vw, 128px);
  --fs-h1:        clamp(40px, 5.5vw, 72px);
  --fs-h2:        clamp(30px, 3.8vw, 48px);
  --fs-h3:        clamp(22px, 2.4vw, 30px);
  --fs-h4:        20px;
  --fs-body-lg:   18px;
  --fs-body:      16px;
  --fs-small:     14px;
  --fs-caption:   12px;
  --fs-eyebrow:   11px;

  --lh-tight:     1.05;
  --lh-snug:      1.2;
  --lh-normal:    1.45;
  --lh-relaxed:   1.6;

  --ls-display:  -0.02em;
  --ls-tight:    -0.01em;
  --ls-normal:    0;
  --ls-eyebrow:   0.14em;

  /* ---------- Spacing (4px base) ---------- */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ---------- Radius (rounded, friendly — matches wordmark) ---------- */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  22px;
  --r-xl:  32px;
  --r-2xl: 48px;
  --r-pill: 999px;

  /* ---------- Shadow (soft + offset-stack signature) ---------- */
  --shadow-xs: 0 1px 2px rgba(35, 31, 32, 0.06);
  --shadow-sm: 0 2px 6px rgba(35, 31, 32, 0.06), 0 1px 2px rgba(35, 31, 32, 0.04);
  --shadow-md: 0 8px 24px -8px rgba(35, 31, 32, 0.12), 0 2px 6px rgba(35, 31, 32, 0.05);
  --shadow-lg: 0 24px 48px -16px rgba(35, 31, 32, 0.18), 0 8px 16px -8px rgba(35, 31, 32, 0.08);

  /* Signature: offset ink drop (mirrors logo "Blue/Orange" variants) */
  --drop-sm: 3px 3px 0 0 var(--akari-ink);
  --drop-md: 6px 6px 0 0 var(--akari-ink);
  --drop-lg: 10px 10px 0 0 var(--akari-ink);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    140ms;
  --dur-base:    240ms;
  --dur-slow:    420ms;

  /* ---------- Layout ---------- */
  --container:   1200px;
  --container-narrow: 840px;
  --border-1:    1.5px solid var(--akari-ink);
  --border-2:    2.5px solid var(--akari-ink);
}

/* ---------- Base reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }

/* ---------- Utilities ---------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.mono { font-family: var(--font-mono); font-size: var(--fs-small); }