/* BitControl Networks — erzeugt aus tokens.json. NICHT von Hand ändern. */
/* Regeln und Begründungen: .claude/skills/bitcontrol-design/references/tokens.md */

:root {
  /* Marke — im Druck 100 C / 0 M / 0 Y / 0 K, nie diesen Wert konvertieren */
  --bc-brand-50: #D8EDFB;
  --bc-brand-100: #B0DAF5;
  --bc-brand-200: #84C6F0;
  --bc-brand-300: #59B2E7;
  --bc-brand-400: #009EE0;
  --bc-brand-500: #0788C1;
  --bc-brand-600: #0573A4;
  --bc-brand-700: #025F88;
  --bc-brand-800: #014B6D;
  --bc-brand-900: #003853;
  --bc-brand-950: #012639;

  --bc-neutral-0: #FFFFFF;
  --bc-neutral-50: #F6F8FA;
  --bc-neutral-100: #EDF0F4;
  --bc-neutral-200: #DDE3E8;
  --bc-neutral-300: #C9D0D8;
  --bc-neutral-400: #A9B2BC;
  --bc-neutral-500: #87919C;
  --bc-neutral-600: #6C7680;
  --bc-neutral-700: #535C65;
  --bc-neutral-800: #3B4249;
  --bc-neutral-900: #252B31;
  --bc-neutral-950: #1A1F24;
  --bc-neutral-1000: #101419;
  --bc-black: #1A171B;

  /* Akzent — genau zwei Rollen: eine Vollfläche pro Seite, und der Cursor */
  --bc-signal: #E4F222;

  /* Status — drei Wertesätze je Zustand, siehe tokens.md */
  --bc-bestanden-punkt_dunkel: #08C95E;
  --bc-bestanden-punkt_hell: #08AA4F;
  --bc-bestanden-linie_hell: #08AA4F;
  --bc-bestanden-text_hell: #016A2E;
  --bc-bestanden-flaeche_dunkel: #112917;
  --bc-verzoegert-punkt_dunkel: #D29F0B;
  --bc-verzoegert-punkt_hell: #E6C103;
  --bc-verzoegert-linie_hell: #BA8C01;
  --bc-verzoegert-text_hell: #946F07;
  --bc-verzoegert-flaeche_dunkel: #2D2106;
  --bc-fehlerhaft-punkt_dunkel: #FE573B;
  --bc-fehlerhaft-punkt_hell: #FF5B3F;
  --bc-fehlerhaft-linie_hell: #FF5B3F;
  --bc-fehlerhaft-text_hell: #A21900;
  --bc-fehlerhaft-flaeche_dunkel: #351A15;
  --bc-pruefung-punkt_dunkel: #0EB4FE;
  --bc-pruefung-punkt_hell: #089BDC;
  --bc-pruefung-linie_hell: #089BDC;
  --bc-pruefung-text_hell: #015F88;
  --bc-pruefung-flaeche_dunkel: #092636;

  --bc-font-display: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --bc-font-sans: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --bc-font-mono: 'DM Mono', ui-monospace, Menlo, monospace;

  --bc-text-display: 4.75rem; --bc-lh-display: 1; --bc-w-display: 600;
  --bc-text-h1: 2.875rem; --bc-lh-h1: 1.087; --bc-w-h1: 600;
  --bc-text-h2: 1.875rem; --bc-lh-h2: 1.2; --bc-w-h2: 600;
  --bc-text-h3: 1.375rem; --bc-lh-h3: 1.318; --bc-w-h3: 600;
  --bc-text-fliesstext: 1.062rem; --bc-lh-fliesstext: 1.588; --bc-w-fliesstext: 400;
  --bc-text-sekundaer: 0.9375rem; --bc-lh-sekundaer: 1.6; --bc-w-sekundaer: 400;
  --bc-text-label: 0.8125rem; --bc-lh-label: 1.385; --bc-w-label: 500;

  --bc-space-1: 0.25rem;
  --bc-space-2: 0.5rem;
  --bc-space-3: 0.75rem;
  --bc-space-4: 1rem;
  --bc-space-5: 1.25rem;
  --bc-space-6: 1.5rem;
  --bc-space-8: 2rem;
  --bc-space-12: 3rem;
  --bc-space-16: 4rem;

  --bc-radius-xs: 4px;
  --bc-radius-sm: 8px;
  --bc-radius-md: 12px;
  --bc-radius-lg: 16px;
  --bc-radius-full: 9999px;

  --bc-zeile: 48px;
  --bc-innen: 20px;
  --bc-element: 40px;
  --bc-icon: 20px;

  --bc-duration-fast: 120ms;
  --bc-duration-base: 200ms;
  --bc-duration-slow: 320ms;
  --bc-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --bc-ease-decelerate: cubic-bezier(0, 0, 0, 1);
  --bc-ease-accelerate: cubic-bezier(0.3, 0, 1, 1);

  --bc-cursor-width: 0.54em;
  --bc-cursor-height: 0.115em;
  --bc-cursor-gap: 0.10em;
  --bc-cursor-blink: 1150ms;

  --bc-icon-stroke: 1.5px;
  --bc-icon-16: 16px;
  --bc-icon-20: 20px;
  --bc-icon-24: 24px;
  --bc-icon-32: 32px;

  --bc-bp-sm: 640px;
  --bc-bp-md: 768px;
  --bc-bp-lg: 1024px;
  --bc-bp-xl: 1280px;
  --bc-bp-2xl: 1536px;
  --bc-z-base: 0;
  --bc-z-sticky: 100;
  --bc-z-dropdown: 200;
  --bc-z-overlay: 300;
  --bc-z-modal: 400;
  --bc-z-toast: 500;

  /* Semantisch — hell */
  color-scheme: light;
  --bc-bg: var(--bc-neutral-50);
  --bc-surface: var(--bc-neutral-0);
  --bc-surface-sunken: var(--bc-neutral-50);
  --bc-surface-raised: var(--bc-neutral-0);
  --bc-text: var(--bc-black);
  --bc-text-subtle: var(--bc-neutral-700);
  --bc-text-subtlest: var(--bc-neutral-600);
  --bc-text-brand: var(--bc-brand-700);
  --bc-border-subtle: var(--bc-neutral-200);
  --bc-border: var(--bc-neutral-500);
  --bc-border-focus: var(--bc-brand-600);
  --bc-icon-brand: var(--bc-brand-500);
  --bc-cursor: var(--bc-brand-400);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bc-bg: var(--bc-neutral-1000);
    --bc-surface: var(--bc-neutral-950);
    --bc-surface-sunken: var(--bc-neutral-1000);
    --bc-surface-raised: var(--bc-neutral-900);
    --bc-text: var(--bc-neutral-100);
    --bc-text-subtle: var(--bc-neutral-400);
    --bc-text-subtlest: var(--bc-neutral-500);
    --bc-text-brand: var(--bc-brand-300);
    --bc-border-subtle: var(--bc-neutral-800);
    --bc-border: var(--bc-neutral-600);
    --bc-border-focus: var(--bc-brand-300);
    --bc-icon-brand: var(--bc-brand-300);
    --bc-cursor: var(--bc-signal);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bc-bg: var(--bc-neutral-1000);
  --bc-surface: var(--bc-neutral-950);
  --bc-surface-sunken: var(--bc-neutral-1000);
  --bc-surface-raised: var(--bc-neutral-900);
  --bc-text: var(--bc-neutral-100);
  --bc-text-subtle: var(--bc-neutral-400);
  --bc-text-subtlest: var(--bc-neutral-500);
  --bc-text-brand: var(--bc-brand-300);
  --bc-border-subtle: var(--bc-neutral-800);
  --bc-border: var(--bc-neutral-600);
  --bc-border-focus: var(--bc-brand-300);
  --bc-icon-brand: var(--bc-brand-300);
  --bc-cursor: var(--bc-signal);
}

/* Dichte — nur datentragende Komponenten werten dies aus */
[data-density="kompakt"] {
  --bc-zeile: 36px;
  --bc-innen: 12px;
  --bc-element: 32px;
  --bc-icon: 16px;
}
@media (pointer: coarse) {
  [data-density="kompakt"] {
    --bc-zeile: 48px;
    --bc-innen: 20px;
    --bc-element: 40px;
    --bc-icon: 20px;
  }
}

/* Fokus — einheitlich, ohne Ausnahme */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--bc-border-focus);
  outline-offset: 2px;
  border-radius: var(--bc-radius-sm);
}

/* Cursor-Signatur — nachgestellt und anliegend, nie als Zeichen */
.bc-cursor {
  display: inline-block;
  width: var(--bc-cursor-width);
  height: max(1.5px, var(--bc-cursor-height));
  margin-left: var(--bc-cursor-gap);
  vertical-align: 0;
  background: var(--bc-cursor);
  animation: bc-blink var(--bc-cursor-blink) steps(1, end) infinite;
}
@keyframes bc-blink { 0%, 45% { opacity: 1 } 55%, 100% { opacity: 0 } }

@media (prefers-reduced-motion: reduce) {
  .bc-cursor { animation: none }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}