/* Toolful v5 · Quiet Precision · design tokens (single source of truth) */
:root {
  color-scheme: light;
  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: "SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, monospace;
  --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-md: 18px;
  --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 32px; --fs-4xl: 48px;
  --fs-hero: clamp(42px, 6vw, 72px);
  --fs-hero-tool: clamp(34px, 4.2vw, 52px);
  --lh-tight: 1.14; --lh-dense: 1.5; --lh-base: 1.72;
  --track-mid: -.025em; --track-wide: .12em;
  --sp-1: 4px; --sp-2: 8px; --sp-4: 16px; --sp-6: 24px;
  --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;
  --rhythm-1: 96px; --rhythm-2: 56px; --rhythm-3: 28px;
  --container: 1240px; --container-tool: 1080px; --container-narrow: 760px;
  --hero-max: 820px; --gutter: clamp(20px, 4vw, 48px); --header-h: 72px;
  --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-full: 999px;

  --c-bg: #F7F7F5;
  --c-surface: #FFFFFF;
  --c-surface-subtle: #F1F2EF;
  --c-surface-elevated: #FFFFFF;
  --c-heading: #111318;
  --c-text-1: #20242C;
  --c-text-2: #5E6572;
  --c-text-3: #737C8A;
  --c-placeholder: #858D99;
  --c-border: #E2E3DF;
  --c-border-strong: #C8CBC5;
  --c-divider: #ECEDE9;
  --c-primary: #135EC4;
  --c-primary-hover: #0D50AA;
  --c-primary-dark: #0B3979;
  --c-primary-soft: #EAF2FF;
  --c-accent: #135EC4;
  --c-accent-border: #8BB8F4;
  --c-btn-fill: #135EC4;
  --c-btn-fill-hover: #0D50AA;
  --c-btn-fill-active: #093F8B;
  --c-on-primary: #FFFFFF;
  --c-hover-subtle: rgba(17, 19, 24, .045);
  --c-row-hover: #F3F5F8;
  --c-table-head: #F3F4F1;
  --c-zebra: #FAFAF8;
  --c-success: #147A4B;
  --c-success-soft: #E8F6EF;
  --c-warning: #9A5A08;
  --c-warning-soft: #FFF4DE;
  --c-danger: #B42336;
  --c-danger-soft: #FDECEE;
  --c-focus-ring: #135EC4;
  --c-focus-ring-soft: rgba(19, 94, 196, .2);
  --c-overlay: rgba(10, 12, 16, .58);
  --c-on-overlay: #FFFFFF;
  --c-code-key: #0B57B7;
  --c-code-string: #16724A;
  --c-code-number: #9A5A08;
  --c-code-bool: #7A43B6;
  --c-code-symbol: #737C8A;
  --shadow-1: 0 1px 2px rgba(17, 19, 24, .04), 0 8px 24px rgba(17, 19, 24, .035);
  --shadow-2: 0 2px 4px rgba(17, 19, 24, .05), 0 18px 48px rgba(17, 19, 24, .08);
  --shadow-3: 0 8px 24px rgba(17, 19, 24, .09), 0 32px 80px rgba(17, 19, 24, .14);
  --dur-1: 160ms; --dur-2: 240ms; --ease: cubic-bezier(.2, .8, .2, 1);
}

html[data-theme-resolved="dark"],
html[data-theme="dark"] {
  color-scheme: dark;
  --c-bg: #0D0F12; --c-surface: #15181D; --c-surface-subtle: #111419;
  --c-surface-elevated: #1B1F25; --c-heading: #F5F6F7; --c-text-1: #E3E6EA;
  --c-text-2: #A8AFBA; --c-text-3: #89929F; --c-placeholder: #78818E;
  --c-border: #282D34; --c-border-strong: #3A424D; --c-divider: #23272D;
  --c-primary: #70A9FF; --c-primary-hover: #8BBAFF; --c-primary-dark: #A9CBFF;
  --c-primary-soft: rgba(82, 143, 235, .14); --c-accent: #70A9FF;
  --c-accent-border: #4777B9; --c-btn-fill: #E9EDF4; --c-btn-fill-hover: #FFFFFF;
  --c-btn-fill-active: #D7DDE7; --c-on-primary: #111318;
  --c-hover-subtle: rgba(255, 255, 255, .055); --c-row-hover: #1A1E24;
  --c-table-head: #171B20; --c-zebra: #12151A;
  --c-success: #64C993; --c-success-soft: rgba(60, 181, 112, .13);
  --c-warning: #E5AB59; --c-warning-soft: rgba(218, 145, 42, .14);
  --c-danger: #F08391; --c-danger-soft: rgba(219, 78, 97, .14);
  --c-focus-ring: #8BBAFF; --c-focus-ring-soft: rgba(112, 169, 255, .24);
  --c-overlay: rgba(0, 0, 0, .72); --c-code-key: #8BBAFF;
  --c-on-overlay: #FFFFFF;
  --c-code-string: #79D4A4; --c-code-number: #E5AB59;
  --c-code-bool: #C9A4FF; --c-code-symbol: #89929F;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .28), 0 10px 30px rgba(0, 0, 0, .16);
  --shadow-2: 0 4px 10px rgba(0, 0, 0, .28), 0 22px 64px rgba(0, 0, 0, .28);
  --shadow-3: 0 12px 30px rgba(0, 0, 0, .36), 0 40px 100px rgba(0, 0, 0, .4);
}

@media (max-width: 767px) {
  :root {
    --header-h: 64px; --gutter: 18px;
    --rhythm-1: 64px; --rhythm-2: 40px; --rhythm-3: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: .01ms; --dur-2: .01ms; }
}