/* CodeNote design tokens — Space Black Pro (Apple-inspired) + aurora */
:root {
  --bg: #0b0b0f; --bg-deep: #060608;
  --surface: #151518; --surface-2: #1e1e21; --surface-3: #2c2c2e;
  --glass-bg: rgba(255, 255, 255, 0.035); --glass-border: rgba(255, 255, 255, 0.07);
  --text: #f5f5f7; --subtle: #86868b;
  --border: rgba(255, 255, 255, 0.07); --border-strong: rgba(255, 255, 255, 0.13);
  --accent: #0a84ff; --accent-deep: #0071e3; --on-accent: #ffffff;
  --ok: #30d158; --warn: #ff9f0a; --error: #ff453a; --error-solid: #ff3b30; --info: #0a84ff;
  --input-bg: #1c1c1e;
  --au-1: rgba(10, 132, 255, 0.14);   /* blue aurora */
  --au-2: rgba(48, 209, 88, 0.08);   /* green */
  --au-3: rgba(10, 132, 255, 0.08);  /* blue */
  /* --shadow-lg (blur 60px): hiện KHÔNG còn chỗ nào dùng — menu và modal đã
     chuyển sang --shadow-menu/--shadow-modal. Đừng gán lại cho phần tử CÓ
     ANIMATE (xem quy tắc 11 trong public/AGENTS.md). Giữ token cho khối tĩnh. */
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6);
  /* Menu ⋯ dùng shadow riêng, hẹp hơn --shadow-lg.
     Shadow blur càng lớn → bounding box layer càng lớn → mỗi frame transition
     phải raster lại cả vùng đó. Đo bằng CDP LayerTree (2026-09-13):
     blur 60px → layer 420×201px; blur 32px → 336×117px (giảm ~53% diện tích). */
  --shadow-menu: 0 12px 32px rgba(0, 0, 0, 0.5);
  /* Modal cũng dùng shadow hẹp. Đo CDP LayerTree (2026-09-13) lúc modal đang
     animate: blur 60px → layer 570×323px; blur 32px → 486×239px (−37%).
     Đo thêm cho thấy BỎ scale() không giảm thêm gì — nên vẫn GIỮ hiệu ứng
     nảy (scale + cubic-bezier overshoot) của modal, chỉ đổi shadow. */
  --shadow-modal: 0 12px 32px rgba(0, 0, 0, 0.5);
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px;
  --font-body: -apple-system, 'SF Pro Display', 'Inter', 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', 'JetBrains Mono', ui-monospace, Consolas, monospace;
}
body.light {
  --bg: #fbfbfd; --bg-deep: #f5f5f7;
  --surface: #ffffff; --surface-2: #f5f5f7; --surface-3: #e8e8ed;
  --glass-bg: rgba(255, 255, 255, 0.72); --glass-border: rgba(0, 0, 0, 0.08);
  --text: #1d1d1f; --subtle: #86868b;
  --border: rgba(0, 0, 0, 0.08); --border-strong: rgba(0, 0, 0, 0.15);
  --accent: #0071e3; --accent-deep: #0a84ff; --on-accent: #ffffff;
  --ok: #1d8127; --warn: #b26a00; --error: #d70015; --error-solid: #d70015; --info: #0071e3;
  --input-bg: #ffffff;
  --au-1: rgba(10, 132, 255, 0.10);
  --au-2: rgba(29, 129, 39, 0.07);
  --au-3: rgba(0, 113, 227, 0.06);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.12);
  --shadow-menu: 0 12px 32px rgba(0, 0, 0, 0.14);
  --shadow-modal: 0 12px 32px rgba(0, 0, 0, 0.14);
}