/* Sivali Design System — generated from tokens.json */
:root, [data-theme="current"] {
  --black: #121212;
  --white: #ffffff;
  --neutral-700: #201f24;
  --neutral-600: #39383c;
  --neutral-500: #545356;
  --neutral-400: #707072;
  --neutral-300: #8e8d90;
  --neutral-200: #adadae;
  --neutral-100: #dbdbdc;
  --neutral-50: #f5f5f5;
  --primary-700: #393987;
  --primary-600: #39399b;
  --primary-500: #4848ba;
  --primary-400: #5c5ce8;
  --primary-300: #7f7ff4;
  --primary-200: #95a5ff;
  --primary-100: #c7cfff;
  --primary-50: #ebeeff;
  --aux-700: #015b6a;
  --aux-600: #adfcb9;
  --aux-500: #c8ffd0;
  --aux-400: #d5ffdb;
  --aux-300: #e3ffe7;
  --aux-200: #ebffee;
  --aux-100: #f1fff3;
  --aux-50: #f5fff7;
  --brand-indigo: var(--primary-600);
  --brand-cyan: var(--aux-600);
  --text-heading: var(--neutral-700);
  --text-body: var(--neutral-600);
  --text-muted: var(--neutral-400);
  --text-inverse: var(--white);
  --text-on-accent: var(--aux-700);
  --text-link: var(--primary-600);
  --surface-page: var(--white);
  --surface-subtle: var(--neutral-50);
  --surface-card: var(--white);
  --surface-brand: var(--primary-600);
  --surface-brand-soft: var(--primary-50);
  --surface-accent: var(--aux-600);
  --surface-accent-soft: var(--aux-100);
  --border-default: var(--neutral-100);
  --border-strong: var(--neutral-200);
  --border-brand: var(--primary-600);
  --action-primary: var(--primary-600);
  --action-primary-hover: var(--primary-700);
  --action-primary-active: var(--primary-700);
  --action-accent: var(--aux-600);
  --action-accent-hover: var(--aux-500);
  --success: #1e8e3e;
  --warning: #b7791f;
  --danger: #c62828;
  --info: var(--primary-500);
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(18,18,18,.06);
  --shadow-sm: 0 2px 6px rgba(18,18,18,.08);
  --shadow-md: 0 8px 24px rgba(57,57,155,.10);
  --shadow-lg: 0 16px 48px rgba(57,57,155,.14);
}
[data-theme="modern"] {
  --brand-indigo: var(--primary-600);
  --brand-cyan: var(--aux-600);
  --text-heading: #14142b;
  --text-body: #3b3b52;
  --text-muted: #6e6e87;
  --text-inverse: var(--white);
  --text-on-accent: var(--aux-700);
  --text-link: var(--primary-600);
  --surface-page: #fafafe;
  --surface-subtle: #f1f2fa;
  --surface-card: #ffffff;
  --surface-brand: #2a2a7a;
  --surface-brand-soft: #ebeeff;
  --surface-accent: var(--aux-600);
  --surface-accent-soft: var(--aux-100);
  --border-default: rgba(20,20,43,.08);
  --border-strong: rgba(20,20,43,.16);
  --border-brand: var(--primary-600);
  --action-primary: #4848ba;
  --action-primary-hover: #39399b;
  --action-primary-active: #393987;
  --action-accent: var(--aux-600);
  --action-accent-hover: var(--aux-500);
  --info: var(--primary-500);
  --shadow-xs: 0 1px 2px rgba(20,20,43,.04),0 0 0 1px rgba(20,20,43,.05);
  --shadow-sm: 0 4px 12px rgba(20,20,43,.06),0 0 0 1px rgba(20,20,43,.05);
  --shadow-md: 0 12px 32px rgba(57,57,155,.12);
}
:root {
  --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-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 999px;
  --font-heading: 'Ubuntu',system-ui,sans-serif;
  --font-body: 'Open Sans',system-ui,sans-serif;
  --font-mono: 'Ubuntu Mono',ui-monospace,monospace;
}
.h1 { font-family: var(--font-heading); font-size: 40px; line-height: 48px; font-weight: 500; }
.h2 { font-family: var(--font-heading); font-size: 32px; line-height: 40px; font-weight: 500; }
.h3 { font-family: var(--font-heading); font-size: 24px; line-height: 32px; font-weight: 500; }
.title { font-family: var(--font-heading); font-size: 20px; line-height: 28px; font-weight: 500; }
.subtitle { font-family: var(--font-heading); font-size: 18px; line-height: 24px; font-weight: 500; }
.body1 { font-family: var(--font-body); font-size: 16px; line-height: 24px; font-weight: 400; }
.body2 { font-family: var(--font-body); font-size: 14px; line-height: 22px; font-weight: 400; }
.caption { font-family: var(--font-body); font-size: 12px; line-height: 18px; font-weight: 400; }