/*
 * ChoiceSphere Design Tokens v2 (Plan-B-Verwaltung)
 * Single Source of Truth fuer Farben, Typography, Spacing, Shape, Elevation, Motion.
 *
 * Spec : docs/specs/design-system.md
 * ADR  : docs/specs/architecture/adr/ADR-0023-design-system-v2.md
 * Repo : DESIGN.md (kuratierte Uebersicht)
 *
 * Hinweise:
 * - Token-Namen mit `--cs-*` Prefix sind die offiziellen Plan-B-Tokens.
 * - Aliase fuer ehemalige Material-3-Token-Namen sind am Ende dieser Datei
 *   definiert (Compat-Layer, damit account.css und Bestandskomponenten
 *   ohne Refactor funktionieren). Bei Neukomponenten BITTE die offiziellen
 *   Tokens nutzen, NICHT die Aliase.
 */

/* ==========================================================================
 * Self-hosted Fonts (Phase 6 — DSGVO).
 * Variable-Font-WOFF2, Latin + Latin-Extended-Subset (deutsche Umlaute).
 * Quelle, Versionen, Lizenz: src/Ui/wwwroot/fonts/README.md
 * ========================================================================== */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../fonts/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/fira-code-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/fira-code-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ========== COLOR — Marken-Palette ========== */
  /* Primary: Navy */
  --cs-color-primary: #0F172A;
  --cs-color-on-primary: #FFFFFF;
  --cs-color-primary-hover: #020617;

  /* Secondary: Slate */
  --cs-color-secondary: #64748B;
  --cs-color-secondary-strong: #475569;

  /* Accent: Sage — reserviert fuer Agent + Erfolg */
  --cs-color-accent: #059669;
  --cs-color-accent-hover: #047857;
  --cs-color-accent-soft: rgba(5, 150, 105, 0.08);

  /* Surface-Familie */
  --cs-color-background: #F8FAFC;
  --cs-color-surface: #FFFFFF;
  --cs-color-surface-subtle: #F1F5F9;
  --cs-color-surface-row-hover: #F8FAFC;
  --cs-color-surface-row-active: rgba(15, 23, 42, 0.024);

  /* Borders + Lines */
  --cs-color-border: #E2E8F0;
  --cs-color-border-strong: #CBD5E1;
  --cs-color-border-subtle: #F1F5F9;

  /* Text */
  --cs-color-text-primary: #0F172A;
  --cs-color-text-secondary: #475569;
  --cs-color-text-tertiary: #64748B;
  --cs-color-text-disabled: rgba(15, 23, 42, 0.4);

  /* Status */
  --cs-color-success: #22C55E;
  --cs-color-success-strong: #16A34A;
  --cs-color-success-soft: rgba(34, 197, 94, 0.08);

  --cs-color-warning: #EAB308;
  --cs-color-warning-strong: #CA8A04;
  --cs-color-warning-soft: rgba(234, 179, 8, 0.08);

  --cs-color-error: #EF4444;
  --cs-color-error-strong: #DC2626;
  --cs-color-error-soft: rgba(239, 68, 68, 0.08);

  --cs-color-info: #0EA5E9;
  --cs-color-info-strong: #0284C7;
  --cs-color-info-soft: rgba(14, 165, 233, 0.08);

  /* Domain-Tints */
  --cs-color-type-natuerlich-soft: rgba(5, 150, 105, 0.08);
  --cs-color-type-natuerlich-text: #047857;
  --cs-color-type-juristisch-soft: rgba(15, 23, 42, 0.06);
  --cs-color-type-juristisch-text: #1E293B;

  /* Focus-Ring */
  --cs-color-focus-ring: rgba(15, 23, 42, 0.09);

  /* ========== TYPOGRAPHY ========== */
  --cs-font-display: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --cs-font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --cs-font-mono: 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
  --cs-font-feature-settings: "tnum" 0;

  /* Type-Skala — DESIGN.md / design-system.md §2 */
  --cs-type-display-size: 40px;
  --cs-type-display-line: 46px;

  --cs-type-h1-size: 32px;
  --cs-type-h1-line: 38px;
  --cs-type-h2-size: 24px;
  --cs-type-h2-line: 30px;
  --cs-type-h3-size: 20px;
  --cs-type-h3-line: 26px;
  --cs-type-h4-size: 16px;
  --cs-type-h4-line: 22px;

  --cs-type-body-lg-size: 18px;
  --cs-type-body-lg-line: 28px;
  --cs-type-body-size: 16px;
  --cs-type-body-line: 26px;
  --cs-type-body-sm-size: 14px;
  --cs-type-body-sm-line: 21px;

  --cs-type-caption-size: 12px;
  --cs-type-caption-line: 17px;
  --cs-type-chip-size: 12px;
  --cs-type-chip-line: 16px;

  --cs-type-code-size: 14px;
  --cs-type-code-line: 22px;

  /* Weights */
  --cs-fw-regular: 400;
  --cs-fw-medium: 500;
  --cs-fw-semibold: 600;
  --cs-fw-bold: 700;

  /* ========== SPACING — 8px-Baseline ========== */
  --cs-space-0: 0;
  --cs-space-xs: 4px;
  --cs-space-sm: 8px;
  --cs-space-md: 16px;
  --cs-space-lg: 24px;
  --cs-space-xl: 32px;
  --cs-space-2xl: 48px;
  --cs-space-3xl: 64px;

  /* ========== SHAPE — Border-Radius ========== */
  --cs-radius-sm: 4px;
  --cs-radius-default: 8px;
  --cs-radius-md: 12px;
  --cs-radius-lg: 16px;
  --cs-radius-full: 9999px;

  /* ========== ELEVATION ========== */
  --cs-elevation-0: none;
  --cs-elevation-sm: 0 1px 3px rgba(15, 23, 42, 0.03);
  --cs-elevation-default: 0 2px 6px rgba(15, 23, 42, 0.05);
  --cs-elevation-md: 0 4px 16px rgba(15, 23, 42, 0.07);
  --cs-elevation-lg: 0 8px 32px rgba(15, 23, 42, 0.10);

  /* ========== MOTION ========== */
  --cs-motion-fast: 150ms;
  --cs-motion-medium: 200ms;
  --cs-motion-slow: 300ms;
  --cs-motion-easing: cubic-bezier(0.2, 0, 0, 1);
  --cs-motion-easing-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1);

  /* ========== LAYOUT ========== */
  --cs-page-max-width: 1440px;
  --cs-drawer-width: 240px;
  --cs-agent-dock-width: 380px;
  --cs-side-panel-width: 480px;
  --cs-appbar-height: 56px;
  --cs-input-height: 42px;
  --cs-button-min-height: 42px;

  /* ========== COMPAT-LAYER fuer Bestandskomponenten ==========
   * Aliase auf Plan-B-Tokens, damit account.css und Bestands-Razor-Files
   * ohne Refactor weiterlaufen. Neue Komponenten BITTE die offiziellen
   * Tokens (--cs-color-*, --cs-space-*-token-namen) nutzen. */
  --cs-color-on-surface: var(--cs-color-text-primary);
  --cs-color-on-surface-variant: var(--cs-color-text-secondary);
  --cs-color-outline: var(--cs-color-border);
  --cs-color-outline-variant: var(--cs-color-border-subtle);
  --cs-color-primary-container: var(--cs-color-surface-subtle);
  --cs-color-on-primary-container: var(--cs-color-text-primary);
  --cs-color-secondary-container: var(--cs-color-surface-subtle);
  --cs-color-on-secondary-container: var(--cs-color-text-primary);
  --cs-color-tertiary: var(--cs-color-accent);
  --cs-color-on-tertiary: #FFFFFF;
  --cs-color-tertiary-container: var(--cs-color-accent-soft);
  --cs-color-on-tertiary-container: var(--cs-color-type-natuerlich-text);
  --cs-color-success-container: var(--cs-color-success-soft);
  --cs-color-warning-container: var(--cs-color-warning-soft);
  --cs-color-error-container: var(--cs-color-error-soft);
  --cs-color-on-error: #FFFFFF;
  --cs-color-on-error-container: var(--cs-color-error-strong);
  --cs-color-surface-container-low: var(--cs-color-background);
  --cs-color-surface-container: var(--cs-color-surface-subtle);
  --cs-color-surface-container-high: var(--cs-color-surface);

  --cs-font-family: var(--cs-font-body);

  /* Type-Aliase (Material-3-Namen -> Plan-B-Naehe) */
  --cs-type-headline-large-size: var(--cs-type-h1-size);
  --cs-type-headline-large-line: var(--cs-type-h1-line);
  --cs-type-headline-medium-size: var(--cs-type-h2-size);
  --cs-type-headline-medium-line: var(--cs-type-h2-line);
  --cs-type-title-large-size: var(--cs-type-h3-size);
  --cs-type-title-large-line: var(--cs-type-h3-line);
  --cs-type-title-medium-size: var(--cs-type-h4-size);
  --cs-type-title-medium-line: var(--cs-type-h4-line);
  --cs-type-title-small-size: var(--cs-type-body-sm-size);
  --cs-type-title-small-line: var(--cs-type-body-sm-line);
  --cs-type-body-large-size: var(--cs-type-body-size);
  --cs-type-body-large-line: var(--cs-type-body-line);
  --cs-type-body-medium-size: var(--cs-type-body-sm-size);
  --cs-type-body-medium-line: var(--cs-type-body-sm-line);
  --cs-type-body-small-size: var(--cs-type-caption-size);
  --cs-type-body-small-line: var(--cs-type-caption-line);
  --cs-type-label-large-size: var(--cs-type-body-sm-size);
  --cs-type-label-large-line: var(--cs-type-body-sm-line);
  --cs-type-label-medium-size: var(--cs-type-chip-size);
  --cs-type-label-medium-line: var(--cs-type-chip-line);

  /* Spacing-Aliase (Material-4dp-Skala -> Plan-B-8px) */
  --cs-space-1: var(--cs-space-xs);
  --cs-space-2: var(--cs-space-sm);
  --cs-space-3: 12px;
  --cs-space-4: var(--cs-space-md);
  --cs-space-5: 20px;
  --cs-space-6: var(--cs-space-lg);
  --cs-space-8: var(--cs-space-xl);
  --cs-space-10: 40px;
  --cs-space-12: var(--cs-space-2xl);
  --cs-space-16: var(--cs-space-3xl);

  /* Radius-Aliase */
  --cs-radius-xs: var(--cs-radius-sm);
  --cs-radius-xl: var(--cs-radius-lg);
  --cs-radius-pill: var(--cs-radius-full);

  /* Elevation-Aliase */
  --cs-elevation-1: var(--cs-elevation-sm);
  --cs-elevation-2: var(--cs-elevation-default);
  --cs-elevation-3: var(--cs-elevation-md);

  /* Layout-Aliase */
  --cs-input-min-height: var(--cs-input-height);
}

/* Reduced-Motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --cs-motion-fast: 0ms;
    --cs-motion-medium: 0ms;
    --cs-motion-slow: 0ms;
  }
}