/* Konventix design tokens v0.2.0. Generated from tokens/*.tokens.json by src/token-build/build.mjs. Do not edit. */

/* Layer 1: core palette + theme-independent semantics + component hooks.
   Layer 2: light theme values (default).
   Dark theme applies via [data-theme="dark"] or the OS preference when no explicit theme is set. */
:root {
  color-scheme: light;
  --kx-color-konventix-ink: #17191C;
  --kx-color-konventix-travertine: #F3EFE6;
  --kx-color-konventix-cinnabar: #B44732;
  --kx-color-konventix-patina: #2C6B62;
  --kx-color-white: #FFFFFF;
  --kx-color-black: #000000;
  --kx-color-cinnabar-50: #FFF2EF;
  --kx-color-cinnabar-100: #FFE4DF;
  --kx-color-cinnabar-200: #FFC9BD;
  --kx-color-cinnabar-300: #EDA696;
  --kx-color-cinnabar-400: #D7806E;
  --kx-color-cinnabar-500: #B44732;
  --kx-color-cinnabar-600: #A23E2B;
  --kx-color-cinnabar-700: #853020;
  --kx-color-cinnabar-800: #652114;
  --kx-color-cinnabar-900: #471208;
  --kx-color-patina-50: #EBF9F6;
  --kx-color-patina-100: #DFEFEC;
  --kx-color-patina-200: #C7DDD9;
  --kx-color-patina-300: #A4C2BC;
  --kx-color-patina-400: #7DA59E;
  --kx-color-patina-500: #2C6B62;
  --kx-color-patina-600: #225B53;
  --kx-color-patina-700: #14433D;
  --kx-color-patina-800: #062D28;
  --kx-color-patina-900: #011B17;
  --kx-color-neutral-0: #FFFFFF;
  --kx-color-neutral-50: #F9F7F3;
  --kx-color-neutral-100: #E6E5DD;
  --kx-color-neutral-200: #D5D5CE;
  --kx-color-neutral-300: #BCBFB8;
  --kx-color-neutral-400: #9BA09B;
  --kx-color-neutral-500: #7C827F;
  --kx-color-neutral-600: #5F6564;
  --kx-color-neutral-700: #494E4F;
  --kx-color-neutral-800: #35393A;
  --kx-color-neutral-900: #242729;
  --kx-color-neutral-950: #1D1F22;
  --kx-color-neutral-975: #111315;
  --kx-color-neutral-1000: #17191C;
  --kx-color-green-100: #DEF1E1;
  --kx-color-green-300: #69C27E;
  --kx-color-green-500: #2A7A3F;
  --kx-color-green-900: #1F3423;
  --kx-color-amber-100: #FAE9CE;
  --kx-color-amber-300: #EDB345;
  --kx-color-amber-400: #D99A1E;
  --kx-color-amber-500: #8A5A00;
  --kx-color-amber-900: #3B2B0D;
  --kx-color-crimson-100: #FFE4E5;
  --kx-color-crimson-300: #F87584;
  --kx-color-crimson-500: #A61E3C;
  --kx-color-crimson-900: #432326;
  --kx-color-slate-100: #E1ECFC;
  --kx-color-slate-300: #82ADEA;
  --kx-color-slate-500: #3D5E8C;
  --kx-color-slate-900: #222E3F;
  --kx-font-family-ui: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kx-font-family-display: "Inter Display", Inter, system-ui, sans-serif;
  --kx-font-family-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --kx-font-weight-regular: 400;
  --kx-font-weight-medium: 500;
  --kx-font-weight-semibold: 600;
  --kx-font-weight-bold: 700;
  --kx-font-size-xs: 0.75rem;
  --kx-font-size-sm: 0.875rem;
  --kx-font-size-md: 1rem;
  --kx-font-size-lg: 1.125rem;
  --kx-font-size-xl: 1.25rem;
  --kx-font-size-2xl: 1.5rem;
  --kx-font-size-3xl: 1.875rem;
  --kx-font-size-4xl: 2.25rem;
  --kx-font-size-5xl: 3rem;
  --kx-font-size-6xl: 3.75rem;
  --kx-font-line-height-tight: 1.15;
  --kx-font-line-height-snug: 1.3;
  --kx-font-line-height-normal: 1.5;
  --kx-font-line-height-relaxed: 1.65;
  --kx-font-letter-spacing-tight: -0.01em;
  --kx-font-letter-spacing-normal: 0em;
  --kx-font-letter-spacing-wide: 0.04em;
  --kx-font-letter-spacing-caps: 0.08em;
  --kx-space-0: 0px;
  --kx-space-1: 4px;
  --kx-space-2: 8px;
  --kx-space-3: 12px;
  --kx-space-4: 16px;
  --kx-space-5: 20px;
  --kx-space-6: 24px;
  --kx-space-8: 32px;
  --kx-space-10: 40px;
  --kx-space-12: 48px;
  --kx-space-16: 64px;
  --kx-space-20: 80px;
  --kx-space-24: 96px;
  --kx-radius-none: 0px;
  --kx-radius-sm: 2px;
  --kx-radius-md: 4px;
  --kx-radius-lg: 8px;
  --kx-radius-full: 9999px;
  --kx-border-width-hairline: 1px;
  --kx-border-width-thick: 2px;
  --kx-size-focus-ring: 2px;
  --kx-size-control-sm: 32px;
  --kx-size-control-md: 40px;
  --kx-size-control-lg: 48px;
  --kx-motion-duration-fast: 120ms;
  --kx-motion-duration-normal: 200ms;
  --kx-motion-duration-slow: 320ms;
  --kx-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --kx-motion-easing-enter: cubic-bezier(0, 0, 0.2, 1);
  --kx-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
  --kx-color-background: #F3EFE6;
  --kx-color-surface: #FFFFFF;
  --kx-color-surface-raised: #FFFFFF;
  --kx-color-surface-sunken: #E6E5DD;
  --kx-color-chrome: #17191C;
  --kx-color-on-chrome: #F3EFE6;
  --kx-color-on-chrome-muted: #9BA09B;
  --kx-color-overlay: #17191CB3;
  --kx-color-text: #17191C;
  --kx-color-text-muted: #5F6564;
  --kx-color-text-subtle: #7C827F;
  --kx-color-text-inverse: #F3EFE6;
  --kx-color-text-on-brand: #FFFFFF;
  --kx-color-brand: #B44732;
  --kx-color-brand-hover: #A23E2B;
  --kx-color-brand-active: #853020;
  --kx-color-brand-text: #B44732;
  --kx-color-brand-surface: #FFF2EF;
  --kx-color-secondary: #2C6B62;
  --kx-color-secondary-hover: #225B53;
  --kx-color-secondary-surface: #EBF9F6;
  --kx-color-on-secondary: #FFFFFF;
  --kx-color-link: #B44732;
  --kx-color-link-hover: #853020;
  --kx-color-focus: #2C6B62;
  --kx-color-selection: #FFE4DF;
  --kx-color-border: #D5D5CE;
  --kx-color-border-strong: #7C827F;
  --kx-color-border-brand: #B44732;
  --kx-color-success: #2A7A3F;
  --kx-color-on-success: #FFFFFF;
  --kx-color-success-surface: #DEF1E1;
  --kx-color-warning: #8A5A00;
  --kx-color-warning-emphasis: #D99A1E;
  --kx-color-on-warning-emphasis: #17191C;
  --kx-color-warning-surface: #FAE9CE;
  --kx-color-danger: #A61E3C;
  --kx-color-on-danger: #FFFFFF;
  --kx-color-danger-surface: #FFE4E5;
  --kx-color-info: #3D5E8C;
  --kx-color-on-info: #FFFFFF;
  --kx-color-info-surface: #E1ECFC;
  --kx-color-chart-1: #039583;
  --kx-color-chart-2: #B44732;
  --kx-color-chart-3: #3E66B3;
  --kx-color-chart-4: #C99414;
  --kx-color-chart-5: #953D7C;
  --kx-color-chart-6: #779634;
  --kx-color-chart-grid: #D5D5CE;
  --kx-color-chart-axis: #7C827F;
  --kx-shadow-sm: 0px 1px 2px 0px #17191C1A;
  --kx-shadow-md: 0px 4px 12px -2px #17191C24;
  --kx-button-primary-background: var(--kx-color-brand);
  --kx-button-primary-background-hover: var(--kx-color-brand-hover);
  --kx-button-primary-background-active: var(--kx-color-brand-active);
  --kx-button-primary-text: var(--kx-color-text-on-brand);
  --kx-button-secondary-background: var(--kx-color-surface);
  --kx-button-secondary-border: var(--kx-color-border-strong);
  --kx-button-secondary-text: var(--kx-color-text);
  --kx-button-danger-background: var(--kx-color-danger);
  --kx-button-danger-text: var(--kx-color-on-danger);
  --kx-button-radius: var(--kx-radius-md);
  --kx-navigation-background: var(--kx-color-chrome);
  --kx-navigation-text: var(--kx-color-on-chrome);
  --kx-navigation-text-muted: var(--kx-color-on-chrome-muted);
  --kx-navigation-active-indicator: var(--kx-color-brand);
  --kx-card-background: var(--kx-color-surface);
  --kx-card-border: var(--kx-color-border);
  --kx-card-radius: var(--kx-radius-lg);
  --kx-input-background: var(--kx-color-surface);
  --kx-input-border: var(--kx-color-border-strong);
  --kx-input-border-focus: var(--kx-color-focus);
  --kx-input-text: var(--kx-color-text);
  --kx-input-placeholder: var(--kx-color-text-subtle);
  --kx-focus-ring-color: var(--kx-color-focus);
  --kx-focus-ring-width: var(--kx-size-focus-ring);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --kx-color-background: #17191C;
  --kx-color-surface: #1D1F22;
  --kx-color-surface-raised: #242729;
  --kx-color-surface-sunken: #111315;
  --kx-color-chrome: #111315;
  --kx-color-on-chrome: #F3EFE6;
  --kx-color-on-chrome-muted: #9BA09B;
  --kx-color-overlay: #000000B3;
  --kx-color-text: #F3EFE6;
  --kx-color-text-muted: #9BA09B;
  --kx-color-text-subtle: #7C827F;
  --kx-color-text-inverse: #17191C;
  --kx-color-text-on-brand: #FFFFFF;
  --kx-color-brand: #B44732;
  --kx-color-brand-hover: #A23E2B;
  --kx-color-brand-active: #853020;
  --kx-color-brand-text: #D7806E;
  --kx-color-brand-surface: #471208;
  --kx-color-secondary: #7DA59E;
  --kx-color-secondary-hover: #A4C2BC;
  --kx-color-secondary-surface: #011B17;
  --kx-color-on-secondary: #17191C;
  --kx-color-link: #D7806E;
  --kx-color-link-hover: #EDA696;
  --kx-color-focus: #7DA59E;
  --kx-color-selection: #652114;
  --kx-color-border: #35393A;
  --kx-color-border-strong: #7C827F;
  --kx-color-border-brand: #D7806E;
  --kx-color-success: #69C27E;
  --kx-color-on-success: #17191C;
  --kx-color-success-surface: #1F3423;
  --kx-color-warning: #EDB345;
  --kx-color-warning-emphasis: #EDB345;
  --kx-color-on-warning-emphasis: #17191C;
  --kx-color-warning-surface: #3B2B0D;
  --kx-color-danger: #F87584;
  --kx-color-on-danger: #17191C;
  --kx-color-danger-surface: #432326;
  --kx-color-info: #82ADEA;
  --kx-color-on-info: #17191C;
  --kx-color-info-surface: #222E3F;
  --kx-color-chart-1: #0EA28F;
  --kx-color-chart-2: #CC624C;
  --kx-color-chart-3: #5D85CE;
  --kx-color-chart-4: #B98A1C;
  --kx-color-chart-5: #B55B9A;
  --kx-color-chart-6: #819F47;
  --kx-color-chart-grid: #35393A;
  --kx-color-chart-axis: #7C827F;
  --kx-shadow-sm: 0px 1px 2px 0px #00000059;
  --kx-shadow-md: 0px 4px 12px -2px #00000080;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;
  --kx-color-background: #17191C;
  --kx-color-surface: #1D1F22;
  --kx-color-surface-raised: #242729;
  --kx-color-surface-sunken: #111315;
  --kx-color-chrome: #111315;
  --kx-color-on-chrome: #F3EFE6;
  --kx-color-on-chrome-muted: #9BA09B;
  --kx-color-overlay: #000000B3;
  --kx-color-text: #F3EFE6;
  --kx-color-text-muted: #9BA09B;
  --kx-color-text-subtle: #7C827F;
  --kx-color-text-inverse: #17191C;
  --kx-color-text-on-brand: #FFFFFF;
  --kx-color-brand: #B44732;
  --kx-color-brand-hover: #A23E2B;
  --kx-color-brand-active: #853020;
  --kx-color-brand-text: #D7806E;
  --kx-color-brand-surface: #471208;
  --kx-color-secondary: #7DA59E;
  --kx-color-secondary-hover: #A4C2BC;
  --kx-color-secondary-surface: #011B17;
  --kx-color-on-secondary: #17191C;
  --kx-color-link: #D7806E;
  --kx-color-link-hover: #EDA696;
  --kx-color-focus: #7DA59E;
  --kx-color-selection: #652114;
  --kx-color-border: #35393A;
  --kx-color-border-strong: #7C827F;
  --kx-color-border-brand: #D7806E;
  --kx-color-success: #69C27E;
  --kx-color-on-success: #17191C;
  --kx-color-success-surface: #1F3423;
  --kx-color-warning: #EDB345;
  --kx-color-warning-emphasis: #EDB345;
  --kx-color-on-warning-emphasis: #17191C;
  --kx-color-warning-surface: #3B2B0D;
  --kx-color-danger: #F87584;
  --kx-color-on-danger: #17191C;
  --kx-color-danger-surface: #432326;
  --kx-color-info: #82ADEA;
  --kx-color-on-info: #17191C;
  --kx-color-info-surface: #222E3F;
  --kx-color-chart-1: #0EA28F;
  --kx-color-chart-2: #CC624C;
  --kx-color-chart-3: #5D85CE;
  --kx-color-chart-4: #B98A1C;
  --kx-color-chart-5: #B55B9A;
  --kx-color-chart-6: #819F47;
  --kx-color-chart-grid: #35393A;
  --kx-color-chart-axis: #7C827F;
  --kx-shadow-sm: 0px 1px 2px 0px #00000059;
  --kx-shadow-md: 0px 4px 12px -2px #00000080;
  }
}