/* AUTO-GENERATED from tokens/tokens.json by build-tokens.mjs. Do not edit by hand. */
/* 36nine Design System v1.8.0 */

:root{
  --color-neutral-0: #FFFFFF;
  --color-neutral-50: hsl(240, 4.8%, 95.9%);
  --color-neutral-100: hsl(240, 5.9%, 90%);
  --color-neutral-200: hsl(240, 5.9%, 80%);
  --color-neutral-300: hsl(240, 5%, 72%);
  --color-neutral-400: hsl(240, 5%, 58%);
  --color-neutral-500: hsl(240, 5%, 64.9%);
  --color-neutral-600: hsl(240, 5%, 45%);
  --color-neutral-700: hsl(240, 6%, 32%);
  --color-neutral-800: hsl(240, 7%, 20%);
  --color-neutral-900: hsl(240, 8%, 12%);
  --color-neutral-950: hsl(240, 10%, 3.9%);
  --color-status-danger: #B42318;
  --color-status-danger-bg: #FDECEA;
  --color-status-danger-edge: #F0C6C1;
  --color-status-warn: #92400E;
  --color-status-warn-bg: #FEF3C7;
  --color-status-warn-edge: #F5D08A;
  --color-cat-1: #0F2C5A;
  --color-cat-2: #A07E3C;
  --color-cat-3: #52525B;
  --color-cat-4: #486581;
  --color-cat-5: #89A0BC;
  --color-cat-6: #6E5A2E;
  --type-xs: 12px;
  --type-sm: 14px;
  --type-base: 16px;
  --type-lg: 18px;
  --type-xl: 22px;
  --type-2xl: 28px;
  --type-3xl: 36px;
  --type-4xl: 48px;
  --type-5xl: 64px;
  --type-6xl: 88px;
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-eyebrow: 0.12em;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --font-sans: "Exo 2", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --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;
  --space-24: 96px;
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --size-tapTarget: 44px;
  --size-focusRing: 2px;
  --size-bracket: 8px;
  --size-notch: 7px;
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease-standard: cubic-bezier(0.2,0,0,1);
  --ease-emphasize: cubic-bezier(0.3,0,0,1);
  --bp-sm: 640px;
  --bp-md: 820px;
  --bp-lg: 1080px;
  --bp-xl: 1280px;

  /* semantic (light) */
  --bg: var(--color-neutral-0);
  --bg-muted: var(--color-neutral-50);
  --bg-elevated: var(--color-neutral-0);
  --fg: var(--color-neutral-950);
  --fg-body: #1A2230;
  --fg-subtle: #3F4756;
  --fg-muted: #5B6675;
  --fg-faint: #828D9D;
  --tile-gap: 14px;
  --border: var(--color-neutral-100);
  --border-strong: var(--color-neutral-200);
  --accent: var(--s-primary);
  --accent-fg: #FFFFFF;
  --status-positive: var(--s-positive);
  --status-danger: var(--color-status-danger);
  --status-danger-bg: var(--color-status-danger-bg);
  --status-danger-edge: var(--color-status-danger-edge);
  --status-warn: var(--color-status-warn);
  --status-warn-bg: var(--color-status-warn-bg);
  --status-warn-edge: var(--color-status-warn-edge);
  --status-positive-bg: var(--s-accent);
  --status-positive-edge: var(--s-200);
  --focus-ring: var(--size-focusRing) solid var(--s-primary);
  --ring: var(--s-primary);
  --shadow-xs: 0 1px 2px rgba(15, 17, 22, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 17, 22, 0.06), 0 1px 2px rgba(15, 17, 22, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 17, 22, 0.06), 0 2px 4px rgba(15, 17, 22, 0.04);
  --shadow-lg: 0 12px 32px rgba(15, 17, 22, 0.08), 0 4px 8px rgba(15, 17, 22, 0.04);

  /* app compatibility aliases (old names -> source of truth) */
  --text-xs: var(--type-xs);
  --text-sm: var(--type-sm);
  --text-base: var(--type-base);
  --text-lg: var(--type-lg);
  --text-xl: var(--type-xl);
  --text-2xl: var(--type-2xl);
  --text-3xl: var(--type-3xl);
  --text-4xl: var(--type-4xl);
  --text-5xl: var(--type-5xl);
  --text-6xl: var(--type-6xl);
  --lh-tight: var(--leading-tight);
  --lh-snug: var(--leading-snug);
  --lh-normal: var(--leading-normal);
  --lh-relaxed: var(--leading-relaxed);
  --size-tap-target: var(--size-tap);
  --brand-creation: var(--s-primary);
  --brand-secondary: var(--s-dark);
  --brand-harmony: var(--status-positive);
  --brand-hub: var(--status-warn);
  --brand-fulfillment: var(--s-primary);
  --creation-50: var(--s-50);
  --creation-600: var(--s-600);
  --success: var(--status-positive);
  --warning: var(--status-warn);
  --premium: var(--s-primary);
}

