/* AUTO-GENERATED from DESIGN.md — do not edit */

:root {
  /* ── Colors ── */
  --color-primary: #111111;
  --color-secondary: #444444;
  --color-tertiary: #c9aaaa;
  --color-neutral: #ffffff;
  --color-surface: #f5f3f1;
  --color-nav: #f0e4e4;
  --color-border: #ddd9d6;
  --color-muted: #888888;
  --color-tag: #f2f0ee;
  --color-sage: #a3b5a8;
  --color-warm-grey: #c4c0bb;
  --color-mauve: #b0a4c8;
  --color-yara-link: #8a7ab0;
  --color-yara-hover: #b0a4c8;
  --color-yara-highlight: rgba(176, 164, 200, 0.14);
  --color-text-highlight: #efe4a855;
  --color-code-bg: #1e1b1b;
  --color-code-text: #f3f0ee;
  --color-tag-chip-bg: #ece8ee;
  --color-tag-chip-text: #6a5d82;
  --color-explorer-text: #5c4e4e;
  --color-linkedin-blue: #0077B5;
  --color-substack-orange: #FF6719;
  --color-x-black: #111111;
  --color-pillar-content-os: #111111;
  --color-pillar-product-thinking: #c9aaaa;
  --color-pillar-people-process: #a3b5a8;
  --color-pillar-market: #c4c0bb;
  --color-pillar-mixed: #b0a4c8;

  /* ── Pillar colors ── */
  --pillar-content-os: #111111;
  --pillar-product-thinking: #c9aaaa;
  --pillar-people-process: #a3b5a8;
  --pillar-market: #c4c0bb;
  --pillar-mixed: #b0a4c8;

  /* ── Typography ── */
  --type-h1-display-family: Georgia, Times New Roman, serif;
  --type-h1-display-size: 40px;
  --type-h1-display-weight: 700;
  --type-h1-display-tracking: -0.02em;
  --type-h1-display-leading: 1;
  --type-h1-family: Schibsted Grotesk;
  --type-h1-size: 2.125rem;
  --type-h1-weight: 600;
  --type-h1-tracking: -0.01em;
  --type-h1-leading: 1.15;
  --type-h2-family: Schibsted Grotesk;
  --type-h2-size: 1.375rem;
  --type-h2-weight: 600;
  --type-h2-tracking: -0.01em;
  --type-h2-leading: 1.25;
  --type-h3-family: Schibsted Grotesk;
  --type-h3-size: 1.0625rem;
  --type-h3-weight: 600;
  --type-h3-tracking: -0.01em;
  --type-h3-leading: 1.3;
  --type-body-family: Source Sans 3;
  --type-body-size: 1rem;
  --type-body-weight: 400;
  --type-body-leading: 1.7;
  --type-body-alt-family: Helvetica Neue, Helvetica, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
  --type-body-alt-size: 1rem;
  --type-body-alt-weight: 400;
  --type-body-alt-leading: 1.65;
  --type-nav-link-family: Source Sans 3;
  --type-nav-link-size: 14px;
  --type-nav-link-weight: 500;
  --type-nav-section-family: Source Sans 3;
  --type-nav-section-size: 10px;
  --type-nav-section-weight: 600;
  --type-nav-section-tracking: 0.14em;
  --type-label-caps-family: IBM Plex Mono;
  --type-label-caps-size: 10px;
  --type-label-caps-weight: 400;
  --type-label-caps-tracking: 0.14em;
  --type-code-family: IBM Plex Mono, SF Mono, Cascadia Code, JetBrains Mono, Fira Code, Consolas, monospace;
  --type-code-size: 0.8125rem;
  --type-code-leading: 1.55;

  /* ── Spacing ── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 28px;
  --space-xl: 40px;
  --space-xxl: 56px;
  --space-section: 44px;

  /* ── Radii ── */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-pill: 999px;

  /* ── Layout ── */
  --sidebar-width: 200px;
  --sidebar-collapsed: 56px;
  --ease-sidebar: 220ms cubic-bezier(0.22, 1, 0.36, 1);

  /* ── vs-shared aliases ── */
  --bg: var(--color-neutral);
  --surface: var(--color-surface);
  --text: var(--color-primary);
  --text-secondary: var(--color-secondary);
  --text-muted: var(--color-muted);
  --border: var(--color-border);
  --link: var(--color-primary);
  --link-hover: var(--color-secondary);
  --nav-bg: var(--color-nav);
  --nav-width: var(--sidebar-width);
  --nav-width-collapsed: var(--sidebar-collapsed);
  --tag-bg: var(--color-tag);
  --rose: var(--color-tertiary);
  --sage: var(--color-sage);
  --warm-grey: var(--color-warm-grey);
  --serif: var(--type-h1-display-family);
  --font-mono: var(--type-code-family);

  /* ── Quartz aliases ── */
  --light: var(--color-neutral);
  --lightgray: var(--color-border);
  --gray: var(--color-muted);
  --darkgray: var(--color-secondary);
  --dark: var(--color-primary);
  --secondary: var(--color-yara-link);
  --tertiary: var(--color-yara-hover);
  --highlight: var(--color-yara-highlight);
  --textHighlight: var(--color-text-highlight);
}

:root[saved-theme="dark"] {
  /* ── Color overrides ── */
  --color-primary: #f5eeec;
  --color-secondary: #c4bbb8;
  --color-tertiary: #d4b8b8;
  --color-neutral: #1a1718;
  --color-surface: #222020;
  --color-nav: #2a2222;
  --color-border: #3a3535;
  --color-muted: #7a7070;
  --color-tag: #302c2c;
  --color-sage: #8aaa92;
  --color-warm-grey: #a09c98;
  --color-mauve: #c4b8d8;
  --color-yara-link: #b0a4c8;
  --color-yara-hover: #d1c7e0;
  --color-yara-highlight: rgba(176, 164, 200, 0.16);
  --color-text-highlight: #c4b34833;
  --color-code-text: #d4cbc8;
  --color-tag-chip-bg: #3d2f5c;
  --color-explorer-text: #7a6e6e;
  --color-pillar-content-os: #d4cbc8;
  --color-pillar-product-thinking: #d4b8b8;
  --color-pillar-people-process: #8aaa92;
  --color-pillar-market: #a09c98;
  --color-pillar-mixed: #c4b8d8;

  /* ── Pillar overrides ── */
  --pillar-content-os: #d4cbc8;
  --pillar-product-thinking: #d4b8b8;
  --pillar-people-process: #8aaa92;
  --pillar-market: #a09c98;
  --pillar-mixed: #c4b8d8;
}

@media (prefers-color-scheme: dark) {
  :root:not([saved-theme="light"]) {
  /* ── Color overrides ── */
  --color-primary: #f5eeec;
  --color-secondary: #c4bbb8;
  --color-tertiary: #d4b8b8;
  --color-neutral: #1a1718;
  --color-surface: #222020;
  --color-nav: #2a2222;
  --color-border: #3a3535;
  --color-muted: #7a7070;
  --color-tag: #302c2c;
  --color-sage: #8aaa92;
  --color-warm-grey: #a09c98;
  --color-mauve: #c4b8d8;
  --color-yara-link: #b0a4c8;
  --color-yara-hover: #d1c7e0;
  --color-yara-highlight: rgba(176, 164, 200, 0.16);
  --color-text-highlight: #c4b34833;
  --color-code-text: #d4cbc8;
  --color-tag-chip-bg: #3d2f5c;
  --color-explorer-text: #7a6e6e;
  --color-pillar-content-os: #d4cbc8;
  --color-pillar-product-thinking: #d4b8b8;
  --color-pillar-people-process: #8aaa92;
  --color-pillar-market: #a09c98;
  --color-pillar-mixed: #c4b8d8;

  /* ── Pillar overrides ── */
  --pillar-content-os: #d4cbc8;
  --pillar-product-thinking: #d4b8b8;
  --pillar-people-process: #8aaa92;
  --pillar-market: #a09c98;
  --pillar-mixed: #c4b8d8;
  }
}