/* ============================================================
   竹梦 Bamboo Dream — Design Tokens
   colors_and_type.css
   ============================================================ */

/* ---- Fonts (CDN) ---- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;700;900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ============================================================
     COLORS — Brand Primary
     ============================================================ */
  --ink-900: #0A0E0E;        /* Deepest ink, primary background */
  --ink-800: #14191A;        /* Surface 1 (cards on bg) */
  --ink-700: #1C2224;        /* Surface 2 (elevated cards) */
  --ink-600: #2A3133;        /* Surface 3 (top elevation) */
  --ink-500: #3D4547;        /* Borders, dividers on dark */
  --ink-400: #5C6568;        /* Muted text on dark */
  --ink-300: #8A9396;        /* Secondary text on dark */
  --ink-200: #B8BFC1;        /* Body text on dark */
  --ink-100: #E4E7E8;        /* Primary text on dark */

  /* Bamboo Jade (primary brand accent) */
  --jade-900: #0F2A1F;
  --jade-700: #1F6A48;
  --jade-500: #3FAE7B;       /* PRIMARY brand color */
  --jade-400: #5BC495;
  --jade-300: #8FD9B5;
  --jade-100: #D6F1E3;

  /* Aurora Cyan (AI / digital accent) */
  --cyan-900: #082326;
  --cyan-700: #1B7378;
  --cyan-500: #5DE0E6;       /* AI/processing accent */
  --cyan-300: #A6EEF1;
  --cyan-100: #DCF8FA;

  /* Brick (warm accent — sparingly) */
  --brick-700: #6B2E22;
  --brick-500: #A85342;
  --brick-300: #D08775;

  /* Moonlight (paper / light surfaces) */
  --moon-50:  #FBF9F4;
  --moon-100: #F4EFE6;
  --moon-200: #E8E0CE;
  --moon-300: #C9BFA8;

  /* Semantic */
  --success: #3FAE7B;
  --info:    #5DE0E6;
  --warning: #E0B255;
  --danger:  #E05555;

  /* ============================================================
     SEMANTIC TOKENS — Dark mode (default)
     ============================================================ */
  --bg-0: var(--ink-900);
  --bg-1: var(--ink-800);
  --bg-2: var(--ink-700);
  --bg-3: var(--ink-600);

  --fg-0: var(--ink-100);    /* Primary text */
  --fg-1: var(--ink-200);    /* Body */
  --fg-2: var(--ink-300);    /* Secondary */
  --fg-3: var(--ink-400);    /* Muted */
  --fg-on-accent: var(--ink-900);

  --line-0: rgba(255, 255, 255, 0.06);
  --line-1: rgba(255, 255, 255, 0.10);
  --line-2: rgba(255, 255, 255, 0.18);
  --line-accent: rgba(63, 174, 123, 0.4);

  --accent: var(--jade-500);
  --accent-hover: var(--jade-400);
  --accent-press: var(--jade-700);
  --accent-soft: rgba(63, 174, 123, 0.12);

  --signal: var(--cyan-500);
  --signal-soft: rgba(93, 224, 230, 0.14);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-display: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'STSong', serif;
  --font-body: 'Inter', -apple-system, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale (1.25 ratio modular, custom-tuned) */
  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  15px;
  --text-md:    17px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   32px;
  --text-3xl:   44px;
  --text-4xl:   60px;
  --text-5xl:   84px;
  --text-6xl:   120px;

  /* Line heights */
  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-base:  1.5;
  --lh-relaxed: 1.7;

  /* Letter spacing */
  --tracking-tightest: -0.04em;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-widest: 0.18em;

  /* ============================================================
     SPACING (4px base)
     ============================================================ */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-24: 96px;
  --s-32: 128px;

  /* ============================================================
     RADII
     ============================================================ */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 6px;
  --r-3: 12px;
  --r-pill: 9999px;

  /* ============================================================
     SHADOWS / ELEVATION
     ============================================================ */
  --e-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --e-2: 0 4px 12px rgba(0, 0, 0, 0.5);
  --e-3: 0 16px 48px rgba(0, 0, 0, 0.6);
  --e-glow-jade: 0 0 32px rgba(63, 174, 123, 0.28);
  --e-glow-cyan: 0 0 32px rgba(93, 224, 230, 0.25);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:  cubic-bezier(0.4, 0, 1, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --d-micro: 120ms;
  --d-short: 200ms;
  --d-base:  320ms;
  --d-long:  500ms;
  --d-cinema: 800ms;
}

/* ============================================================
   LIGHT MODE (paper)
   ============================================================ */
.theme-light {
  --bg-0: var(--moon-50);
  --bg-1: #FFFFFF;
  --bg-2: var(--moon-100);
  --bg-3: var(--moon-200);

  --fg-0: var(--ink-900);
  --fg-1: var(--ink-800);
  --fg-2: var(--ink-600);
  --fg-3: var(--ink-400);

  --line-0: rgba(10, 14, 14, 0.06);
  --line-1: rgba(10, 14, 14, 0.10);
  --line-2: rgba(10, 14, 14, 0.18);

  --e-1: 0 1px 2px rgba(10, 14, 14, 0.06);
  --e-2: 0 8px 24px rgba(10, 14, 14, 0.08);
  --e-3: 0 24px 64px rgba(10, 14, 14, 0.12);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--fg-0);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
  color: var(--fg-0);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
  color: var(--fg-0);
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  font-weight: 700;
  color: var(--fg-0);
}

h4, .h4 {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  font-weight: 600;
  color: var(--fg-0);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--accent);
}

.caption {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--fg-2);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: var(--tracking-normal);
}

.display-hero {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  line-height: 0.95;
  letter-spacing: var(--tracking-tightest);
  font-weight: 900;
}