/* kla.ng Designsystem: Tokens. Erzeugt von scripts/build.ts aus tokens/tokens.ts – nicht von Hand ändern. */

/* Thema: <html data-theme="light|dark"> setzt fest, ohne Attribut folgt das Gerät; data-dark="mindful" wählt die Dunkel-Variante. */

@font-face { font-family: 'Inter'; src: url(../fonts/inter.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --kla-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif;
  --kla-font-mono: ui-monospace, 'SF Mono', Menlo, 'JetBrains Mono', Monaco, monospace;
  --kla-font-features: 'cv11', 'ss03';
  --kla-weight-regular: 450;
  --kla-weight-medium: 550;
  --kla-weight-bold: 700;
  --kla-text-micro: 0.6875rem;
  --kla-text-micro-line: 1.25;
  --kla-text-tiny: 0.8125rem;
  --kla-text-tiny-line: 1.35;
  --kla-text-meta: 0.875rem;
  --kla-text-meta-line: 1.4;
  --kla-text-sub: 0.9375rem;
  --kla-text-sub-line: 1.4;
  --kla-text-body: 1rem;
  --kla-text-body-line: 1.4;
  --kla-text-read: 1.0625rem;
  --kla-text-read-line: 1.55;
  --kla-text-head: 1.0625rem;
  --kla-text-head-line: 1.35;
  --kla-text-title: 1.375rem;
  --kla-text-title-line: 1.25;
  --kla-text-display: 1.875rem;
  --kla-text-display-line: 1.15;
  --kla-text-hero: 2.75rem;
  --kla-text-hero-line: 1.05;
  --kla-tracking-tight: -0.02em;
  --kla-tracking-display: -0.03em;
  --kla-tracking-caps: 0.06em;
  --kla-space-0: 0;
  --kla-space-2: 0.125rem;
  --kla-space-4: 0.25rem;
  --kla-space-6: 0.375rem;
  --kla-space-8: 0.5rem;
  --kla-space-12: 0.75rem;
  --kla-space-16: 1rem;
  --kla-space-20: 1.25rem;
  --kla-space-24: 1.5rem;
  --kla-space-32: 2rem;
  --kla-space-40: 2.5rem;
  --kla-space-48: 3rem;
  --kla-space-64: 4rem;
  --kla-space-96: 6rem;
  --kla-radius-sm: 0.375rem;
  --kla-radius-md: 0.5rem;
  --kla-radius-lg: 0.625rem;
  --kla-radius-xl: 0.875rem;
  --kla-radius-2xl: 1.25rem;
  --kla-radius-full: 999px;
  --kla-dur-press: 60ms;
  --kla-dur-fast: 120ms;
  --kla-dur-base: 180ms;
  --kla-dur-slow: 280ms;
  --kla-dur-long: 520ms;
  --kla-ease-out: cubic-bezier(.2, .8, .2, 1);
  --kla-ease-spring: cubic-bezier(.32, .72, 0, 1);
  --kla-ease-bounce: cubic-bezier(.3, 1.45, .45, 1);
  --kla-ease-exit: cubic-bezier(.4, 0, .8, .6);
  --kla-tap: 44px;
  --kla-page-x: 1rem;
  --kla-read: 34rem;
  --kla-wide: 72rem;
  --kla-focus: 2px;
  --kla-brand-ink: #1A1D21;
  --kla-brand-blue: #2566D1;
  --kla-brand-graphite: #15171B;
  --kla-brand-paper: #FFFFFF;
  --kla-brand-mindful-ink: #262626;
  --kla-brand-mindful-yellow: #E6FB04;
  --kla-color-bg: #FFFFFF;
  --kla-color-sidebar: #F5F6F8;
  --kla-color-panel: #FFFFFF;
  --kla-color-fill: #F2F4F7;
  --kla-color-fill-2: #E8ECF1;
  --kla-color-line: #E7EAEF;
  --kla-color-line-2: #D5DBE3;
  --kla-color-scrim: rgba(17, 24, 39, .32);
  --kla-color-fg: #1A1D21;
  --kla-color-muted: #545D69;
  --kla-color-faint: #646D79;
  --kla-color-accent: #2566D1;
  --kla-color-accent-hover: #1D57B8;
  --kla-color-on-accent: #FFFFFF;
  --kla-color-link: #2566D1;
  --kla-color-tint: #E9F0FB;
  --kla-color-on-tint: #142033;
  --kla-color-ok: #23A55A;
  --kla-color-ok-ink: #17803F;
  --kla-color-ok-bg: #EAF6EF;
  --kla-color-busy: #DB9A00;
  --kla-color-busy-ink: #8A5D00;
  --kla-color-busy-bg: #FDF5E1;
  --kla-color-wait: #E8680F;
  --kla-color-wait-ink: #AA4E09;
  --kla-color-wait-bg: #FDF0E6;
  --kla-color-err: #D63A2F;
  --kla-color-err-ink: #C0352B;
  --kla-color-err-bg: #FCEDEB;
  --kla-color-mark-bg: #EEFF41;
  --kla-color-mark-fg: #1A1C1E;
  --kla-color-code-bg: #F6F8FA;
  --kla-color-data-1: #2A6FDB;
  --kla-color-data-2: #23A55A;
  --kla-color-data-3: #E8680F;
  --kla-color-data-4: #C99000;
  --kla-color-data-5: #7C5CE6;
  --kla-color-data-6: #0E8BA8;
  --kla-color-data-7: #D6457E;
  --kla-color-data-8: #5E9E1E;
  --kla-color-data-9: #B4552D;
  --kla-color-data-10: #5B6B80;
  --kla-shadow-card: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .04);
  --kla-shadow-raised: 0 1px 2px rgba(16, 24, 40, .05), 0 6px 20px rgba(16, 24, 40, .07);
  --kla-shadow-pop: 0 4px 12px rgba(16, 24, 40, .08), 0 12px 32px rgba(16, 24, 40, .10);
  --kla-shadow-sheet: 0 -2px 8px rgba(16, 24, 40, .05), 0 16px 48px rgba(16, 24, 40, .18);
  --kla-shadow-btn: 0 1px 2px rgba(16, 24, 40, .12);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --kla-color-bg: #15171B;
    --kla-color-sidebar: #1B1E23;
    --kla-color-panel: #1E2126;
    --kla-color-fill: #262A30;
    --kla-color-fill-2: #30353C;
    --kla-color-line: #2C3036;
    --kla-color-line-2: #3B4048;
    --kla-color-scrim: rgba(0, 0, 0, .55);
    --kla-color-fg: #ECEEF1;
    --kla-color-muted: #B0B6BF;
    --kla-color-faint: #8F97A3;
    --kla-color-accent: #2E6FDA;
    --kla-color-accent-hover: #4383EE;
    --kla-color-on-accent: #FFFFFF;
    --kla-color-link: #6AA0F7;
    --kla-color-tint: #1F2A3B;
    --kla-color-on-tint: #E8EEF7;
    --kla-color-ok: #3CC874;
    --kla-color-ok-ink: #5BD58B;
    --kla-color-ok-bg: #15281D;
    --kla-color-busy: #F2B53A;
    --kla-color-busy-ink: #F2C25E;
    --kla-color-busy-bg: #2B2414;
    --kla-color-wait: #FF9447;
    --kla-color-wait-ink: #FFA463;
    --kla-color-wait-bg: #2E1F14;
    --kla-color-err: #FF6B5E;
    --kla-color-err-ink: #FF8379;
    --kla-color-err-bg: #2E1716;
    --kla-color-mark-bg: #E4FF3A;
    --kla-color-mark-fg: #15171A;
    --kla-color-code-bg: #1B1E23;
    --kla-color-data-1: #5A97F6;
    --kla-color-data-2: #3CC874;
    --kla-color-data-3: #FF9447;
    --kla-color-data-4: #F2C25E;
    --kla-color-data-5: #9D85F2;
    --kla-color-data-6: #3DB5D1;
    --kla-color-data-7: #EE6FA0;
    --kla-color-data-8: #8CC64E;
    --kla-color-data-9: #DC7C55;
    --kla-color-data-10: #8D9AAC;
    --kla-shadow-card: none;
    --kla-shadow-raised: 0 0 0 1px rgba(255, 255, 255, .05);
    --kla-shadow-pop: 0 0 0 1px rgba(255, 255, 255, .06), 0 12px 32px rgba(0, 0, 0, .5);
    --kla-shadow-sheet: 0 0 0 1px rgba(255, 255, 255, .06), 0 16px 48px rgba(0, 0, 0, .6);
    --kla-shadow-btn: 0 1px 2px rgba(0, 0, 0, .3);
    color-scheme: dark;
  }
  :root:not([data-theme="light"])[data-dark="mindful"] {
    --kla-color-bg: #262626;
    --kla-color-sidebar: #2B2B2A;
    --kla-color-panel: #2E2E2D;
    --kla-color-fill: #373735;
    --kla-color-fill-2: #42413E;
    --kla-color-line: #3A3937;
    --kla-color-line-2: #4A4946;
    --kla-color-scrim: rgba(0, 0, 0, .55);
    --kla-color-fg: #F4F1EC;
    --kla-color-muted: #C6C1BA;
    --kla-color-faint: #A8A39C;
    --kla-color-accent: #E6FB04;
    --kla-color-accent-hover: #F2FB8A;
    --kla-color-on-accent: #1E1E1E;
    --kla-color-link: #E6FB04;
    --kla-color-tint: #34361F;
    --kla-color-on-tint: #F4F1EC;
    --kla-color-ok: #3CC874;
    --kla-color-ok-ink: #5BD58B;
    --kla-color-ok-bg: #15281D;
    --kla-color-busy: #FFB547;
    --kla-color-busy-ink: #FFC56E;
    --kla-color-busy-bg: #33281A;
    --kla-color-wait: #FF9447;
    --kla-color-wait-ink: #FFA463;
    --kla-color-wait-bg: #2E1F14;
    --kla-color-err: #FF6B5E;
    --kla-color-err-ink: #FF8379;
    --kla-color-err-bg: #2E1716;
    --kla-color-mark-bg: #E6FB04;
    --kla-color-mark-fg: #1E1E1E;
    --kla-color-code-bg: #1F1F1E;
    --kla-color-data-1: #5A97F6;
    --kla-color-data-2: #3CC874;
    --kla-color-data-3: #FF9447;
    --kla-color-data-4: #F2C25E;
    --kla-color-data-5: #9D85F2;
    --kla-color-data-6: #3DB5D1;
    --kla-color-data-7: #EE6FA0;
    --kla-color-data-8: #8CC64E;
    --kla-color-data-9: #DC7C55;
    --kla-color-data-10: #8D9AAC;
    --kla-shadow-card: none;
    --kla-shadow-raised: 0 0 0 1px rgba(255, 255, 255, .05);
    --kla-shadow-pop: 0 0 0 1px rgba(255, 255, 255, .06), 0 12px 32px rgba(0, 0, 0, .5);
    --kla-shadow-sheet: 0 0 0 1px rgba(255, 255, 255, .06), 0 16px 48px rgba(0, 0, 0, .6);
    --kla-shadow-btn: 0 1px 2px rgba(0, 0, 0, .3);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --kla-color-bg: #15171B;
  --kla-color-sidebar: #1B1E23;
  --kla-color-panel: #1E2126;
  --kla-color-fill: #262A30;
  --kla-color-fill-2: #30353C;
  --kla-color-line: #2C3036;
  --kla-color-line-2: #3B4048;
  --kla-color-scrim: rgba(0, 0, 0, .55);
  --kla-color-fg: #ECEEF1;
  --kla-color-muted: #B0B6BF;
  --kla-color-faint: #8F97A3;
  --kla-color-accent: #2E6FDA;
  --kla-color-accent-hover: #4383EE;
  --kla-color-on-accent: #FFFFFF;
  --kla-color-link: #6AA0F7;
  --kla-color-tint: #1F2A3B;
  --kla-color-on-tint: #E8EEF7;
  --kla-color-ok: #3CC874;
  --kla-color-ok-ink: #5BD58B;
  --kla-color-ok-bg: #15281D;
  --kla-color-busy: #F2B53A;
  --kla-color-busy-ink: #F2C25E;
  --kla-color-busy-bg: #2B2414;
  --kla-color-wait: #FF9447;
  --kla-color-wait-ink: #FFA463;
  --kla-color-wait-bg: #2E1F14;
  --kla-color-err: #FF6B5E;
  --kla-color-err-ink: #FF8379;
  --kla-color-err-bg: #2E1716;
  --kla-color-mark-bg: #E4FF3A;
  --kla-color-mark-fg: #15171A;
  --kla-color-code-bg: #1B1E23;
  --kla-color-data-1: #5A97F6;
  --kla-color-data-2: #3CC874;
  --kla-color-data-3: #FF9447;
  --kla-color-data-4: #F2C25E;
  --kla-color-data-5: #9D85F2;
  --kla-color-data-6: #3DB5D1;
  --kla-color-data-7: #EE6FA0;
  --kla-color-data-8: #8CC64E;
  --kla-color-data-9: #DC7C55;
  --kla-color-data-10: #8D9AAC;
  --kla-shadow-card: none;
  --kla-shadow-raised: 0 0 0 1px rgba(255, 255, 255, .05);
  --kla-shadow-pop: 0 0 0 1px rgba(255, 255, 255, .06), 0 12px 32px rgba(0, 0, 0, .5);
  --kla-shadow-sheet: 0 0 0 1px rgba(255, 255, 255, .06), 0 16px 48px rgba(0, 0, 0, .6);
  --kla-shadow-btn: 0 1px 2px rgba(0, 0, 0, .3);
  color-scheme: dark;
}

