/* AEX — Color tokens
   Brand blues + neutral scale + Ampel (status, never a verdict).
   Base palette values, then semantic aliases below (theme-aware). */

:root {
  /* ---- Brand palette (raw) ---- */
  --aex-blue-900: #01346B; /* Primär — Dunkelblau */
  --aex-blue-700: #024a8f; /* hover/darker step of primary */
  --aex-blue-500: #018DB0; /* Sekundär — Mittelblau, Akzent-Buttons */
  --aex-blue-400: #0a9cc0; /* secondary hover (slightly lighter) */
  --aex-blue-300: #7ABED3; /* Tertiär — Hellblau */
  --aex-blue-100: #d6e9f1; /* light wash */
  --aex-blue-050: #eef5f9; /* lightest wash / selected row */

  /* ---- Neutrals (warm-cool gray, calm) ---- */
  --aex-neutral-000: #ffffff;
  --aex-neutral-025: #fafbfc;
  --aex-neutral-050: #f4f6f8;
  --aex-neutral-100: #eceff2;
  --aex-neutral-200: #dfe3e8;
  --aex-neutral-300: #c7cdd4;
  --aex-neutral-400: #9aa2ac;
  --aex-neutral-500: #666666; /* Neutral (brief) */
  --aex-neutral-600: #4d5560;
  --aex-neutral-700: #363c45;
  --aex-neutral-800: #232830;
  --aex-neutral-850: #1a1e25;
  --aex-neutral-900: #12151a;
  --aex-neutral-950: #0b0d11;

  /* ---- Status: Ampel (status, NEVER a verdict) ---- */
  --aex-ok-500: #2f9e6e;      /* Grün = OK */
  --aex-ok-050: #e6f4ee;
  --aex-pruefen-500: #d9a300; /* Gelb = Prüfen */
  --aex-pruefen-050: #fbf3d9;
  --aex-orange-500: #FC700B;  /* Orange = Auffällig / Warnung (only here) */
  --aex-orange-050: #fdeede;

  /* ---- Focus ring ---- */
  --aex-focus: #018DB0;
}

/* ============ LIGHT (default) ============ */
:root {
  --bg-app: var(--aex-neutral-050);
  --bg-surface: var(--aex-neutral-000);
  --bg-surface-raised: var(--aex-neutral-000);
  --bg-subtle: var(--aex-neutral-025);
  --bg-rail: var(--aex-neutral-000);
  --bg-hover: var(--aex-neutral-050);
  --bg-active: var(--aex-blue-050);
  --bg-selected: var(--aex-blue-050);

  --border-subtle: rgba(18, 21, 26, 0.08);
  --border-default: rgba(18, 21, 26, 0.12);
  --border-strong: rgba(18, 21, 26, 0.20);

  --text-strong: var(--aex-neutral-900);
  --text-body: var(--aex-neutral-800);
  --text-muted: var(--aex-neutral-500);
  --text-faint: var(--aex-neutral-400);
  --text-on-accent: #ffffff;
  --text-link: var(--aex-blue-500);

  --accent: var(--aex-blue-500);
  --accent-hover: var(--aex-blue-400);
  --accent-press: var(--aex-blue-900);
  --accent-soft-bg: var(--aex-blue-050);
  --brand: var(--aex-blue-900);

  --status-ok-fg: #1f7a52;
  --status-ok-bg: var(--aex-ok-050);
  --status-ok-dot: var(--aex-ok-500);
  --status-pruefen-fg: #8a6a00;
  --status-pruefen-bg: var(--aex-pruefen-050);
  --status-pruefen-dot: var(--aex-pruefen-500);
  --status-auffaellig-fg: #c7560a;
  --status-auffaellig-bg: var(--aex-orange-050);
  --status-auffaellig-dot: var(--aex-orange-500);
}

