/* ============================================================
   KLEIN DESIGN TOKENS
   assets/css/tokens.css
============================================================ */
:root {
  /* LIGHT THEME: 晨渡 */
  --bg:            #F5F2EE;
  --bg-2:          #EDE9E3;
  --surface:       #FDFCF9;
  --surface-2:     #F0EDE8;
  --border:        rgba(80, 60, 40, 0.10);
  --border-soft:   rgba(80, 60, 40, 0.05);
  --text:          #3D3530;
  --text-dim:      #8A7E74;
  --text-bright:   #1A1410;
  --accent:        #7A6A52;
  --accent-soft:   rgba(122, 106, 82, 0.10);
  --accent-hover:  #5C4E3A;
  --glow:          rgba(122, 106, 82, 0.08);
  --danger:        #C0504A;
  --danger-soft:   rgba(192, 80, 74, 0.10);
  --scrollbar:     #D8D2CA;
  /* TYPOGRAPHY */
  --font-serif:  'Noto Serif SC', Georgia, 'Songti SC', serif;
  --font-sans:   'Noto Sans SC', -apple-system, 'PingFang SC', sans-serif;
  --font-mono:   'JetBrains Mono', 'Fira Code', 'Menlo', monospace;
  --size-xs:   11px;
  --size-sm:   13px;
  --size-base: 15px;
  --size-md:   17px;
  --size-lg:   22px;
  --size-xl:   28px;
  --size-2xl:  38px;
  --size-3xl:  52px;
  --weight-light:  300;
  --weight-reg:    400;
  --weight-medium: 500;
  --leading-tight: 1.35;
  --leading-base:  1.65;
  --leading-loose: 1.85;
  --tracking-tight:   -0.01em;
  --tracking-normal:   0em;
  --tracking-wide:     0.06em;
  --tracking-wider:    0.12em;
  --tracking-widest:   0.18em;
  /* SPACING — 8px grid */
  --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;
  /* BORDER RADIUS */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   24px;
  --r-full: 9999px;
  /* SHADOW */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 6px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.16);
  /* Z-INDEX */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
  --z-top:     400;
  /* TRANSITION */
  --ease:        cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0.0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  360ms;
  --dur-xslow: 500ms;
  /* LAYOUT */
  --content-sm:  480px;
  --content-md:  720px;
  --content-lg:  960px;
  --content-xl:  1200px;
  --sidebar-w:   240px;
  --topbar-h:    52px;
  --input-bar-h: 64px;
}
/* DARK THEME: 夜航（琉璃） */
[data-theme="dark"] {
  --bg:            #080E14;
  --bg-2:          #050910;
  --surface:       rgba(12, 28, 48, 0.82);
  --surface-2:     rgba(18, 40, 66, 0.70);
  --border:        rgba(120, 200, 255, 0.13);
  --border-soft:   rgba(120, 200, 255, 0.06);
  --text:          #C4DCF0;
  --text-dim:      #5A8AAE;
  --text-bright:   #EAF5FF;
  --accent:        #62C4E8;
  --accent-soft:   rgba(98, 196, 232, 0.10);
  --accent-hover:  #8DD8F4;
  --glow:          rgba(98, 196, 232, 0.12);
  --danger:        #E07A7A;
  --danger-soft:   rgba(224, 90, 90, 0.12);
  --scrollbar:     #0E1E2E;
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.20);
  --shadow-sm: 0 1px 6px rgba(0,0,0,0.28);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.36);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.44);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.52);
}