@layer tokens {
  :root {
    color-scheme: light;
    --page: #F7F6F2;
    --page-soft: #F0EFEB;
    --surface: #FAFAF7;
    --surface-2: #F1F1ED;
    --ink: #0B0B0B;
    --ink-soft: #45484D;
    --muted: #6B7280;
    --line: #E5E7EB;
    --line-strong: #D5D8DC;
    --accent: #3882F6;
    --success: #10B981;
    --success-bg: #E8F8F1;
    --warning: #F59E0B;
    --warning-bg: #FFF5E5;
    --error: #EF4444;
    --shadow-soft: 0 14px 42px rgb(32 30 24 / 8%);
    --shadow-phone: 0 18px 46px rgb(23 25 28 / 25%), inset 0 0 0 1px rgb(255 255 255 / 80%);
    --font: "Inter", "InterOS Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --container: 1360px;
    --gutter: clamp(1.25rem, 5.1vw, 5.25rem);
    --radius-sm: 12px;
    --radius-card: 18px;
    --radius-large: 24px;
    --ease: cubic-bezier(.2,.75,.25,1);
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --page: #17191D;
    --page-soft: #202329;
    --surface: #202329;
    --surface-2: #292D33;
    --ink: #F7F6F2;
    --ink-soft: #D0D3D8;
    --muted: #A1A7B0;
    --line: #373C44;
    --line-strong: #4B515B;
    --success-bg: #15352B;
    --warning-bg: #392C18;
    --shadow-soft: 0 14px 42px rgb(0 0 0 / 22%);
  }
}