/* Kodawari Design System — core tokens */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Inter+Tight:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Noto+Serif+JP:wght@200;300;400&display=swap');

:root {
  color-scheme: light;
  /* ===== COLOR — BASE ===== */

  /* Paper (warm off-white, unbleached washi) */
  --paper:        #F5F1E8;
  --paper-2:      #EEE8DA;
  --paper-3:      #E4DCC8;

  /* Ink (warm near-black sumi) */
  --ink:          #1A1713;
  --ink-2:        #4A4239;
  --ink-3:        #8A8074;
  --ink-4:        #B8AE9E;

  /* Accent — persimmon / kaki */
  --accent:       #C8462C;
  --accent-deep:  #9E3520;
  --accent-soft:  #E89A87;
  --accent-wash:  #F6E5DF;

  /* Semantic */
  --positive:     #5A6B3F;  /* moss */
  --positive-soft:#DDE2CF;
  --warning:      #B8844A;  /* clay */
  --warning-soft: #EEDBC2;
  --negative:     #6B3A30;  /* earth red */
  --negative-soft:#E8CFC7;

  /* Hairline */
  --hairline:        rgba(26, 23, 19, 0.12);
  --hairline-strong: rgba(26, 23, 19, 0.24);

  /* ===== SEMANTIC COLOR ===== */
  --bg:           var(--paper);
  --bg-raised:    var(--paper-2);
  --bg-sunken:    var(--paper-3);
  --fg:           var(--ink);
  --fg-2:         var(--ink-2);
  --fg-3:         var(--ink-3);
  --fg-mute:      var(--ink-4);
  --border:       var(--hairline);
  --border-strong:var(--hairline-strong);
  --link:         var(--accent);
  --link-hover:   var(--accent-deep);

  /* ===== TYPE FAMILIES ===== */
  --font-display: 'Fraunces', 'GT Sectra', Georgia, serif;
  --font-body:    'Inter Tight', 'Söhne', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-jp:      'Noto Serif JP', serif;

  /* ===== TYPE SCALE (px) ===== */
  --fs-micro:  11px;
  --fs-xs:     12px;
  --fs-sm:     14px;
  --fs-base:   16px;
  --fs-md:     18px;
  --fs-lg:     20px;
  --fs-xl:     24px;
  --fs-2xl:    32px;
  --fs-3xl:    44px;
  --fs-4xl:    64px;
  --fs-5xl:    88px;
  --fs-6xl:    128px;

  /* ===== LINE HEIGHT / TRACKING ===== */
  --lh-tight: 1.05; /* @kind font */
  --lh-snug:  1.25; /* @kind font */
  --lh-base:  1.55; /* @kind font */
  --lh-loose: 1.75; /* @kind font */

  --track-tight:   -0.02em;
  --track-display: -0.015em;
  --track-base:    0; /* @kind font */
  --track-wide:    0.08em;
  --track-eyebrow: 0.14em;

  /* ===== SPACING (8px base) ===== */
  --sp-0:   0; /* @kind spacing */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   96px;
  --sp-10: 128px;

  /* ===== RADII ===== */
  --radius-sm:  2px;
  --radius-md:  4px;
  --radius-lg:  8px;
  --radius-pill: 9999px;

  /* ===== SHADOWS ===== */
  --shadow-none: none;
  --shadow-sm:   0 1px 2px rgba(26, 23, 19, 0.06);
  --shadow-md:   0 1px 2px rgba(26, 23, 19, 0.06), 0 8px 24px -12px rgba(26, 23, 19, 0.10);
  --shadow-lg:   0 2px 4px rgba(26, 23, 19, 0.05), 0 24px 48px -20px rgba(26, 23, 19, 0.14);

  /* ===== MOTION ===== */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in: cubic-bezier(0.55, 0.06, 0.68, 0.19); /* @kind other */
  --dur-fast: 160ms; /* @kind other */
  --dur-base: 240ms; /* @kind other */
  --dur-slow: 400ms; /* @kind other */
  --dur-narrative: 800ms; /* @kind other */

  /* ===== LAYOUT ===== */
  --maxw:       1280px;
  --maxw-prose: 680px;
  --gutter:     24px;
}

/* Dark mode inversion */
[data-theme="dark"] {
  --paper:   #15120E;
  --paper-2: #1E1A14;
  --paper-3: #2A2520;
  --ink:     #E8E2D4;
  --ink-2:   #B8AE9E;
  --ink-3:   #8A8074;
  --ink-4:   #5A5246;
  --accent:  #D9533A;
  --accent-deep: #E8745E;
  --hairline: rgba(232, 226, 212, 0.10);
  --hairline-strong: rgba(232, 226, 212, 0.22);
}

/* ===== BASE ===== */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ===== SEMANTIC TYPE ===== */
.display-1, h1.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 8vw, var(--fs-6xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  text-wrap: balance;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 5.5vw, var(--fs-4xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  text-wrap: balance;
  margin: 0 0 var(--sp-5);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-display);
  text-wrap: balance;
  margin: 0 0 var(--sp-4);
}

h3, .h3 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
  margin: 0 0 var(--sp-3);
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-2);
}

p, .body {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg);
  text-wrap: pretty;
  margin: 0 0 var(--sp-4);
}

.lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  text-wrap: pretty;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

.section-number {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--fg-3);
  letter-spacing: var(--track-wide);
}

.caption {
  font-size: var(--fs-sm);
  color: var(--fg-3);
  line-height: var(--lh-snug);
}

.pull-quote {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--fg);
}

code, .mono, .metric {
  font-family: var(--font-mono);
  font-size: 0.94em;
  font-feature-settings: "tnum" 1, "zero" 1;
}

.metric-lg {
  font-family: var(--font-mono);
  font-size: var(--fs-2xl);
  font-weight: 500;
  letter-spacing: var(--track-tight);
}

.jp {
  font-family: var(--font-jp);
  font-weight: 200;
}

a, .link {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
a:hover, .link:hover {
  color: var(--link-hover);
  border-bottom-color: var(--link-hover);
}

/* ===== UTILITIES ===== */
.hairline { border-bottom: 1px solid var(--border); }
.hairline-t { border-top: 1px solid var(--border); }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.prose { max-width: var(--maxw-prose); }