:root {
  /* Monochrome palette */
  --color-bg: #ffffff;
  --color-fg: #0a0a0a;
  --color-fg-soft: #1a1a1a;
  --color-muted: #6b6b6b;
  --color-muted-2: #9a9a9a;
  --color-line: #e8e8e8;
  --color-line-strong: #d0d0d0;
  --color-surface: #f6f6f6;
  --color-surface-2: #efefef;

  /* Inverse (dark) palette */
  --color-bg-inv: #0a0a0a;
  --color-fg-inv: #ffffff;
  --color-muted-inv: #9a9a9a;
  --color-line-inv: #1f1f1f;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.5rem;
  --fs-3xl: 3.5rem;
  --fs-display: clamp(2.75rem, 8vw, 6.5rem);

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-base: 1.6;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Spacing scale (modular grid friendly) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Layout */
  --container-max: 1280px;
  --container-pad: 24px;
  --section-pad-y: clamp(64px, 9vw, 128px);

  /* Borders & radius */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;

  --border-thin: 1px solid var(--color-line);
  --border-strong: 1px solid var(--color-fg);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 600ms;

  /* Z-index */
  --z-nav: 50;
  --z-drawer: 80;
  --z-overlay: 90;
}