/* ============================================================================
   Kami Design System — Colors & Type
   ----------------------------------------------------------------------------
   A single constraint sheet, transcribed from references/design.md and
   references/tokens.json in tw93/Kami. Pull this in once and you get the
   complete typographic + chromatic vocabulary the system expects.
   ============================================================================ */

/* ----- Fonts -------------------------------------------------------------- */

/* JetBrains Mono is shipped with the design system (covers code + small UI). */
@font-face {
  font-family: "JetBrains Mono";
  src: url("./fonts/JetBrainsMono.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

/* Charter is the English body / display serif. It is bundled on macOS/iOS;
   on other platforms we fall back through Georgia → Palatino → Times.
   If you need Charter everywhere, replace this @font-face with a hosted file. */
@font-face {
  font-family: "Charter";
  src: local("Charter"), local("Charter Roman"),
       local("Georgia"); /* graceful fallback */
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

/* ----- Root tokens -------------------------------------------------------- */

:root {
  /* ---- Surface (warm parchment family — NEVER pure white) ---- */
  --parchment:     #f5f4ed;   /* page background — emotional foundation */
  --ivory:         #faf9f5;   /* cards, lifted containers (brighter than parchment) */
  --warm-sand:     #e8e6dc;   /* default button surface, divider fill */
  --dark-surface:  #30302e;   /* warm charcoal — dark-theme containers */
  --deep-dark:     #141413;   /* dark-theme page background (slight olive undertone) */

  /* ---- Brand (single accent — Ink Blue, ≤ 5% of any page) ---- */
  --brand:         #1B365D;   /* CTAs, accents, brand emphasis */
  --brand-light:   #2D5A8A;   /* links on dark surfaces, hover lift */
  --brand-tint:    #EEF2F7;   /* 0.08 solid — default tag (most restrained) */
  --brand-tint-strong: #E4ECF5; /* 0.18 solid — standard tag */
  --brand-tint-deep:   #D6E1EE; /* 0.30 solid — left edge of gradient brush */

  /* ---- Text (4 warm-toned tiers, R≥G>B, never cool grays) ---- */
  --near-black:    #141413;   /* primary text */
  --dark-warm:     #3d3d3a;   /* secondary text, table headers, links */
  --olive:         #504e49;   /* subtext, captions, descriptions */
  --stone:         #6b6a64;   /* tertiary — dates, metadata */

  /* ---- Border ---- */
  --border:        #e8e6dc;   /* section dividers, card borders */
  --border-soft:   #e5e3d8;   /* row separators, subtle dividers */

  /* ---- Font stacks (single-serif system: --sans equals --serif) ---- */
  --serif: Charter, Georgia, "TsangerJinKai02",
           "Source Han Serif SC", "Noto Serif CJK SC",
           "Songti SC", Palatino, serif;
  --sans:  var(--serif);
  --mono:  "JetBrains Mono", "Fira Code", "SF Mono",
           Consolas, Monaco, monospace;

  /* ---- Type scale (screen px ≈ print pt × 1.33) ---- */
  --fs-display:  54px;   /* Cover title / one-pager hero (print 36pt) */
  --fs-h1:       30px;   /* Chapter titles (print 22pt) */
  --fs-h2:       22px;   /* Subsections (print 16pt) */
  --fs-h3:       17px;   /* Item titles (print 13pt) */
  --fs-lede:     15px;   /* Intro paragraphs (print 11pt) */
  --fs-body:     14px;   /* Reading body (print 10pt) */
  --fs-dense:    13px;   /* Dense body — resume, one-pager (print 9.2pt) */
  --fs-caption:  12px;   /* Notes, figure captions (print 9pt) */
  --fs-label:    12px;   /* Small uppercase labels (print 9pt 600) */

  /* ---- Line-heights (print is tighter than English web body) ---- */
  --lh-tight:    1.15;   /* Display, H1 */
  --lh-heading:  1.25;   /* H2 */
  --lh-snug:     1.4;    /* Dense body — resume rows */
  --lh-read:     1.55;   /* Reading body (default) */

  /* ---- Weights ---- */
  --w-body:      400;    /* W04 file — serif body */
  --w-display:   500;    /* W05 file — headings, no synthetic bold */

  /* ---- Spacing (base unit 4px) ---- */
  --space-xs:    3px;    /* inline adjacent */
  --space-sm:    5px;    /* tag padding, dense layout */
  --space-md:    10px;   /* component interior */
  --space-lg:    20px;   /* between components / card padding */
  --space-xl:    32px;   /* section-title margins */
  --space-2xl:   56px;   /* between major sections */
  --space-3xl:   100px;  /* between chapters in long docs */
  --slide-pad:   80px;   /* baseline four-side padding on slides */

  /* ---- Radii (4 → 6 → 8 default → 12 → 16 → 24 → 32 hero) ---- */
  --r-xs:        4px;
  --r-sm:        6px;
  --r-md:        8px;    /* default card / button */
  --r-lg:        12px;
  --r-xl:        16px;   /* featured card */
  --r-2xl:       24px;
  --r-3xl:       32px;
  --r-pill:      999px;  /* CTA buttons on landing page */

  /* ---- Shadows: ring or whisper only — never hard drops ---- */
  --shadow-ring:    0 0 0 1px var(--border);
  --shadow-ring-deep: 0 0 0 1px var(--brand);
  --shadow-whisper: 0 4px 24px rgba(0, 0, 0, 0.05);

  /* ---- Easing (used on landing page transitions) ---- */
  --ease-soft:   cubic-bezier(0.22, 1, 0.36, 1);
}

/* CJK overrides — apply on the <html> element via lang attribute. */
html[lang="zh-CN"], html[lang="zh-Hant"] {
  --serif: "TsangerJinKai02", "Source Han Serif SC", "Noto Serif CJK SC",
           "Songti SC", Georgia, serif;
  --sans:  var(--serif);
}
html[lang="ja"] {
  --serif: "YuMincho", "Yu Mincho", "Hiragino Mincho ProN",
           "Noto Serif CJK JP", "Source Han Serif JP",
           "TsangerJinKai02", Georgia, serif;
  --sans:  var(--serif);
  --olive: #4d4c48;   /* YuMincho strokes are thinner; darker olive compensates */
}

/* ============================================================================
   Semantic styles — drop these on real elements
   ============================================================================ */

html, body { margin: 0; padding: 0; }
* { box-sizing: border-box; }

body {
  background: var(--parchment);
  color: var(--near-black);
  font-family: var(--serif);
  font-size: var(--fs-body);
  line-height: var(--lh-read);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif);
  font-weight: var(--w-display);
  color: var(--near-black);
  margin: 0;
}
h1 { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: -0.6px; }
h2 { font-size: var(--fs-h1);      line-height: var(--lh-tight); }
h3 { font-size: var(--fs-h2);      line-height: var(--lh-heading); }
h4 { font-size: var(--fs-h3);      line-height: 1.3; }

p { margin: 0 0 var(--space-md); font-size: var(--fs-body); line-height: var(--lh-read); color: var(--dark-warm); }
p.lede { font-size: var(--fs-lede); color: var(--near-black); }

/* Eyebrow — uppercase tracking-out tertiary label */
.eyebrow {
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: var(--w-display);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--stone);
}

/* Caption — small olive notes */
.caption, figcaption {
  font-size: var(--fs-caption);
  line-height: 1.45;
  color: var(--olive);
}

/* Links */
a { color: var(--brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brand-light); }

/* Strong — locks at 500, never synthesizes 700 */
strong, b { font-weight: var(--w-display); color: var(--near-black); }

/* Emphasis — single accent color, NOT italic in print templates */
em.brand, .hl { color: var(--brand); font-style: normal; }

/* Code */
code, pre {
  font-family: var(--mono);
  font-size: var(--fs-caption);
  color: var(--near-black);
}
code {
  background: var(--brand-tint);
  color: var(--brand);
  padding: 1px 5px;
  border-radius: var(--r-xs);
}
pre.code {
  background: var(--ivory);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  line-height: var(--lh-read);
  margin: 0;
  white-space: pre;
  overflow-x: auto;
}
pre.code .k { color: var(--brand); }   /* keyword / string */
pre.code .c { color: var(--stone); }   /* comment */

/* Block quote — 2pt brand left border + olive */
blockquote, .quote {
  border-left: 2px solid var(--brand);
  padding: 4px 0 4px 14px;
  margin: 0;
  color: var(--olive);
  font-family: var(--serif);
  font-size: var(--fs-lede);
  line-height: var(--lh-read);
}

/* Editorial dash list — en-dash bullet in brand color */
ul.dash {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-read);
  color: var(--dark-warm);
}
ul.dash li { position: relative; padding-left: 14px; }
ul.dash li::before {
  content: "\2013";
  position: absolute;
  left: 0;
  color: var(--brand);
}

/* Section title — 2.5pt brand left bar */
.section-title-bar {
  font-family: var(--serif);
  font-weight: var(--w-display);
  font-size: var(--fs-h2);
  color: var(--near-black);
  border-left: 2.5px solid var(--brand);
  border-radius: 1.5px;
  padding-left: 10px;
  margin: var(--space-xl) 0 var(--space-md);
}