/* Kobalt design tokens. Generated by scripts/build_brand.py: edit there, not here.
   Source: docs/brand/00-brand-essence.md. Use the semantic tokens (--ko-bg, --ko-primary, ...)
   in product code; the scales (--ko-cobalt-600, ...) are for the rare exception.
   Theme: follows the system; force one with data-theme="light" or "dark" on any element.
   Surfaces: Iron by default (the app). Add class "ko-porcelain" for the warm marketing ground. */

:root {
  --ko-cobalt-50: #f1f4fe;
  --ko-cobalt-100: #e8edfc;
  --ko-cobalt-200: #c9d5fa;
  --ko-cobalt-300: #8fa8ff;
  --ko-cobalt-400: #6486f0;
  --ko-cobalt-500: #3a63e0;
  --ko-cobalt-600: #1f47c9;
  --ko-cobalt-700: #1a3aa6;
  --ko-cobalt-800: #122a76;
  --ko-cobalt-900: #0b1a4a;
  --ko-cobalt-950: #051037;
  --ko-iron-50: #f5f7fa;
  --ko-iron-100: #eceff4;
  --ko-iron-200: #dde2eb;
  --ko-iron-300: #afb7c8;
  --ko-iron-400: #848da5;
  --ko-iron-500: #646e88;
  --ko-iron-600: #566079;
  --ko-iron-700: #3f485d;
  --ko-iron-800: #2a3142;
  --ko-iron-850: #1f2533;
  --ko-iron-900: #161b26;
  --ko-iron-950: #0e121b;
  --ko-porcelain-50: #f7f5f0;
  --ko-porcelain-100: #efebe3;
  --ko-porcelain-200: #e2dcd0;
  --ko-porcelain-300: #b6b0a2;
  --ko-porcelain-400: #8c8576;
  --ko-porcelain-500: #6a6457;
  --ko-porcelain-600: #575146;
  --ko-porcelain-700: #423f3b;
  --ko-porcelain-800: #2e2e30;
  --ko-porcelain-900: #1b1e25;
  --ko-porcelain-950: #12161f;
  --ko-green-50: #f4f8f6;
  --ko-green-100: #e3f4ec;
  --ko-green-200: #a0dec2;
  --ko-green-300: #4fc79a;
  --ko-green-400: #41b38a;
  --ko-green-500: #339f7a;
  --ko-green-600: #248c6a;
  --ko-green-700: #13795b;
  --ko-green-800: #00573f;
  --ko-green-900: #003725;
  --ko-green-950: #002819;
  --ko-aureolin-50: #f9f6f1;
  --ko-aureolin-100: #fbf0d9;
  --ko-aureolin-200: #f2d397;
  --ko-aureolin-300: #e8b54a;
  --ko-aureolin-400: #d09d3a;
  --ko-aureolin-500: #b88629;
  --ko-aureolin-600: #a17017;
  --ko-aureolin-700: #8a5a00;
  --ko-aureolin-800: #653f00;
  --ko-aureolin-900: #422500;
  --ko-aureolin-950: #311900;
  --ko-kiln-50: #faf6f5;
  --ko-kiln-100: #fbe7e5;
  --ko-kiln-200: #ffbab1;
  --ko-kiln-300: #ff8a7e;
  --ko-kiln-400: #ea6f63;
  --ko-kiln-500: #d55448;
  --ko-kiln-600: #c0362c;
  --ko-kiln-700: #a82e25;
  --ko-kiln-800: #7d1b15;
  --ko-kiln-900: #550806;
  --ko-kiln-950: #420101;
  --ko-cerulean-50: #f4f7f9;
  --ko-cerulean-100: #e2f2f9;
  --ko-cerulean-200: #a3d9f3;
  --ko-cerulean-300: #5bc0eb;
  --ko-cerulean-400: #49abd6;
  --ko-cerulean-500: #3796c1;
  --ko-cerulean-600: #2482ad;
  --ko-cerulean-700: #0b6e99;
  --ko-cerulean-800: #004e71;
  --ko-cerulean-900: #00314a;
  --ko-cerulean-950: #002339;
  --ko-violet-50: #f7f6fa;
  --ko-violet-100: #f0e9fa;
  --ko-violet-200: #d4c0f7;
  --ko-violet-300: #b996f2;
  --ko-violet-400: #a37ae2;
  --ko-violet-500: #8e5dd1;
  --ko-violet-600: #7a3fc0;
  --ko-violet-700: #6a33ad;
  --ko-violet-800: #4f2284;
  --ko-violet-900: #35115d;
  --ko-violet-950: #29094a;
  --ko-clay-50: #fff3eb;
  --ko-clay-100: #fae4db;
  --ko-clay-200: #e7c8b9;
  --ko-clay-300: #d4ac99;
  --ko-clay-400: #c1917a;
  --ko-clay-500: #ae765b;
  --ko-clay-600: #9a5b3c;
  --ko-clay-700: #7b462b;
  --ko-clay-800: #5e311b;
  --ko-clay-900: #421e0c;
  --ko-clay-950: #341505;
  --ko-tone-cobalt-soft: #e8edfc;
  --ko-tone-cobalt-text: #1a3aa6;
  --ko-tone-cerulean-soft: #e2f2f9;
  --ko-tone-cerulean-text: #0b6e99;
  --ko-tone-green-soft: #e3f4ec;
  --ko-tone-green-text: #13795b;
  --ko-tone-aureolin-soft: #fbf0d9;
  --ko-tone-aureolin-text: #8a5a00;
  --ko-tone-violet-soft: #f0e9fa;
  --ko-tone-violet-text: #6a33ad;
  --ko-tone-kiln-soft: #fbe7e5;
  --ko-tone-kiln-text: #a82e25;
  --ko-tone-clay-soft: #fae4db;
  --ko-tone-clay-text: #7b462b;
  --ko-tone-iron-soft: #eceff4;
  --ko-tone-iron-text: #566079;
  --ko-chart-1: #1f47c9;
  --ko-chart-2: #0b6e99;
  --ko-chart-3: #13795b;
  --ko-chart-4: #e8b54a;
  --ko-chart-5: #7a3fc0;
  --ko-chart-6: #c0362c;
  --ko-chart-7: #646e88;
  --ko-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ko-font-display: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ko-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ko-weight-regular: 400;
  --ko-weight-medium: 500;
  --ko-weight-semibold: 600;
  --ko-weight-bold: 700;
  --ko-text-xs: 0.75rem;
  --ko-text-xs-lh: 1rem;
  --ko-text-sm: 0.8125rem;
  --ko-text-sm-lh: 1.125rem;
  --ko-text-base: 0.875rem;
  --ko-text-base-lh: 1.25rem;
  --ko-text-lg: 1rem;
  --ko-text-lg-lh: 1.5rem;
  --ko-heading-sm: 1.125rem;
  --ko-heading-sm-lh: 1.5rem;
  --ko-heading-md: 1.375rem;
  --ko-heading-md-lh: 1.75rem;
  --ko-heading-lg: 1.75rem;
  --ko-heading-lg-lh: 2.125rem;
  --ko-mono-sm: 0.75rem;
  --ko-mono-sm-lh: 1rem;
  --ko-site-text-xs: 0.875rem;
  --ko-site-text-xs-lh: 1.25rem;
  --ko-site-text-sm: 0.9375rem;
  --ko-site-text-sm-lh: 1.375rem;
  --ko-site-text-base: 1.0625rem;
  --ko-site-text-base-lh: 1.6875rem;
  --ko-site-text-lg: 1.25rem;
  --ko-site-text-lg-lh: 1.875rem;
  --ko-site-heading-sm: 1.5rem;
  --ko-site-heading-sm-lh: 1.875rem;
  --ko-site-heading-md: clamp(1.75rem, 4vw, 2.25rem);
  --ko-site-heading-md-lh: 1.2;
  --ko-site-heading-lg: clamp(2.25rem, 6vw, 3.5rem);
  --ko-site-heading-lg-lh: 1.08;
  --ko-site-mono-sm: 0.8125rem;
  --ko-site-mono-sm-lh: 1.25rem;
  --ko-space-1: 0.25rem;
  --ko-space-2: 0.5rem;
  --ko-space-3: 0.75rem;
  --ko-space-4: 1rem;
  --ko-space-5: 1.25rem;
  --ko-space-6: 1.5rem;
  --ko-space-8: 2rem;
  --ko-space-12: 3rem;
  --ko-space-16: 4rem;
  --ko-space-24: 6rem;
  --ko-radius-xs: 3px;
  --ko-radius-sm: 6px;
  --ko-radius-md: 8px;
  --ko-radius-lg: 12px;
  --ko-radius-full: 9999px;
  --ko-size-control: 32px;
  --ko-size-control-touch: 36px;
  --ko-size-row: 36px;
  --ko-size-row-compact: 32px;
  --ko-size-sidebar: 240px;
  --ko-size-chip: 20px;
  --ko-size-icon: 16px;
  --ko-size-icon-nav: 20px;
  --ko-shadow-1: 0 1px 2px rgb(14 18 27 / .06), 0 4px 12px rgb(14 18 27 / .08);
  --ko-shadow-2: 0 8px 32px rgb(14 18 27 / .16);
  --ko-motion-fast: 120ms;
  --ko-motion-base: 180ms;
  --ko-motion-slow: 240ms;
  --ko-motion-fast-exit: 96ms;
  --ko-motion-base-exit: 144ms;
  --ko-motion-slow-exit: 192ms;
  --ko-motion-ease-enter: cubic-bezier(0.2, 0, 0, 1);
  --ko-motion-ease-exit: cubic-bezier(0.3, 0, 1, 1);
  --ko-motion-highlight: 600ms;
  --ko-motion-breathe: 1.6s;
}

:root, [data-theme="light"] {
  color-scheme: light;
  --ko-bg: #f5f7fa;
  --ko-surface: #ffffff;
  --ko-surface-raised: #ffffff;
  --ko-surface-sunken: #eceff4;
  --ko-hover: #f5f7fa;
  --ko-line: #dde2eb;
  --ko-line-strong: #848da5;
  --ko-text: #141a26;
  --ko-text-muted: #566079;
  --ko-text-subtle: #646e88;
  --ko-primary: #1f47c9;
  --ko-primary-hover: #1a3aa6;
  --ko-on-primary: #ffffff;
  --ko-primary-soft: #e8edfc;
  --ko-primary-soft-text: #1a3aa6;
  --ko-selected: #f1f4fe;
  --ko-focus: #1f47c9;
  --ko-success: #13795b;
  --ko-success-soft: #e3f4ec;
  --ko-warning: #8a5a00;
  --ko-warning-soft: #fbf0d9;
  --ko-warning-solid: #e8b54a;
  --ko-on-warning-solid: #0e121b;
  --ko-danger: #c0362c;
  --ko-danger-text: #a82e25;
  --ko-danger-soft: #fbe7e5;
  --ko-on-danger: #ffffff;
  --ko-info: #0b6e99;
  --ko-info-soft: #e2f2f9;
  --ko-agent: #7a3fc0;
  --ko-agent-text: #6a33ad;
  --ko-agent-soft: #f0e9fa;
  --ko-avatar: #eceff4;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ko-bg: #0e121b;
    --ko-surface: #161b26;
    --ko-surface-raised: #1f2533;
    --ko-surface-sunken: #0e121b;
    --ko-hover: #1f2533;
    --ko-line: #2a3142;
    --ko-line-strong: #68728b;
    --ko-text: #e6e9f0;
    --ko-text-muted: #9aa3b8;
    --ko-text-subtle: #8a93ab;
    --ko-primary: #8fa8ff;
    --ko-primary-hover: #c9d5fa;
    --ko-on-primary: #0e121b;
    --ko-primary-soft: #1b2648;
    --ko-primary-soft-text: #c9d5fa;
    --ko-selected: #202738;
    --ko-focus: #8fa8ff;
    --ko-success: #4fc79a;
    --ko-success-soft: #203337;
    --ko-warning: #e8b54a;
    --ko-warning-soft: #323130;
    --ko-warning-solid: #e8b54a;
    --ko-on-warning-solid: #0e121b;
    --ko-danger: #ff8a7e;
    --ko-danger-text: #ff8a7e;
    --ko-danger-soft: #372c34;
    --ko-on-danger: #0e121b;
    --ko-info: #5bc0eb;
    --ko-info-soft: #223241;
    --ko-agent: #b996f2;
    --ko-agent-text: #b996f2;
    --ko-agent-soft: #2d2c42;
    --ko-avatar: #2a3142;
    --ko-tone-cobalt-soft: #272f44; --ko-tone-cobalt-text: #8fa8ff;
    --ko-tone-cerulean-soft: #223241; --ko-tone-cerulean-text: #5bc0eb;
    --ko-tone-green-soft: #203337; --ko-tone-green-text: #4fc79a;
    --ko-tone-aureolin-soft: #323130; --ko-tone-aureolin-text: #e8b54a;
    --ko-tone-violet-soft: #2d2c42; --ko-tone-violet-text: #b996f2;
    --ko-tone-kiln-soft: #372c34; --ko-tone-kiln-text: #ff8a7e;
    --ko-tone-clay-soft: #302f37; --ko-tone-clay-text: #d4ac99;
    --ko-tone-iron-soft: #282e3b; --ko-tone-iron-text: #9aa3b8;
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --ko-bg: #0e121b;
  --ko-surface: #161b26;
  --ko-surface-raised: #1f2533;
  --ko-surface-sunken: #0e121b;
  --ko-hover: #1f2533;
  --ko-line: #2a3142;
  --ko-line-strong: #68728b;
  --ko-text: #e6e9f0;
  --ko-text-muted: #9aa3b8;
  --ko-text-subtle: #8a93ab;
  --ko-primary: #8fa8ff;
  --ko-primary-hover: #c9d5fa;
  --ko-on-primary: #0e121b;
  --ko-primary-soft: #1b2648;
  --ko-primary-soft-text: #c9d5fa;
  --ko-selected: #202738;
  --ko-focus: #8fa8ff;
  --ko-success: #4fc79a;
  --ko-success-soft: #203337;
  --ko-warning: #e8b54a;
  --ko-warning-soft: #323130;
  --ko-warning-solid: #e8b54a;
  --ko-on-warning-solid: #0e121b;
  --ko-danger: #ff8a7e;
  --ko-danger-text: #ff8a7e;
  --ko-danger-soft: #372c34;
  --ko-on-danger: #0e121b;
  --ko-info: #5bc0eb;
  --ko-info-soft: #223241;
  --ko-agent: #b996f2;
  --ko-agent-text: #b996f2;
  --ko-agent-soft: #2d2c42;
  --ko-avatar: #2a3142;
  --ko-tone-cobalt-soft: #272f44; --ko-tone-cobalt-text: #8fa8ff;
  --ko-tone-cerulean-soft: #223241; --ko-tone-cerulean-text: #5bc0eb;
  --ko-tone-green-soft: #203337; --ko-tone-green-text: #4fc79a;
  --ko-tone-aureolin-soft: #323130; --ko-tone-aureolin-text: #e8b54a;
  --ko-tone-violet-soft: #2d2c42; --ko-tone-violet-text: #b996f2;
  --ko-tone-kiln-soft: #372c34; --ko-tone-kiln-text: #ff8a7e;
  --ko-tone-clay-soft: #302f37; --ko-tone-clay-text: #d4ac99;
  --ko-tone-iron-soft: #282e3b; --ko-tone-iron-text: #9aa3b8;
}