:root[data-theme="dark"][data-dark="mindful"] {
  --kla-color-bg: #262626;
  --kla-color-sidebar: #2B2B2A;
  --kla-color-panel: #2E2E2D;
  --kla-color-fill: #373735;
  --kla-color-fill-2: #42413E;
  --kla-color-line: #3A3937;
  --kla-color-line-2: #4A4946;
  --kla-color-scrim: rgba(0, 0, 0, .55);
  --kla-color-fg: #F4F1EC;
  --kla-color-muted: #C6C1BA;
  --kla-color-faint: #A8A39C;
  --kla-color-accent: #E6FB04;
  --kla-color-accent-hover: #F2FB8A;
  --kla-color-on-accent: #1E1E1E;
  --kla-color-link: #E6FB04;
  --kla-color-tint: #34361F;
  --kla-color-on-tint: #F4F1EC;
  --kla-color-ok: #3CC874;
  --kla-color-ok-ink: #5BD58B;
  --kla-color-ok-bg: #15281D;
  --kla-color-busy: #FFB547;
  --kla-color-busy-ink: #FFC56E;
  --kla-color-busy-bg: #33281A;
  --kla-color-wait: #FF9447;
  --kla-color-wait-ink: #FFA463;
  --kla-color-wait-bg: #2E1F14;
  --kla-color-err: #FF6B5E;
  --kla-color-err-ink: #FF8379;
  --kla-color-err-bg: #2E1716;
  --kla-color-mark-bg: #E6FB04;
  --kla-color-mark-fg: #1E1E1E;
  --kla-color-code-bg: #1F1F1E;
  --kla-color-data-1: #5A97F6;
  --kla-color-data-2: #3CC874;
  --kla-color-data-3: #FF9447;
  --kla-color-data-4: #F2C25E;
  --kla-color-data-5: #9D85F2;
  --kla-color-data-6: #3DB5D1;
  --kla-color-data-7: #EE6FA0;
  --kla-color-data-8: #8CC64E;
  --kla-color-data-9: #DC7C55;
  --kla-color-data-10: #8D9AAC;
  --kla-shadow-card: none;
  --kla-shadow-raised: 0 0 0 1px rgba(255, 255, 255, .05);
  --kla-shadow-pop: 0 0 0 1px rgba(255, 255, 255, .06), 0 12px 32px rgba(0, 0, 0, .5);
  --kla-shadow-sheet: 0 0 0 1px rgba(255, 255, 255, .06), 0 16px 48px rgba(0, 0, 0, .6);
  --kla-shadow-btn: 0 1px 2px rgba(0, 0, 0, .3);
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --kla-dur-press: 1ms;
    --kla-dur-fast: 1ms;
    --kla-dur-base: 1ms;
    --kla-dur-slow: 1ms;
    --kla-dur-long: 1ms;
  }
}