/* ============ DARK ============ */
:root[data-theme="dark"],
.aex-dark {
  --bg-app: var(--aex-neutral-950);
  --bg-surface: var(--aex-neutral-900);
  --bg-surface-raised: var(--aex-neutral-850);
  --bg-subtle: var(--aex-neutral-850);
  --bg-rail: var(--aex-neutral-900);
  --bg-hover: rgba(255, 255, 255, 0.04);
  --bg-active: rgba(1, 141, 176, 0.16);
  --bg-selected: rgba(1, 141, 176, 0.16);

  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-default: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.20);

  --text-strong: #f3f5f7;
  --text-body: #d7dce2;
  --text-muted: #9aa2ac;
  --text-faint: #6b7077;
  --text-on-accent: #ffffff;
  --text-link: var(--aex-blue-300);

  --accent: var(--aex-blue-500);
  --accent-hover: var(--aex-blue-400);
  --accent-press: var(--aex-blue-300);
  --accent-soft-bg: rgba(1, 141, 176, 0.14);
  --brand: var(--aex-blue-300);

  --status-ok-fg: #5cc596;
  --status-ok-bg: rgba(47, 158, 110, 0.16);
  --status-ok-dot: #3bb583;
  --status-pruefen-fg: #e6c14d;
  --status-pruefen-bg: rgba(217, 163, 0, 0.16);
  --status-pruefen-dot: #e3b525;
  --status-auffaellig-fg: #ff9a52;
  --status-auffaellig-bg: rgba(252, 112, 11, 0.16);
  --status-auffaellig-dot: var(--aex-orange-500);
}
/* AEX — Typography tokens
   Segoe UI Variable — native to the WPF Windows app. Falls back to Segoe UI,
   then a neutral system sans on other platforms. German UI, Normalschreibung. */

:root {
  --font-sans: "Segoe UI Variable", "Segoe UI Variable Text", "Segoe UI",
    system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI",
    system-ui, sans-serif; /* optical size for large headings */
  --font-mono: "Cascadia Code", "Cascadia Mono", "Consolas", ui-monospace,
    "SF Mono", Menlo, monospace; /* numbers, codes, account lines */

  /* Type scale — quiet, dense, professional. px on an 8px-ish rhythm. */
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;   /* default UI body */
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 38px;

  /* Weights — Segoe UI Variable supports the full range */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Line heights */
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing — minimal; never tracked-out caps */
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.01em;

  /* Tabular numerals for tables / amounts */
  --numeric-tabular: "tnum" 1, "lnum" 1; /* @kind other */
}
/* AEX — font declarations.
   These are NATIVE Windows system fonts used by the WPF host (Segoe UI Variable,
   Cascadia Code). We declare them with `local()` only — no binary is shipped.
   On Windows the installed system font resolves; elsewhere the fallback stack in
   --font-* (Segoe UI → system-ui → sans-serif) renders. Do NOT substitute a
   different family here. If you want pixel-identical previews on non-Windows,
   upload the font files and add `src: url(...)` entries alongside the local() ones. */

@font-face {
  font-family: "Segoe UI Variable";
  src: local("Segoe UI Variable Text"), local("Segoe UI Variable"), local("Segoe UI");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Segoe UI Variable Display";
  src: local("Segoe UI Variable Display"), local("Segoe UI Variable"), local("Segoe UI");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cascadia Code";
  src: local("Cascadia Code"), local("Cascadia Mono"), local("Consolas");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
/* AEX — Spacing, radii, borders, elevation
   8px raster. Flat & precise: hairline borders, gentle radius, no shadow play.
   Elevation is expressed with borders + the faintest shadow, never drama. */

:root {
  /* Spacing — 8px raster (with 4px half-steps) */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;

  /* Radii — ~8px house corner, smaller for inline controls */
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;   /* default: cards, inputs, buttons */
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* Border widths — hairlines. 0.5px where the display allows it. */
  --border-hairline: 0.5px;
  --border-thin: 1px;

  /* Elevation — extremely restrained. Mostly borders do the work. */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(18, 21, 26, 0.05);
  --shadow-pop: 0 4px 16px rgba(18, 21, 26, 0.10), 0 1px 3px rgba(18, 21, 26, 0.06);

  /* Motion — calm, quick, no bounce */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --dur-fast: 110ms; /* @kind other */
  --dur-base: 160ms; /* @kind other */

  /* Layout */
  --rail-width: 248px;
  --control-height-sm: 28px;
  --control-height-md: 34px;
  --control-height-lg: 40px;
}

:root[data-theme="dark"],
.aex-dark {
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-pop: 0 6px 20px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
}