/* Source: owner-provided Omnica export, 2026-10-02.
   Colors.png, Spacings.png, Roundings.png, Typography basics.
   Dark semantic mapping is an adaptation: the export has no full dark theme.
   The font family is pending confirmation; no Figma font is claimed here. */
:root {
  color-scheme: light;
  --ds-blue-100: #edf4ff;
  --ds-blue-200: #add6ff;
  --ds-blue-300: #6cadff;
  --ds-blue-500: #0068ff;
  --ds-blue-600: #005bd5;
  --ds-blue-700: #0044b7;
  --ds-blue-800: #0033a2;
  --ds-grey-100: #f9fafb;
  --ds-grey-200: #f4f6f8;
  --ds-grey-300: #eef1f3;
  --ds-grey-400: #e9ecee;
  --ds-grey-500: #dee2e6;
  --ds-grey-600: #c7cdd4;
  --ds-grey-700: #afb9c3;
  --ds-grey-800: #8a96a6;
  --ds-grey-900: #636f7f;
  --ds-ink-300: #262b5a;
  --ds-ink-400: #21254f;
  --ds-ink-500: #1e2248;
  --ds-ink-600: #1a1d3e;
  --ds-ink-700: #151833;
  --ds-ink-800: #111329;
  --ds-ink-900: #0d0f1f;
  --ds-purple-100: #e5dbf8;
  --ds-purple-300: #a37ee7;
  --ds-purple-500: #6528d7;
  --ds-green-100: #d8f8ee;
  --ds-green-300: #6ce0b9;
  --ds-green-800: #168561;
  --ds-green-900: #106349;
  --ds-yellow-100: #fff9f0;
  --ds-yellow-300: #ffd298;
  --ds-yellow-900: #965601;
  --ds-red-100: #ffeded;
  --ds-red-300: #ff8e87;
  --ds-red-700: #b73232;
  --ds-white: #ffffff;

  --space-xxs: 4px;
  --space-xs: 8px;
  --space-s: 16px;
  --space-m: 24px;
  --space-l: 32px;
  --space-xl: 40px;
  --radius-s: 4px;
  --radius-m: 6px;
  --radius-l: 8px;
  --reading-width: 720px;
  --font-ui: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --bg: var(--ds-grey-200);
  --surface: var(--ds-white);
  --surface-2: var(--ds-grey-100);
  --surface-3: var(--ds-grey-300);
  --text: var(--ds-ink-500);
  --muted: var(--ds-grey-900);
  --border: var(--ds-grey-500);
  --control-border: var(--ds-grey-600);
  --blue: var(--ds-blue-600);
  --blue-hover: var(--ds-blue-700);
  --blue-tint: var(--ds-blue-100);
  --action: var(--ds-blue-500);
  --action-hover: var(--ds-blue-600);
  --action-active: var(--ds-blue-700);
  --green: var(--ds-green-900);
  --green-tint: var(--ds-green-100);
  --orange: var(--ds-yellow-900);
  --orange-tint: var(--ds-yellow-100);
  --red: var(--ds-red-700);
  --red-tint: var(--ds-red-100);
  --shadow: 0 8px 16px rgb(30 34 72 / 12%);
  --radius: var(--radius-l);
  --sidebar: 240px;
  --focus: var(--ds-blue-500);
}

[data-theme=dark] {
  color-scheme: dark;
  --bg: var(--ds-ink-900);
  --surface: var(--ds-ink-600);
  --surface-2: var(--ds-ink-700);
  --surface-3: var(--ds-ink-400);
  --text: var(--ds-grey-100);
  --muted: var(--ds-grey-700);
  --border: var(--ds-ink-300);
  --control-border: var(--ds-grey-800);
  --blue: var(--ds-blue-300);
  --blue-hover: var(--ds-blue-200);
  --blue-tint: var(--ds-ink-300);
  --green: var(--ds-green-300);
  --green-tint: var(--ds-ink-300);
  --orange: var(--ds-yellow-300);
  --orange-tint: var(--ds-ink-300);
  --red: var(--ds-red-300);
  --red-tint: var(--ds-ink-300);
  --shadow: 0 8px 16px rgb(0 0 0 / 24%);
  --focus: var(--ds-blue-300);
}

@media (prefers-color-scheme: dark) {
  [data-theme=system] {
    color-scheme: dark;
    --bg: var(--ds-ink-900);
    --surface: var(--ds-ink-600);
    --surface-2: var(--ds-ink-700);
    --surface-3: var(--ds-ink-400);
    --text: var(--ds-grey-100);
    --muted: var(--ds-grey-700);
    --border: var(--ds-ink-300);
    --control-border: var(--ds-grey-800);
    --blue: var(--ds-blue-300);
    --blue-hover: var(--ds-blue-200);
    --blue-tint: var(--ds-ink-300);
    --green: var(--ds-green-300);
    --green-tint: var(--ds-ink-300);
    --orange: var(--ds-yellow-300);
    --orange-tint: var(--ds-ink-300);
    --red: var(--ds-red-300);
    --red-tint: var(--ds-ink-300);
    --shadow: 0 8px 16px rgb(0 0 0 / 24%);
    --focus: var(--ds-blue-300);
  }
}