/* ============================================================
 * Reflection Design System — Colors & Type tokens
 * Import in any HTML/JSX:  <link rel="stylesheet" href="/colors_and_type.css">
 * ============================================================ */

/* ── Webfonts (Google Fonts substitutions, see README §10) ── */
@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Noto+Serif+SC:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;600&display=swap");

:root {
  /* ─── Color · Neutrals (paper) ─────────────────────────── */
  --bg-canvas: #f5f4ee; /* page background — very light cream */
  --bg-surface: #ffffff; /* card / sheet */
  --bg-sunken: #efece2; /* inset / track */

  --fg-primary: #161618; /* body text */
  --fg-secondary: #4b4b52; /* labels, meta */
  --fg-muted: #8b8b92; /* placeholders, timestamps */
  --fg-disabled: #b9b9c0;
  --fg-on-cobalt: #ffffff;

  --rule-line: #e6e2d6; /* card borders */
  --rule-line-strong: #c9c3b2; /* dividers, focused borders */

  /* ─── Color · Brand (single accent) ────────────────────── */
  --ink-cobalt: #1c3f8b; /* fountain-pen blue, the only accent */
  --ink-cobalt-soft: #e8edf7; /* tint */
  --ink-cobalt-deep: #142d63; /* press */

  /* ─── Color · Semantic ─────────────────────────────────── */
  --good: #2e6b47;
  --good-soft: #e6efe9;
  --warn: #b57e1f;
  --warn-soft: #f7eed9;
  --danger: #8c2a2a;
  --danger-soft: #f4e2e2;

  /* ─── Color · Cognitive (Kahneman) ─────────────────────── */
  --system-1: #b57e1f; /* fast, intuitive — same hue as warn */
  --system-1-soft: #f7eed9;
  --system-2: #1c3f8b; /* slow, deliberate — same as cobalt */
  --system-2-soft: #e8edf7;

  /* ─── Radius ───────────────────────────────────────────── */
  --radius-card: 14px;
  --radius-btn: 12px;
  --radius-input: 12px;
  --radius-pill: 999px;
  --radius-tight: 8px;

  /* ─── Shadow ───────────────────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-2: 0 6px 16px rgba(15, 23, 42, 0.08);
  --shadow-3: 0 16px 32px rgba(15, 23, 42, 0.12);
  --shadow-inset: inset 0 0 0 3px rgba(28, 63, 139, 0.1);

  /* ─── Spacing (vertical rhythm 4px base) ───────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ─── Motion ───────────────────────────────────────────── */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;

  /* ─── Type · Family ────────────────────────────────────── */
  --font-serif-zh:
    "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", serif;
  --font-sans-zh:
    "Noto Sans SC", "HarmonyOS Sans SC", "PingFang SC", -apple-system, sans-serif;
  --font-serif-en: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans-en:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ─── Type · Stack (mixed CN+EN) ───────────────────────── */
  --font-display: var(--font-serif-en), var(--font-serif-zh);
  --font-body: var(--font-serif-en), var(--font-serif-zh);
  --font-ui: var(--font-sans-en), var(--font-sans-zh);
  --font-data: var(--font-mono);

  /* ─── Type · Size scale (fluid for mobile-first) ───────── */
  --fz-12: 12px;
  --fz-13: 13px;
  --fz-14: 14px;
  --fz-15: 15px;
  --fz-16: 16px;
  --fz-18: 18px;
  --fz-20: 20px;
  --fz-24: 24px;
  --fz-28: 28px;
  --fz-32: 32px;

  /* ─── Type · Weight ────────────────────────────────────── */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ─── Type · Line height ───────────────────────────────── */
  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-base: 1.5;
  --lh-loose: 1.65;
}

/* ─── Semantic typography — drop-in classes ─────────────── */

.h-display {
  font-family: var(--font-display);
  font-size: var(--fz-32);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--fg-primary);
}
.h-1 {
  font-family: var(--font-display);
  font-size: var(--fz-24);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: -0.005em;
  color: var(--fg-primary);
}
.h-2 {
  font-family: var(--font-ui);
  font-size: var(--fz-18);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}
.h-3 {
  font-family: var(--font-ui);
  font-size: var(--fz-14);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}
.h-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fz-12);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-secondary);
}

.t-body {
  font-family: var(--font-body);
  font-size: var(--fz-16);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  color: var(--fg-primary);
  text-wrap: pretty;
}
.t-body-sm {
  font-family: var(--font-body);
  font-size: var(--fz-14);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--fg-primary);
}
.t-ui {
  font-family: var(--font-ui);
  font-size: var(--fz-14);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}
.t-meta {
  font-family: var(--font-ui);
  font-size: var(--fz-12);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  color: var(--fg-muted);
}
.t-data {
  font-family: var(--font-data);
  font-size: var(--fz-13);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  font-variant-numeric: tabular-nums;
  color: var(--fg-secondary);
}
.t-quote {
  font-family: var(--font-display);
  font-size: var(--fz-18);
  font-style: italic;
  line-height: var(--lh-loose);
  color: var(--fg-primary);
}

/* ─── Reset niceties ───────────────────────────────────── */
* {
  box-sizing: border-box;
}
html,
body {
  background: var(--bg-canvas);
  color: var(--fg-primary);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}