/* GENERATED FILE. DO NOT EDIT BY HAND.
 * Design tokens: Primitives, Color (Light + Dark) and Layout.
 * Source: https://www.figma.com/design/82EZNiIkvKXw9aodyU0oU1/Nollie---Design-Systen
 * Regenerate: node scripts/sync-tokens.mjs (see design-system/README.md)
 */

:root,
[data-theme="light"] {
  color-scheme: light;
  /* Primitives: raw values. Components use the semantic tokens below. */
  --black: #000000;
  --white: #ffffff;
  --grey-50: #f7f7f7;
  --grey-200: #e5e5e5;
  --grey-200-a30: rgba(229, 229, 229, 0.3);
  --ink-900: #292e33;
  --blue-100: #d1e3ff;
  --grey-100: #eeeeee;
  --grey-100-a20: rgba(238, 238, 238, 0.2);
  --grey-800: #2a2a2d;
  --grey-900: #1c1c1e;
  --grey-950: #0f0f10;
  --white-a04: rgba(255, 255, 255, 0.04);
  --white-a08: rgba(255, 255, 255, 0.08);
  --white-a12: rgba(255, 255, 255, 0.12);
  --blue-800: #22395e;
  --white-a00: rgba(255, 255, 255, 0);
  --grey-950-a00: rgba(15, 15, 16, 0);

  /* Color: Light mode */
  --color-bg-page: #ffffff;
  --color-bg-surface: rgba(229, 229, 229, 0.3);
  --color-bg-surface-solid: #ffffff;
  --color-bg-accent: #d1e3ff;
  --color-bg-media: #000000;
  --color-text-primary: #000000;
  --color-text-on-media: #ffffff;
  --color-border-default: #000000;
  --color-border-subtle: #f7f7f7;
  --color-icon-primary: #000000;
  --color-brand-mark: #292e33;
  --color-border-grid: #eeeeee;
  --color-border-grid-subtle: rgba(238, 238, 238, 0.2);
  --color-text-on-media-light: #000000;
  --color-bg-studio: #f7f7f7;

  /* Layout */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 88px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --size-control: 40px;
  --size-content: 1196px;
  --size-page-margin: 122px;
  --blur-glass: 40px;
  --space-section: 200px;
  --size-grid-cell: 44px;
  --size-page: 1440px;
  --size-icon: 24px;
  --size-swatch: 24px;
  --size-client-logo: 160px;
  --size-panel-pinned: 248px;
  --size-panel-pinned-compact: 184px;
  --size-panel-stacked: 305px;
  --size-index-preview: 256px;
  --border-width: 1px;
  --border-width-strong: 2px;
}

/* Dark mode: explicit opt-in. Only tokens whose value differs from Light. */
[data-theme="dark"] {
  color-scheme: dark;
  --color-bg-page: #0f0f10;
  --color-bg-surface: rgba(255, 255, 255, 0.08);
  --color-bg-surface-solid: #1c1c1e;
  --color-bg-accent: #22395e;
  --color-text-primary: #ffffff;
  --color-border-default: #ffffff;
  --color-border-subtle: #2a2a2d;
  --color-icon-primary: #ffffff;
  --color-brand-mark: #e5e5e5;
  --color-border-grid: rgba(255, 255, 255, 0.08);
  --color-border-grid-subtle: rgba(255, 255, 255, 0.04);
}

/* Dark mode: follow the OS unless the page forces light. Keep in sync with the block above. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg-page: #0f0f10;
    --color-bg-surface: rgba(255, 255, 255, 0.08);
    --color-bg-surface-solid: #1c1c1e;
    --color-bg-accent: #22395e;
    --color-text-primary: #ffffff;
    --color-border-default: #ffffff;
    --color-border-subtle: #2a2a2d;
    --color-icon-primary: #ffffff;
    --color-brand-mark: #e5e5e5;
    --color-border-grid: rgba(255, 255, 255, 0.08);
    --color-border-grid-subtle: rgba(255, 255, 255, 0.04);
  }
}