/* celox.io design tokens and local fonts, vendored 2026-10-08. */
/* ═══════════ Local Fonts (DSGVO-konform) ═══════════ */
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/shared/mrx-v2/fonts/dm-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/shared/mrx-v2/fonts/dm-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/shared/mrx-v2/fonts/dm-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/shared/mrx-v2/fonts/dm-sans-700.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400; font-display: swap; src: url('/shared/mrx-v2/fonts/outfit-400.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 500; font-display: swap; src: url('/shared/mrx-v2/fonts/outfit-500.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 600; font-display: swap; src: url('/shared/mrx-v2/fonts/outfit-600.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 700; font-display: swap; src: url('/shared/mrx-v2/fonts/outfit-700.woff2') format('woff2'); }

/* ═══════════ Material Design 3 — Dark theme tokens (Default; Source: #0B57D0) ═══════════ */
:root {
  --md-sys-color-primary: #ADC6FF;
  --md-sys-color-on-primary: #002E69;
  --md-sys-color-primary-container: #00428E;
  --md-sys-color-on-primary-container: #D8E2FF;

  --md-sys-color-secondary: #BEC6DC;
  --md-sys-color-on-secondary: #283041;
  --md-sys-color-secondary-container: #3E4759;
  --md-sys-color-on-secondary-container: #DAE2F9;

  --md-sys-color-tertiary: #DEBCDE;
  --md-sys-color-on-tertiary: #402843;
  --md-sys-color-tertiary-container: #583E5B;
  --md-sys-color-on-tertiary-container: #FBD7FB;

  --md-sys-color-error: #FFB4AB;
  --md-sys-color-on-error: #690005;
  --md-sys-color-error-container: #93000A;
  --md-sys-color-on-error-container: #FFDAD6;

  --md-sys-color-background: #111318;
  --md-sys-color-on-background: #E3E2E6;
  --md-sys-color-surface: #111318;
  --md-sys-color-on-surface: #E3E2E6;
  --md-sys-color-surface-variant: #45464F;
  --md-sys-color-on-surface-variant: #C5C6D0;

  /* Textleiter (2026-09-09). Die beiden leisen Stufen haben eigene Toene, weil
     sie andere Anforderungen haben als eine Rahmenfarbe: Text braucht 4,5:1,
     eine Kontur 3:1. Vorher hing --color-text-dim an --md-sys-color-outline
     und lag damit auf Karten bei 3,86:1 (hell) bzw. 3,87:1 (dunkel) — unter AA.
     --color-text-muted war ausserdem on-surface-variant mit 82 % Alpha; als
     Deckkraft-Trick komponierte es auf jedem Grund anders. Beide sind jetzt
     feste Toene, gegen den DUNKELSTEN Kartengrund gerechnet. */
  --tone-text-muted: #B4B5BD;   /* 6,01:1 auf #33353A */
  --tone-text-dim: #A1A2A9;     /* 4,83:1 auf #33353A */
  --md-sys-color-outline: #8F9099;
  --md-sys-color-outline-variant: #45464F;

  --md-sys-color-surface-dim: #111318;
  --md-sys-color-surface-bright: #36363B;
  --md-sys-color-surface-container-lowest: #0C0E13;
  --md-sys-color-surface-container-low: #1A1B21;
  --md-sys-color-surface-container: #1E1F25;
  --md-sys-color-surface-container-high: #282A30;
  --md-sys-color-surface-container-highest: #33353A;

  --md-sys-color-inverse-surface: #E3E2E6;
  --md-sys-color-inverse-on-surface: #2F3033;
  --md-sys-color-inverse-primary: #0B57D0;
  --md-sys-color-scrim: rgba(0, 0, 0, 0.7);

  --md-sys-color-success: #58DB8B;
  --md-sys-color-on-success: #00391C;
  --md-sys-color-success-container: #00522D;
  --md-sys-color-on-success-container: #71F8A7;

  /* Shape scale */
  --md-shape-xs: 4px;
  --md-shape-sm: 8px;
  --md-shape-md: 12px;
  --md-shape-lg: 16px;
  --md-shape-xl: 28px;
  --md-shape-full: 9999px;

  /* Elevation (dark — subtle) */
  --md-elev-1: 0 1px 2px rgba(0,0,0,0.35), 0 1px 3px 1px rgba(0,0,0,0.18);
  --md-elev-2: 0 1px 2px rgba(0,0,0,0.40), 0 2px 6px 2px rgba(0,0,0,0.22);
  --md-elev-3: 0 1px 3px rgba(0,0,0,0.45), 0 4px 8px 3px rgba(0,0,0,0.26);
  --md-elev-4: 0 2px 3px rgba(0,0,0,0.50), 0 6px 10px 4px rgba(0,0,0,0.30);
  --md-elev-5: 0 4px 4px rgba(0,0,0,0.55), 0 8px 12px 6px rgba(0,0,0,0.32);

  /* ═══════════ Motion system — one timing set, used everywhere ═══════════ */
  --md-dur-quick: 140ms;
  --md-dur-fast: 200ms;
  --md-dur-base: 280ms;
  --md-dur-emphasized: 500ms;
  --md-dur-page: 460ms;
  --md-dur-theme: 900ms;      /* circular reveal theme-switch */

  --md-ease-flat: cubic-bezier(0.22, 0.08, 0, 1);
  --md-ease-spring: cubic-bezier(0.32, 1.18, 0.42, 1);
  --md-ease-spring-soft: cubic-bezier(0.28, 0.62, 0, 1);
  --md-ease-anticip: cubic-bezier(0.6, -0.04, 0.4, 1.04);
}

/* ═══════════ Material Design 3 — Light theme tokens (Toggle target) ═══════════
   Derived from the same source color #0B57D0. Applied via [data-theme="light"]
   on <html>, set pre-paint by an inline boot script to avoid FOUC. */
[data-theme="light"] {
  --md-sys-color-primary: #0B57D0;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #D8E2FF;
  --md-sys-color-on-primary-container: #001A41;

  --md-sys-color-secondary: #575E71;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #DBE2F9;
  --md-sys-color-on-secondary-container: #141B2C;

  --md-sys-color-tertiary: #715573;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #FBD7FB;
  --md-sys-color-on-tertiary-container: #2A122C;

  --md-sys-color-error: #BA1A1A;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-error-container: #FFDAD6;
  --md-sys-color-on-error-container: #410002;

  --md-sys-color-background: #F9F9FF;
  --md-sys-color-on-background: #1A1B20;
  --md-sys-color-surface: #F9F9FF;
  --md-sys-color-on-surface: #1A1B20;
  --md-sys-color-surface-variant: #E1E2EC;
  --md-sys-color-on-surface-variant: #3B3C44;  /* war #45464F — 8,50:1 statt 7,29:1 auf #E2E2E9 */
  --tone-text-muted: #4D4F58;   /* 6,33:1 auf #E2E2E9 */
  --tone-text-dim: #606069;     /* 4,83:1 auf #E2E2E9 */
  --md-sys-color-outline: #767680;
  --md-sys-color-outline-variant: #C6C6D0;

  --md-sys-color-surface-dim: #D9D9E0;
  --md-sys-color-surface-bright: #F9F9FF;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #F3F3FA;
  --md-sys-color-surface-container: #EDEDF4;
  --md-sys-color-surface-container-high: #E7E8EE;
  --md-sys-color-surface-container-highest: #E2E2E9;

  --md-sys-color-inverse-surface: #2F3033;
  --md-sys-color-inverse-on-surface: #F1F0F4;
  --md-sys-color-inverse-primary: #ADC6FF;
  --md-sys-color-scrim: rgba(0, 0, 0, 0.4);

  --md-sys-color-success: #146C2E;
  --md-sys-color-on-success: #FFFFFF;
  --md-sys-color-success-container: #A6F5AF;
  --md-sys-color-on-success-container: #00210B;

  --md-elev-1: 0 1px 2px rgba(0,0,0,0.08), 0 1px 3px 1px rgba(0,0,0,0.06);
  --md-elev-2: 0 1px 2px rgba(0,0,0,0.10), 0 2px 6px 2px rgba(0,0,0,0.08);
  --md-elev-3: 0 1px 3px rgba(0,0,0,0.12), 0 4px 8px 3px rgba(0,0,0,0.10);
  --md-elev-4: 0 2px 3px rgba(0,0,0,0.14), 0 6px 10px 4px rgba(0,0,0,0.12);
  --md-elev-5: 0 4px 4px rgba(0,0,0,0.16), 0 8px 12px 6px rgba(0,0,0,0.14);
}