/* ══════════════════════════════════════════════════
   Warmstone Design Tokens
   云边字造局 Design System v2.0
   ══════════════════════════════════════════════════ */

/* ── Colors: Light mode (default) ── */
:root {
  --color-bg:              #faf8f5;
  --color-bg-elevated:     #ffffff;
  --color-bg-sunken:       #f2efe9;
  --color-bg-overlay:      rgba(28,25,23,0.48);
  --color-text:            #1c1917;
  --color-text-secondary:  #57534e;
  --color-text-muted:      #a8a29e;
  --color-accent:          #b45309;
  --color-accent-hover:    #92400e;
  --color-accent-active:   #78350f;
  --color-accent-subtle:   rgba(180,83,9,0.08);
  --color-accent-on:       #ffffff;
  --color-border:          #e7e5e4;
  --color-border-strong:   #d6d3d1;
  --color-success:         #15803d;
  --color-danger:          #b91c1c;
  --color-warning:         #a16207;
  --color-info:            #1d4ed8;

  /* ── Fonts ── */
  --font-display:   'Noto Sans SC', 'PingFang SC', system-ui, sans-serif;
  --font-body:      -apple-system, 'PingFang SC', 'Noto Sans SC', 'Segoe UI', system-ui, sans-serif;
  --font-mono:      'SF Mono', 'Fira Code', 'JetBrains Mono', 'Cascadia Code', monospace;
  --font-narrative: 'Noto Serif SC', 'Source Han Serif SC', 'STSongti-SC', serif;

  /* ── Typography scale ── */
  /* --text-display:  28px / 700 / 1.2 / -0.01em */
  /* --text-h1:       22px / 700 / 1.3 / -0.005em */
  /* --text-h2:       18px / 600 / 1.4 / 0 */
  /* --text-h3:       16px / 600 / 1.4 / 0 */
  /* --text-body:     14px / 400 / 1.65 / 0 */
  /* --text-caption:  12px / 400 / 1.5 / 0.01em */
  /* --text-overline: 11px / 600 / 1.2 / 0.05em */
  --text-display-size: 28px;
  --text-display-weight: 700;
  --text-display-lh: 1.2;
  --text-display-ls: -0.01em;
  --text-h1-size: 22px;
  --text-h1-weight: 700;
  --text-h1-lh: 1.3;
  --text-h1-ls: -0.005em;
  --text-h2-size: 18px;
  --text-h2-weight: 600;
  --text-h2-lh: 1.4;
  --text-h3-size: 16px;
  --text-h3-weight: 600;
  --text-h3-lh: 1.4;
  --text-body-size: 14px;
  --text-body-weight: 400;
  --text-body-lh: 1.65;
  --text-caption-size: 12px;
  --text-caption-weight: 400;
  --text-caption-lh: 1.5;
  --text-caption-ls: 0.01em;
  --text-overline-size: 11px;
  --text-overline-weight: 600;
  --text-overline-lh: 1.2;
  --text-overline-ls: 0.05em;

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

  /* ── Border radius (4 levels) ── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-full: 9999px;

  /* ── Shadows: Light mode ── */
  --shadow-sm: 0 1px 2px rgba(28,25,23,0.05);
  --shadow-md: 0 4px 12px rgba(28,25,23,0.08);
  --shadow-lg: 0 12px 32px rgba(28,25,23,0.12);

  /* ── Z-index ── */
  --z-base:     0;
  --z-dropdown: 10;
  --z-sticky:   20;
  --z-overlay:  30;
  --z-modal:    40;
  --z-toast:    50;

  /* ── Motion ── */
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;
  --easing-default:    cubic-bezier(0.4, 0, 0.2, 1);
  --easing-bounce:     cubic-bezier(0.32, 0.72, 0, 1);
  --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
}

/* ── Colors: Dark mode ── */
[data-theme="dark"] {
  --color-bg:              #0c0a09;
  --color-bg-elevated:     #1c1917;
  --color-bg-sunken:       #0a0908;
  --color-bg-overlay:      rgba(0,0,0,0.60);
  --color-text:            #e7e5e4;
  --color-text-secondary:  #a8a29e;
  --color-text-muted:      #78716c;
  --color-accent:          #d97706;
  --color-accent-hover:    #f59e0b;
  --color-accent-active:   #fbbf24;
  --color-accent-subtle:   rgba(217,119,6,0.12);
  --color-accent-on:       #0c0a09;
  --color-border:          #292524;
  --color-border-strong:   #44403c;
  --color-success:         #22c55e;
  --color-danger:          #ef4444;
  --color-warning:         #eab308;
  --color-info:            #3b82f6;

  /* ── Shadows: Dark mode ── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.5);
}