/* SKARA Design System — generated from tokens.json */
:root, [data-theme="light"] {
  --green-950: #03110E;
  --green-900: #061D19;
  --green-800: #0B2D26;
  --green-700: #123B33;
  --green-600: #1C4C42;
  --green-500: #2B6355;
  --green-400: #4A8574;
  --green-300: #7DAA9B;
  --green-200: #B3CEC3;
  --green-100: #DAE7E1;
  --green-50: #EDF3EF;
  --gold-800: #6E5330;
  --gold-700: #8A6A3E;
  --gold-600: #A8854F;
  --gold-500: #C09A64;
  --gold-400: #D4AF7C;
  --gold-300: #E1C59D;
  --gold-200: #EDDBC1;
  --gold-100: #F6EDDF;
  --ivory-50: #FBFAF6;
  --ivory-100: #F4F1E8;
  --ivory-200: #ECE8DC;
  --ivory-300: #E1DCCD;
  --stone-300: #D3CDBE;
  --stone-400: #AEA99C;
  --stone-500: #8A877E;
  --stone-600: #6B6962;
  --stone-700: #4D4C47;
  --stone-800: #302F2B;
  --stone-900: #1B1B18;
  --night-950: #030D0B;
  --night-900: #051512;
  --night-850: #081D19;
  --night-800: #0B231E;
  --night-700: #102B25;
  --night-600: #17352E;
  --night-500: #21433A;
  --night-400: #33564C;
  --night-300: #56736A;
  --positive-700: #2C6B4F;
  --positive-500: #3F8F6B;
  --positive-300: #74BE98;
  --positive-100: #DDEEE3;
  --negative-700: #8E3328;
  --negative-500: #B4483C;
  --negative-300: #E68A7D;
  --negative-100: #F5DFDA;
  --warning-700: #8F5419;
  --warning-500: #C0702A;
  --warning-300: #E8A367;
  --warning-100: #F6E5D3;
  --info-700: #2E5670;
  --info-500: #3F6F8E;
  --info-300: #86AEC8;
  --info-100: #DEE8EF;
  --viz-1: #4A8574;
  --viz-2: #D4AF7C;
  --viz-3: #86AEC8;
  --viz-4: #C98A6B;
  --viz-5: #9FB59A;
  --viz-6: #8E8AA6;
  --bg-app: var(--ivory-100);
  --bg-surface: var(--ivory-50);
  --bg-surface-2: var(--ivory-200);
  --bg-sunken: var(--ivory-200);
  --bg-elevated: #FFFEFB;
  --bg-hover: rgba(11,45,38,.045);
  --bg-pressed: rgba(11,45,38,.08);
  --bg-selected: rgba(11,45,38,.07);
  --bg-inverse: var(--green-800);
  --bg-brand: var(--green-800);
  --bg-brand-deep: var(--green-900);
  --fg-1: #0E1C18;
  --fg-2: #4E5550;
  --fg-3: #7F837C;
  --fg-disabled: #ABA89F;
  --fg-inverse: var(--ivory-100);
  --fg-accent: var(--gold-700);
  --fg-brand: var(--green-800);
  --fg-link: var(--green-700);
  --fg-link-hover: var(--green-900);
  --border-1: #E4DFD2;
  --border-2: #D3CDBE;
  --border-strong: #A9A497;
  --border-accent: var(--gold-400);
  --action-primary-bg: var(--green-800);
  --action-primary-bg-hover: var(--green-700);
  --action-primary-bg-pressed: var(--green-900);
  --action-primary-fg: var(--ivory-100);
  --action-secondary-bg: var(--bg-elevated);
  --action-secondary-bg-hover: var(--ivory-200);
  --action-secondary-border: var(--border-2);
  --action-secondary-fg: var(--fg-1);
  --action-accent-bg: var(--gold-400);
  --action-accent-bg-hover: var(--gold-300);
  --action-accent-fg: var(--green-900);
  --action-danger-bg: var(--negative-500);
  --action-danger-bg-hover: var(--negative-700);
  --action-danger-fg: #FFF8F5;
  --control-bg: var(--bg-elevated);
  --control-border: var(--border-2);
  --control-border-hover: var(--border-strong);
  --control-checked: var(--green-800);
  --positive: var(--positive-700);
  --positive-bg: var(--positive-100);
  --negative: var(--negative-700);
  --negative-bg: var(--negative-100);
  --warning: var(--warning-700);
  --warning-bg: var(--warning-100);
  --info: var(--info-700);
  --info-bg: var(--info-100);
  --sev-critical: var(--negative-500);
  --sev-high: var(--warning-500);
  --sev-medium: var(--gold-600);
  --sev-low: var(--stone-500);
  --chart-grid: #E4DFD2;
  --chart-axis: #7F837C;
  --chart-line: var(--green-600);
  --chart-fill: rgba(28,76,66,.10);
  --chart-highlight: var(--gold-600);
  --chart-1: var(--green-500);
  --chart-2: var(--gold-500);
  --chart-3: var(--info-500);
  --chart-4: #B9734F;
  --chart-5: #7E9A79;
  --chart-6: #76729A;
  --scrim: rgba(6,29,25,.42);
  --shadow-none: none;
  --shadow-xs: 0 1px 0 rgba(6,29,25,.04);
  --shadow-sm: 0 1px 2px rgba(6,29,25,.06),0 1px 1px rgba(6,29,25,.03);
  --shadow-md: 0 6px 16px -4px rgba(6,29,25,.10),0 2px 4px -2px rgba(6,29,25,.06);
  --shadow-lg: 0 24px 48px -16px rgba(6,29,25,.22),0 8px 16px -8px rgba(6,29,25,.10);
  --shadow-inset: inset 0 1px 2px rgba(6,29,25,.06);
}
[data-theme="dark"] {
  --bg-app: var(--night-900);
  --bg-surface: var(--night-850);
  --bg-surface-2: var(--night-800);
  --bg-sunken: var(--night-950);
  --bg-elevated: var(--night-700);
  --bg-hover: rgba(244,241,232,.045);
  --bg-pressed: rgba(244,241,232,.08);
  --bg-selected: rgba(212,175,124,.10);
  --bg-inverse: var(--ivory-100);
  --bg-brand: var(--green-800);
  --bg-brand-deep: var(--green-950);
  --fg-1: #F1EEE5;
  --fg-2: #AEB5AC;
  --fg-3: #78837B;
  --fg-disabled: #4E5C56;
  --fg-inverse: var(--green-900);
  --fg-accent: var(--gold-400);
  --fg-brand: var(--ivory-100);
  --fg-link: var(--gold-300);
  --fg-link-hover: var(--gold-200);
  --border-1: #132E28;
  --border-2: #1D3D35;
  --border-strong: #33564C;
  --border-accent: var(--gold-500);
  --action-primary-bg: var(--ivory-100);
  --action-primary-bg-hover: #FFFFFF;
  --action-primary-bg-pressed: var(--ivory-200);
  --action-primary-fg: var(--green-900);
  --action-secondary-bg: #00000000;
  --action-secondary-bg-hover: rgba(244,241,232,.06);
  --action-secondary-border: var(--border-strong);
  --action-secondary-fg: var(--fg-1);
  --action-accent-bg: var(--gold-400);
  --action-accent-bg-hover: var(--gold-300);
  --action-accent-fg: var(--green-900);
  --action-danger-bg: var(--negative-500);
  --action-danger-bg-hover: #C85547;
  --action-danger-fg: #FFF8F5;
  --control-bg: var(--night-950);
  --control-border: var(--border-2);
  --control-border-hover: var(--border-strong);
  --control-checked: var(--gold-400);
  --positive: var(--positive-300);
  --positive-bg: rgba(116,190,152,.12);
  --negative: var(--negative-300);
  --negative-bg: rgba(230,138,125,.12);
  --warning: var(--warning-300);
  --warning-bg: rgba(232,163,103,.12);
  --info: var(--info-300);
  --info-bg: rgba(134,174,200,.12);
  --sev-critical: var(--negative-300);
  --sev-high: var(--warning-300);
  --sev-medium: var(--gold-400);
  --sev-low: var(--stone-400);
  --chart-grid: #15322B;
  --chart-axis: #78837B;
  --chart-line: var(--gold-400);
  --chart-fill: rgba(212,175,124,.10);
  --chart-highlight: var(--gold-300);
  --chart-1: var(--viz-1);
  --chart-2: var(--viz-2);
  --chart-3: var(--viz-3);
  --chart-4: var(--viz-4);
  --chart-5: var(--viz-5);
  --chart-6: var(--viz-6);
  --scrim: rgba(1,8,6,.62);
  --shadow-xs: 0 1px 0 rgba(0,0,0,.25);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 8px 20px -6px rgba(0,0,0,.55),inset 0 1px 0 rgba(244,241,232,.03);
  --shadow-lg: 0 28px 56px -16px rgba(0,0,0,.7),inset 0 1px 0 rgba(244,241,232,.04);
  --shadow-inset: inset 0 1px 2px rgba(0,0,0,.4);
}
:root {
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --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-0: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-2xl: 20px;
  --radius-pill: 999px;
  --border-w: 1px;
  --border-w-strong: 1.5px;
  --control-h-sm: 28px;
  --control-h-md: 34px;
  --control-h-lg: 42px;
  --row-h-compact: 32px;
  --row-h: 40px;
  --row-h-comfortable: 48px;
  --icon-xs: 12px;
  --icon-sm: 14px;
  --icon-md: 16px;
  --icon-lg: 20px;
  --icon-xl: 24px;
  --grid-columns: 12;
  --grid-gutter: 24px;
  --grid-margin: 32px;
  --grid-gutter-dense: 16px;
  --content-max: 1440px;
  --prose-max: 680px;
  --sidebar-w: 232px;
  --sidebar-w-collapsed: 60px;
  --topbar-h: 52px;
  --panel-w: 400px;
  --z-base: 0;
  --z-sticky: 10;
  --z-dropdown: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-tooltip: 500;
  --fs-10: 10px;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-30: 30px;
  --fs-40: 40px;
  --fs-52: 52px;
  --fs-68: 68px;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-normal: 1.45;
  --lh-relaxed: 1.6;
  --ls-display: -0.025em;
  --ls-heading: -0.012em;
  --ls-body: 0;
  --ls-eyebrow: 0.18em;
  --ls-wordmark: 0.32em;
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
.type-display-1 { font-family: var(--font-sans); font-size: 68px; line-height: 1.04; font-weight: 300; letter-spacing: -0.025em; }
.type-display-2 { font-family: var(--font-sans); font-size: 52px; line-height: 1.06; font-weight: 300; letter-spacing: -0.025em; }
.type-h1 { font-family: var(--font-sans); font-size: 40px; line-height: 1.1; font-weight: 400; letter-spacing: -0.012em; }
.type-h2 { font-family: var(--font-sans); font-size: 30px; line-height: 1.15; font-weight: 400; letter-spacing: -0.012em; }
.type-h3 { font-family: var(--font-sans); font-size: 24px; line-height: 1.2; font-weight: 500; letter-spacing: -0.012em; }
.type-h4 { font-family: var(--font-sans); font-size: 18px; line-height: 1.3; font-weight: 500; letter-spacing: -0.012em; }
.type-h5 { font-family: var(--font-sans); font-size: 16px; line-height: 1.35; font-weight: 500; letter-spacing: -0.012em; }
.type-body-lg { font-family: var(--font-sans); font-size: 16px; line-height: 1.6; font-weight: 400; }
.type-body { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; font-weight: 400; }
.type-body-sm { font-family: var(--font-sans); font-size: 13px; line-height: 1.45; font-weight: 400; }
.type-caption { font-family: var(--font-sans); font-size: 12px; line-height: 1.4; font-weight: 400; }
.type-label { font-family: var(--font-sans); font-size: 13px; line-height: 1.3; font-weight: 500; }
.type-eyebrow { font-family: var(--font-sans); font-size: 11px; line-height: 1.2; font-weight: 500; letter-spacing: 0.18em; }
.type-data { font-family: var(--font-mono); font-size: 13px; line-height: 1.3; font-weight: 400; }
.type-data-lg { font-family: var(--font-mono); font-size: 28px; line-height: 1.1; font-weight: 400; }
.type-code { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; font-weight: 400; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-latin-ext.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-latin.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-latin-ext.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-latin.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }