/* Kepton Capital Design System tokens, compiled by web/ds_tools.py from the artifact's tokens.json. */
:root, [data-theme="light"] {
  --brand-ink: #121417;
  --brand-bone: #f3f0e8;
  --brand-green: #2f5d50;
  --brand-slate: #8a9099;
  --brand-terracotta: #c8553d;
  --brand-terracotta-text: #a8432f;
  --brand-slate-text: #5c626b;
  --brand-paper-negative: #fafaf7;
  --night-000: #0b0b0a;
  --night-100: #161614;
  --night-200: #22211e;
  --night-300: #2c2b27;
  --surface-page: var(--brand-bone);
  --surface-raised: #fbfaf6;
  --surface-muted: #e9e5da;
  --surface-brand: var(--brand-green);
  --surface-inverse: var(--brand-ink);
  --text-primary: var(--brand-ink);
  --text-secondary: #4a4f57;
  --text-tertiary: var(--brand-slate-text);
  --text-accent: var(--brand-terracotta-text);
  --text-brand: var(--brand-green);
  --text-on-brand: var(--brand-bone);
  --text-inverse: var(--brand-bone);
  --border-subtle: #ddd8cc;
  --border-default: #c9c3b5;
  --border-field: #6b7078;
  --border-strong: var(--brand-ink);
  --action-primary: var(--brand-ink);
  --action-primary-hover: #2a2d32;
  --action-primary-fg: var(--brand-bone);
  --action-secondary-hover: #e9e5da;
  --accent: var(--brand-terracotta);
  --focus-ring: var(--brand-green);
  --logo-ink: var(--brand-ink);
  --danger: #9b2c1f;
  --success: var(--brand-green);
  --surface-hover: #f1eee6;
  --chart-1: #0f8060;
  --chart-2: #2f6db5;
  --chart-3: #bd4f37;
  --chart-4: #8a5aa8;
  --chart-muted: #b9b3a5;
  --chart-track: #ebe7dd;
  --chart-on: #ffffff;
  --status-ok: var(--brand-green);
  --status-warn: #8a5a00;
  --status-todo: var(--brand-slate-text);
  --shadow-float: 0 2px 6px rgba(18, 20, 23, 0.06), 0 24px 48px rgba(18, 20, 23, 0.10);
}
[data-theme="dark"] {
  color-scheme: dark;
  --surface-page: var(--night-000);
  --surface-raised: var(--night-100);
  --surface-muted: var(--night-200);
  --surface-brand: var(--brand-green);
  --surface-inverse: var(--brand-bone);
  --text-primary: var(--brand-bone);
  --text-secondary: #b4b8be;
  --text-tertiary: var(--brand-slate);
  --text-accent: #e07a63;
  --text-brand: #7fb3a3;
  --text-on-brand: var(--brand-bone);
  --text-inverse: var(--brand-ink);
  --border-subtle: var(--night-300);
  --border-default: #3a3934;
  --border-field: #7d8187;
  --border-strong: var(--brand-bone);
  --action-primary: var(--brand-bone);
  --action-primary-hover: #ffffff;
  --action-primary-fg: var(--brand-ink);
  --action-secondary-hover: var(--night-200);
  --accent: var(--brand-terracotta);
  --focus-ring: var(--brand-bone);
  --logo-ink: var(--brand-paper-negative);
  --danger: #f08a76;
  --success: #7fb3a3;
  --surface-hover: #1c1c19;
  --chart-1: #2a9a76;
  --chart-2: #4f8ad6;
  --chart-3: #d9654c;
  --chart-4: #a07fd0;
  --chart-muted: #4a4943;
  --chart-track: #26251f;
  --chart-on: #0b0b0a;
  --status-ok: #7fb3a3;
  --status-warn: #e3a948;
  --status-todo: var(--brand-slate);
  --shadow-float: 0 2px 6px rgba(0, 0, 0, 0.4), 0 24px 64px rgba(0, 0, 0, 0.55);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;
    --surface-page: var(--night-000);
    --surface-raised: var(--night-100);
    --surface-muted: var(--night-200);
    --surface-brand: var(--brand-green);
    --surface-inverse: var(--brand-bone);
    --text-primary: var(--brand-bone);
    --text-secondary: #b4b8be;
    --text-tertiary: var(--brand-slate);
    --text-accent: #e07a63;
    --text-brand: #7fb3a3;
    --text-on-brand: var(--brand-bone);
    --text-inverse: var(--brand-ink);
    --border-subtle: var(--night-300);
    --border-default: #3a3934;
    --border-field: #7d8187;
    --border-strong: var(--brand-bone);
    --action-primary: var(--brand-bone);
    --action-primary-hover: #ffffff;
    --action-primary-fg: var(--brand-ink);
    --action-secondary-hover: var(--night-200);
    --accent: var(--brand-terracotta);
    --focus-ring: var(--brand-bone);
    --logo-ink: var(--brand-paper-negative);
    --danger: #f08a76;
    --success: #7fb3a3;
    --surface-hover: #1c1c19;
    --chart-1: #2a9a76;
    --chart-2: #4f8ad6;
    --chart-3: #d9654c;
    --chart-4: #a07fd0;
    --chart-muted: #4a4943;
    --chart-track: #26251f;
    --chart-on: #0b0b0a;
    --status-ok: #7fb3a3;
    --status-warn: #e3a948;
    --status-todo: var(--brand-slate);
    --shadow-float: 0 2px 6px rgba(0, 0, 0, 0.4), 0 24px 64px rgba(0, 0, 0, 0.55);
  }
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --section-pad-y: 112px;
  --section-pad-y-sm: 72px;
  --content-max: 1200px;
  --text-max: 640px;
  --gutter: 24px;
  --gutter-sm: 16px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 9999px;
  --nav-w: 248px;
  --nav-w-collapsed: 72px;
  --border-hairline: 1px;
  --border-thick: 2px;
  --control-sm: 36px;
  --control-md: 44px;
  --control-lg: 52px;
  --logo-min: 96px;
  --symbol-min: 24px;
  --duration-fast: 160ms;
  --duration-base: 350ms;
  --duration-slow: 900ms;
  --duration-turn: 1300ms;
  --duration-line: 3600ms;
  --easing-out: cubic-bezier(0.16, 1, 0.3, 1);
  --easing-in-out: cubic-bezier(0.7, 0, 0.2, 1);
  --font-display: Jost, 'Futura', 'Century Gothic', system-ui, sans-serif;
  --font-text: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
@font-face { font-family: 'Jost'; src: url('fonts/Jost.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('fonts/IBMPlexSans.ttf') format('truetype'); font-weight: 100 700; font-style: normal; font-display: swap; }
.display-xl { font-family: var(--font-display); font-size: 72px; line-height: 1.02; font-weight: 450; letter-spacing: -0.01em; }
.display-lg { font-family: var(--font-display); font-size: 56px; line-height: 1.05; font-weight: 450; letter-spacing: -0.01em; }
.h1 { font-family: var(--font-display); font-size: 40px; line-height: 1.08; font-weight: 500; }
.h2 { font-family: var(--font-display); font-size: 28px; line-height: 1.15; font-weight: 500; }
.h3 { font-family: var(--font-display); font-size: 20px; line-height: 1.25; font-weight: 500; }
.figure { font-family: var(--font-display); font-size: 64px; line-height: 1; font-weight: 300; letter-spacing: -0.02em; }
.kpi { font-family: var(--font-display); font-size: 36px; line-height: 1.05; font-weight: 300; letter-spacing: -0.02em; }
.label { font-family: var(--font-display); font-size: 12px; line-height: 1.3; font-weight: 500; letter-spacing: 0.14em; }
.body-lg { font-family: var(--font-text); font-size: 19px; line-height: 1.55; font-weight: 400; }
.body { font-family: var(--font-text); font-size: 16px; line-height: 1.6; font-weight: 400; }
.small { font-family: var(--font-text); font-size: 14px; line-height: 1.5; font-weight: 400; }
.caption { font-family: var(--font-text); font-size: 12px; line-height: 1.45; font-weight: 400; }
.button { font-family: var(--font-text); font-size: 15px; line-height: 1; font-weight: 500; }