:root {
    color-scheme: light;

    --color-canvas: #f8fafc;
    --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.04);

    --color-text-strong: #0d0d0d;
    --color-text-base: #484848;
    --color-text-muted: #737373;
    --color-text-soft: #8a8a8a;

    --color-line-subtle: rgba(20, 20, 20, 0.07);
    --color-line-strong: rgba(20, 20, 20, 0.12);

    --color-accent: #000000;
    --color-accent-strong: #1a1a1a;
    --color-accent-soft: rgba(0, 0, 0, 0.08);
    --color-accent-subtle: rgba(0, 0, 0, 0.04);

    --color-info: #0ea5e9;
    --color-info-soft: rgba(14, 165, 233, 0.08);
    --color-warning: #f59e0b;
    --color-warning-soft: rgba(245, 158, 11, 0.08);
    --color-danger: #ef4444;
    --color-danger-soft: rgba(239, 68, 68, 0.08);
    --color-success: #22c55e;
    --color-success-soft: rgba(34, 197, 94, 0.08);

    --surface-page: #f8fafc;
    --surface-glass: rgba(20, 20, 20, 0.08);
    --surface-glass-hover: rgba(20, 20, 20, 0.14);
    --surface-panel: #fff;
    --surface-elevated: #f8fafc;
    --surface-control: rgba(255, 255, 255, 0.88);
    --surface-control-hover: #f8fafc;
    --surface-muted: rgba(0, 0, 0, 0.03);
    --surface-chip: rgba(0, 0, 0, 0.04);

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 48px;
    --space-10: 64px;
    --space-11: 80px;
    --space-12: 96px;
    --space-13: 128px;

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    --radius-pill: 9999px;

    --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-ui: "SF Pro Text", -apple-system, BlinkMacSystemFont, sans-serif;

    /* Apple-style typography scale */
    --type-eyebrow: 0.75rem;
    --type-label: 0.8rem;
    --type-body-sm: 0.875rem;
    --type-body: 1rem;
    --type-title-sm: 1.0625rem;
    --type-title-md: 1.25rem;
    --type-headline: clamp(1.5rem, 3vw, 2.5rem);
    --type-display: clamp(2.5rem, 6vw, 5rem);
    --type-display-dense: clamp(2rem, 4vw, 3.5rem);

    --line-height-tight: 1.05;
    --line-height-title: 1.15;
    --line-height-body: 1.5;

    --tracking-eyebrow: 0.08em;
    --tracking-label: 0.05em;
    --tracking-headline: -0.02em;
    --tracking-display: -0.03em;

    --motion-fast: 120ms;
    --motion-base: 180ms;
    --motion-slow: 300ms;
    --easing-standard: cubic-bezier(0.32, 0.72, 0, 1);

    --shell-width: 1280px;
    --shell-width-wide: 1440px;
    --shell-width-xl: 1440px;
    --shell-width-xxl: 1600px;
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --color-canvas: #0a0a0a;
    --shadow-md: 0 1px 3px rgba(255, 255, 255, 0.03);

    --color-text-strong: #f3f4f6;
    --color-text-base: #d1d5db;
    --color-text-muted: #9ca3af;
    --color-text-soft: #6b7280;

    --color-line-subtle: rgba(255, 255, 255, 0.08);
    --color-line-strong: rgba(255, 255, 255, 0.14);

    --color-accent: #FFFFFF;
    --color-accent-strong: #E5E5E5;
    --color-accent-soft: rgba(255, 255, 255, 0.12);
    --color-accent-subtle: rgba(255, 255, 255, 0.06);

    --color-info: #38bdf8;
    --color-info-soft: rgba(56, 189, 248, 0.12);
    --color-warning: #fbbf24;
    --color-warning-soft: rgba(251, 191, 36, 0.12);
    --color-danger: #f87171;
    --color-danger-soft: rgba(248, 113, 113, 0.12);
    --color-success: #4ade80;
    --color-success-soft: rgba(74, 222, 128, 0.12);

    --surface-page: #0a0a0a;
    --surface-glass: rgba(255, 255, 255, 0.06);
    --surface-glass-hover: rgba(255, 255, 255, 0.12);
    --surface-panel: #111111;
    --surface-elevated: #181818;
    --surface-control: rgba(25, 25, 25, 0.88);
    --surface-control-hover: #1f1f1f;
    --surface-muted: rgba(255, 255, 255, 0.04);
    --surface-chip: rgba(255, 255, 255, 0.06);
}