/* =====================================================================
   Elektrotechnik Jozefowicz - Design Tokens
   Farbwerte 1:1 aus the_app (lib/ui/design/tokens.dart + theme.dart),
   damit Website, Konto-Bereich und App als ein System wirken.
   ===================================================================== */

:root {
  color-scheme: light;

  /* --- Marke --- */
  --brand-ink: #0e1f27;
  --brand-teal: #0c7f79;
  --brand-teal-bright: #3fbdaf;

  /* --- Flaechen --- */
  --canvas: #f1f5f5;
  --surface: #ffffff;
  --surface-alt: #e7eeee;
  --surface-raised: #ffffff;
  --surface-sunken: #e9efef;

  /* --- Text --- */
  --text: #0e1f27;
  --text-muted: #5c6e74;
  --text-inverse: #e8f1f1;

  /* --- Linien --- */
  --line: #d6e0e0;
  --line-soft: #e4ebeb;

  /* --- Akzente --- */
  --primary: #0c7f79;
  --on-primary: #ffffff;
  --primary-container: #dcf0ee;
  --on-primary-container: #04322f;
  --secondary: #3c6e8f;
  --secondary-container: #d8ecfa;
  --on-secondary-container: #17384c;
  --tertiary: #9a6400;
  --tertiary-container: #fbefd8;
  --on-tertiary-container: #4d3200;
  --danger: #c0271f;
  --danger-container: #fbe6e3;
  --on-danger-container: #7a1710;

  /* --- Status (identisch zur App-Palette) --- */
  --status-ok-fg: #157f4e;
  --status-ok-bg: #e2f3ea;
  --status-warn-fg: #9a6400;
  --status-warn-bg: #fbefd8;
  --status-alarm-fg: #c0271f;
  --status-alarm-bg: #fbe6e3;
  --status-off-fg: #6b7c82;
  --status-off-bg: #e9eeef;
  --status-info-fg: #23578f;
  --status-info-bg: #e1ecf7;

  /* --- Schatten --- */
  --shadow-1: 0 1px 2px rgba(14, 31, 39, .06), 0 1px 3px rgba(14, 31, 39, .04);
  --shadow-2: 0 4px 12px rgba(14, 31, 39, .08), 0 2px 4px rgba(14, 31, 39, .04);
  --shadow-3: 0 18px 48px rgba(14, 31, 39, .14), 0 6px 16px rgba(14, 31, 39, .07);
  --shadow-glow: 0 0 0 4px rgba(12, 127, 121, .16);

  /* --- Radien (Vielfache aus tokens.dart) --- */
  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 15px;
  --r-xl: 18px;
  --r-2xl: 26px;
  --r-pill: 999px;

  /* --- Abstaende: alles ein Vielfaches von 4 --- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 28px;
  --s-7: 40px;
  --s-8: 56px;
  --s-9: 80px;
  --s-10: 112px;

  /* --- Typografie --- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --fs-eyebrow: .78rem;
  --fs-small: .85rem;
  --fs-body: 1rem;
  --fs-lead: clamp(1.05rem, .95rem + .45vw, 1.25rem);
  --fs-h3: clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  --fs-h2: clamp(1.6rem, 1.25rem + 1.6vw, 2.5rem);
  --fs-h1: clamp(2.1rem, 1.5rem + 2.9vw, 3.9rem);

  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-body: 1.65;

  /* --- Layout --- */
  --content: 1240px;
  --content-narrow: 760px;
  --header-h: 72px;

  /* --- Bewegung --- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: .16s;
  --dur: .28s;
  --dur-slow: .5s;
}

/* ---------------------------------------------------------------------
   Dunkelmodus. Nur Tokens werden neu belegt - kein Bauteil kennt Farben.
   Reihenfolge: Systemeinstellung, danach explizite Auswahl des Besuchers.
   --------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --canvas: #0b1a20;
    --surface: #12262e;
    --surface-alt: #193640;
    --surface-raised: #16303a;
    --surface-sunken: #0e2028;

    --text: #e8f1f1;
    --text-muted: #92a8ae;
    --text-inverse: #0b1a20;

    --line: #254550;
    --line-soft: #1d3a44;

    --primary: #3fbdaf;
    --on-primary: #04211f;
    --primary-container: #113734;
    --on-primary-container: #a7e8df;
    --secondary: #6fb0f0;
    --secondary-container: #12293d;
    --on-secondary-container: #cbe3fa;
    --tertiary: #e8ae3c;
    --tertiary-container: #38290e;
    --on-tertiary-container: #f8dfae;
    --danger: #ff7c70;
    --danger-container: #3b1915;
    --on-danger-container: #ffd6d1;

    --status-ok-fg: #4bc98a;
    --status-ok-bg: #10352a;
    --status-warn-fg: #e8ae3c;
    --status-warn-bg: #38290e;
    --status-alarm-fg: #ff7c70;
    --status-alarm-bg: #3b1915;
    --status-off-fg: #8a9da4;
    --status-off-bg: #1b2e34;
    --status-info-fg: #6fb0f0;
    --status-info-bg: #12293d;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-2: 0 4px 14px rgba(0, 0, 0, .45);
    --shadow-3: 0 20px 52px rgba(0, 0, 0, .55);
    --shadow-glow: 0 0 0 4px rgba(63, 189, 175, .2);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --canvas: #0b1a20;
  --surface: #12262e;
  --surface-alt: #193640;
  --surface-raised: #16303a;
  --surface-sunken: #0e2028;

  --text: #e8f1f1;
  --text-muted: #92a8ae;
  --text-inverse: #0b1a20;

  --line: #254550;
  --line-soft: #1d3a44;

  --primary: #3fbdaf;
  --on-primary: #04211f;
  --primary-container: #113734;
  --on-primary-container: #a7e8df;
  --secondary: #6fb0f0;
  --secondary-container: #12293d;
  --on-secondary-container: #cbe3fa;
  --tertiary: #e8ae3c;
  --tertiary-container: #38290e;
  --on-tertiary-container: #f8dfae;
  --danger: #ff7c70;
  --danger-container: #3b1915;
  --on-danger-container: #ffd6d1;

  --status-ok-fg: #4bc98a;
  --status-ok-bg: #10352a;
  --status-warn-fg: #e8ae3c;
  --status-warn-bg: #38290e;
  --status-alarm-fg: #ff7c70;
  --status-alarm-bg: #3b1915;
  --status-off-fg: #8a9da4;
  --status-off-bg: #1b2e34;
  --status-info-fg: #6fb0f0;
  --status-info-bg: #12293d;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 4px 14px rgba(0, 0, 0, .45);
  --shadow-3: 0 20px 52px rgba(0, 0, 0, .55);
  --shadow-glow: 0 0 0 4px rgba(63, 189, 175, .2);
}