:root {
  color-scheme: dark;

  --color-logo-primary: #7030ff;
  --color-logo-primary-strong: #7830ff;
  --color-logo-secondary: #ff60d8;
  --color-logo-deep: #1006d8;

  --color-ink-950: #06050b;
  --color-ink-900: #0b0914;
  --color-ink-850: #12101e;
  --color-ink-100: #f8f6ff;
  --color-ink-250: #c7bedc;
  --color-ink-350: #a99cc2;

  --color-surface: var(--color-ink-900);
  --color-surface-raised: var(--color-ink-850);
  --color-page: var(--color-ink-950);
  --color-text: var(--color-ink-100);
  --color-text-muted: var(--color-ink-250);
  --color-line: rgba(248, 246, 255, 0.18);
  --color-line-strong: #f8f6ff;
  --color-primary: var(--color-logo-primary);
  --color-primary-contrast: #ffffff;
  --color-accent: var(--color-logo-secondary);
  --color-alert: #ff4d6d;
  --color-shadow: rgba(112, 48, 255, 0.34);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  --container: 1320px;
  --radius-none: 0;
  --line-width: 1px;
  --grid-size: 56px;
  --shadow-offset: 8px 8px 0;
  --shadow-offset-sm: 5px 5px 0;

  --font-sans:
    "SF Pro Text", Inter, Aptos, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --font-display:
    "SF Pro Display", Inter, Aptos, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --font-mono:
    "SF Mono", "Cascadia Code", "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --font-weight-regular: 450;
  --font-weight-medium: 560;
  --font-weight-semibold: 650;
  --font-weight-bold: 740;
  --font-weight-black: 820;

  --font-size-xs: 0.78rem;
  --font-size-sm: 0.9rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.08rem;
  --font-size-chip: 0.88rem;
  --font-size-card: 0.92rem;
  --font-size-xl: clamp(1.4rem, 2vw, 2rem);
  --font-size-display: clamp(3rem, 5.8vw, 6.4rem);
  --font-size-heading: clamp(2rem, 3.8vw, 4.15rem);
  --font-size-display-mobile: 3.3rem;
  --font-size-heading-mobile: 2.2rem;
  --font-size-root: 16px;
  --icon-size-sm: 18px;
  --icon-size-md: 22px;
  --icon-size-lg: 28px;
  --tracking-tight: 0;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --leading-display: 0.94;
  --leading-tight: 1.04;
  --leading-title: 1.16;
  --leading-body: 1.72;

  --bg: var(--color-page);
  --panel: var(--color-surface);
  --panel-strong: var(--color-surface-raised);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --line: var(--color-line);
  --line-strong: var(--color-line-strong);
  --accent: var(--color-primary);
  --accent-2: var(--color-accent);
  --danger: var(--color-alert);
  --shadow: var(--color-shadow);
}

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

  --color-surface: #ffffff;
  --color-surface-raised: #f1edff;
  --color-page: #fbfaff;
  --color-text: #100922;
  --color-text-muted: #54486c;
  --color-line: rgba(16, 9, 34, 0.2);
  --color-line-strong: #100922;
  --color-primary: #7030ff;
  --color-primary-contrast: #ffffff;
  --color-accent: #c900a6;
  --color-alert: #c9184a;
  --color-shadow: rgba(112, 48, 255, 0.22);
}

:root {
  --arch-top-a: rgba(255, 255, 255, 0.98);
  --arch-top-b: rgba(244, 240, 255, 0.96);
  --arch-side-a: rgba(238, 234, 250, 0.98);
  --arch-side-b: rgba(219, 212, 244, 0.98);
  --arch-line: rgba(16, 9, 34, 0.22);
  --arch-text: #12102b;
  --arch-muted: #4b4268;
  --arch-node: rgba(255, 255, 255, 0.88);
  --arch-node-border: rgba(112, 48, 255, 0.16);
  --arch-shadow: rgba(112, 48, 255, 0.18);
}

[data-theme="dark"] {
  --arch-top-a: rgba(20, 17, 36, 0.94);
  --arch-top-b: rgba(9, 7, 18, 0.94);
  --arch-side-a: rgba(32, 24, 66, 0.98);
  --arch-side-b: rgba(16, 12, 34, 0.98);
  --arch-line: rgba(248, 246, 255, 0.22);
  --arch-text: #f8f6ff;
  --arch-muted: #c7bedc;
  --arch-node: rgba(14, 11, 28, 0.88);
  --arch-node-border: rgba(255, 255, 255, 0.18);
  --arch-shadow: rgba(0, 0, 0, 0.34);
}