/* Surface scopes. ko-porcelain: the warm ground for marketing, the brand book and print.
   ko-iron: back to the app's Iron surfaces inside a Porcelain page. Both are deep Iron in dark. */
.ko-porcelain, [data-theme="light"].ko-porcelain, [data-theme="light"] .ko-porcelain {
  --ko-bg: #f7f5f0;
  --ko-surface: #fdfcf9;
  --ko-surface-raised: #fdfcf9;
  --ko-surface-sunken: #efebe3;
  --ko-hover: #efebe3;
  --ko-line: #e2dcd0;
  --ko-line-strong: #8c8576;
  --ko-text: #12161f;
  --ko-text-muted: #575146;
  --ko-text-subtle: #6a6457;
  --ko-avatar: #efebe3;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ko-porcelain:not([data-theme="light"]) {
    --ko-bg: #0e121b;
    --ko-surface: #161b26;
    --ko-surface-raised: #1f2533;
    --ko-surface-sunken: #0e121b;
    --ko-hover: #1f2533;
    --ko-line: #2a3142;
    --ko-line-strong: #68728b;
    --ko-text: #e6e9f0;
    --ko-text-muted: #9aa3b8;
    --ko-text-subtle: #8a93ab;
    --ko-avatar: #2a3142;
  }
}
[data-theme="dark"] .ko-porcelain, .ko-porcelain[data-theme="dark"] {
  --ko-bg: #0e121b;
  --ko-surface: #161b26;
  --ko-surface-raised: #1f2533;
  --ko-surface-sunken: #0e121b;
  --ko-hover: #1f2533;
  --ko-line: #2a3142;
  --ko-line-strong: #68728b;
  --ko-text: #e6e9f0;
  --ko-text-muted: #9aa3b8;
  --ko-text-subtle: #8a93ab;
  --ko-avatar: #2a3142;
}
.ko-iron, [data-theme="light"].ko-iron, [data-theme="light"] .ko-iron {
  --ko-bg: #f5f7fa;
  --ko-surface: #ffffff;
  --ko-surface-raised: #ffffff;
  --ko-surface-sunken: #eceff4;
  --ko-hover: #f5f7fa;
  --ko-line: #dde2eb;
  --ko-line-strong: #848da5;
  --ko-text: #141a26;
  --ko-text-muted: #566079;
  --ko-text-subtle: #646e88;
  --ko-avatar: #eceff4;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ko-iron:not([data-theme="light"]) {
    --ko-bg: #0e121b;
    --ko-surface: #161b26;
    --ko-surface-raised: #1f2533;
    --ko-surface-sunken: #0e121b;
    --ko-hover: #1f2533;
    --ko-line: #2a3142;
    --ko-line-strong: #68728b;
    --ko-text: #e6e9f0;
    --ko-text-muted: #9aa3b8;
    --ko-text-subtle: #8a93ab;
    --ko-avatar: #2a3142;
  }
}
[data-theme="dark"] .ko-iron, .ko-iron[data-theme="dark"] {
  --ko-bg: #0e121b;
  --ko-surface: #161b26;
  --ko-surface-raised: #1f2533;
  --ko-surface-sunken: #0e121b;
  --ko-hover: #1f2533;
  --ko-line: #2a3142;
  --ko-line-strong: #68728b;
  --ko-text: #e6e9f0;
  --ko-text-muted: #9aa3b8;
  --ko-text-subtle: #8a93ab;
  --ko-avatar: #2a3142;
}