:root, [data-scheme="obsidian"]{
  --s-primary: #0F2C5A;
  --s-secondary: #486581;
  --s-positive: #486581;
  --s-accent: #D9E2EC;
  --s-base: #F0F4F8;
  --s-dark: #0B192C;
  --s-50: #E7EAEF;
  --s-100: #CAD1DB;
  --s-200: #9FABBD;
  --s-300: #6F809C;
  --s-400: #3A5278;
  --s-500: #0F2C5A;
  --s-600: #0E264C;
  --s-700: #0D203E;
  --s-800: #0C192F;
  --s-900: #0B1421;
  --n-0: var(--color-neutral-0);
  --n-50: var(--color-neutral-50);
  --n-100: var(--color-neutral-100);
  --n-200: var(--color-neutral-200);
  --n-300: var(--color-neutral-300);
  --n-400: var(--color-neutral-400);
  --n-500: var(--color-neutral-500);
  --n-600: var(--color-neutral-600);
  --n-700: var(--color-neutral-700);
  --n-800: var(--color-neutral-800);
  --n-900: var(--color-neutral-900);
  --n-950: var(--color-neutral-950);
  --accent: var(--s-primary);
  --status-positive: var(--s-positive);
  --status-positive-bg: var(--s-accent);
  --status-positive-edge: var(--s-200);
  --focus-ring: var(--size-focusRing) solid var(--s-primary);
  --ring: var(--s-primary);
  --brand-creation: var(--s-primary);
  --brand-secondary: var(--s-dark);
  --brand-harmony: var(--status-positive);
  --brand-fulfillment: var(--s-primary);
  --creation-50: var(--s-50);
  --creation-600: var(--s-600);
  --success: var(--status-positive);
  --premium: var(--s-primary);
}

[data-scheme="steel"]{
  --s-primary: #0A0A0A;
  --s-secondary: #52525B;
  --s-positive: #52525B;
  --s-accent: #E4E4E7;
  --s-base: #F4F4F5;
  --s-dark: #18181B;
  --s-50: #ECECED;
  --s-100: #D5D5D6;
  --s-200: #B2B2B5;
  --s-300: #8C8C90;
  --s-400: #626267;
  --s-500: #3F3F46;
  --s-600: #35353B;
  --s-700: #2C2C31;
  --s-800: #222226;
  --s-900: #19191C;
  --n-0: var(--color-neutral-0);
  --n-50: var(--color-neutral-50);
  --n-100: var(--color-neutral-100);
  --n-200: var(--color-neutral-200);
  --n-300: var(--color-neutral-300);
  --n-400: var(--color-neutral-400);
  --n-500: var(--color-neutral-500);
  --n-600: var(--color-neutral-600);
  --n-700: var(--color-neutral-700);
  --n-800: var(--color-neutral-800);
  --n-900: var(--color-neutral-900);
  --n-950: var(--color-neutral-950);
  --accent: var(--s-primary);
  --status-positive: var(--s-positive);
  --status-positive-bg: var(--s-accent);
  --status-positive-edge: var(--s-200);
  --focus-ring: var(--size-focusRing) solid var(--s-primary);
  --ring: var(--s-primary);
  --brand-creation: var(--s-primary);
  --brand-secondary: var(--s-dark);
  --brand-harmony: var(--status-positive);
  --brand-fulfillment: var(--s-primary);
  --creation-50: var(--s-50);
  --creation-600: var(--s-600);
  --success: var(--status-positive);
  --premium: var(--s-primary);
}

[data-scheme="brass"]{
  --s-primary: #111827;
  --s-secondary: #A07E3C;
  --s-positive: #A07E3C;
  --s-accent: #F6EFDF;
  --s-base: #FAF8F5;
  --s-dark: #0F172A;
  --s-50: #F6F2EC;
  --s-100: #EAE3D4;
  --s-200: #D9CBB1;
  --s-300: #C6B28A;
  --s-400: #B1955F;
  --s-500: #A07E3C;
  --s-600: #856933;
  --s-700: #6A542A;
  --s-800: #4E3E21;
  --s-900: #342A19;
  --n-0: var(--color-neutral-0);
  --n-50: var(--color-neutral-50);
  --n-100: var(--color-neutral-100);
  --n-200: var(--color-neutral-200);
  --n-300: var(--color-neutral-300);
  --n-400: var(--color-neutral-400);
  --n-500: var(--color-neutral-500);
  --n-600: var(--color-neutral-600);
  --n-700: var(--color-neutral-700);
  --n-800: var(--color-neutral-800);
  --n-900: var(--color-neutral-900);
  --n-950: var(--color-neutral-950);
  --accent: var(--s-primary);
  --status-positive: var(--s-positive);
  --status-positive-bg: var(--s-accent);
  --status-positive-edge: var(--s-200);
  --focus-ring: var(--size-focusRing) solid var(--s-primary);
  --ring: var(--s-primary);
  --brand-creation: var(--s-primary);
  --brand-secondary: var(--s-dark);
  --brand-harmony: var(--status-positive);
  --brand-fulfillment: var(--s-primary);
  --creation-50: var(--s-50);
  --creation-600: var(--s-600);
  --success: var(--status-positive);
  --premium: var(--s-primary);
}



[data-theme="dark"], .dark{
  --bg: var(--s-dark);
  --bg-muted: var(--color-neutral-900);
  --bg-elevated: var(--color-neutral-800);
  --fg: var(--color-neutral-50);
  --border: var(--color-neutral-800);
  --border-strong: var(--color-neutral-700);
  --color-cat-1: #6E8FB5;
  --color-cat-2: #C6A768;
  --color-cat-3: #9AA0AA;
  --color-cat-4: #8AA4BE;
  --color-cat-5: #A9BDD4;
  --color-cat-6: #B29350;
  --fg-body: #D9DEE6;
  --fg-subtle: #B8C0CC;
  --fg-muted: #9AA4B2;
  --fg-faint: #6C7684;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.3);
  --status-positive-bg: color-mix(in srgb, var(--status-positive) 18%, var(--bg));
  --status-positive-edge: color-mix(in srgb, var(--status-positive) 45%, var(--border));
  --status-danger-bg: color-mix(in srgb, var(--status-danger) 22%, var(--bg));
  --status-warn-bg: color-mix(in srgb, var(--status-warn) 22%, var(--bg));
}