/* Erzeugt aus tokens.json mit design/tools/build_tokens_css.py. Nicht von Hand ändern. */

/* Farbwelt light (Standard) */
:root, [data-theme="light"] {
  --field: #2230cf;
  --field-deep: #141c8a;
  --on-field: #ffffff;
  --on-field-secondary: #cdd1f7;
  --signal: #dab785;
  --on-signal: #0b0e2e;
  --bg: #ffffff;
  --bg-grouped: #eef0f9;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --fill: rgba(34, 48, 207, 0.08);
  --separator: rgba(11, 14, 46, 0.14);
  --label: #0b0e2e;
  --label-secondary: #40457a;
  --label-tertiary: #5b6096;
  --tint: #2230cf;
  --on-tint: #ffffff;
  --tint-soft: #e4e7fb;
  --success: #0b7a4b;
  --success-soft: #dff3ea;
  --warning: #8a5a12;
  --warning-soft: #f8eedd;
  --danger: #b3321f;
  --on-danger: #ffffff;
  --danger-soft: #fbe7e3;
  --material-chrome: rgba(255, 255, 255, 0.88);
  --material-field: rgba(20, 28, 138, 0.7);
  --material-sheet: rgba(255, 255, 255, 0.92);
  --material-edge: rgba(255, 255, 255, 0.6);
  --scrim: rgba(11, 14, 46, 0.4);
  --shadow-card: 0 1px 2px rgba(11, 14, 46, 0.06), 0 2px 8px rgba(11, 14, 46, 0.05);
  --shadow-popover: 0 2px 6px rgba(11, 14, 46, 0.07), 0 10px 28px rgba(11, 14, 46, 0.14);
  --shadow-sheet: 0 4px 12px rgba(11, 14, 46, 0.1), 0 24px 64px rgba(11, 14, 46, 0.22);
}

/* Farbwelt Navy */
[data-theme="navy"] {
  --field: #263c5e;
  --field-deep: #031d44;
  --on-field-secondary: #c9d3e6;
  --bg: #ffffff;
  --bg-grouped: #eef1f6;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --fill: rgba(38, 60, 94, 0.09);
  --separator: rgba(11, 18, 32, 0.14);
  --label: #0b1220;
  --label-secondary: #44546a;
  --label-tertiary: #5e6b7d;
  --tint: #263c5e;
  --on-tint: #ffffff;
  --tint-soft: #e3e8f1;
  --success: #0b7a4b;
  --success-soft: #dff3ea;
  --warning: #8a5a12;
  --warning-soft: #f8eedd;
  --danger: #b3321f;
  --on-danger: #ffffff;
  --danger-soft: #fbe7e3;
  --material-chrome: rgba(255, 255, 255, 0.88);
  --material-field: rgba(3, 29, 68, 0.72);
  --material-sheet: rgba(255, 255, 255, 0.92);
  --material-edge: rgba(255, 255, 255, 0.6);
  --scrim: rgba(11, 14, 46, 0.4);
  --shadow-card: 0 1px 2px rgba(11, 14, 46, 0.06), 0 2px 8px rgba(11, 14, 46, 0.05);
  --shadow-popover: 0 2px 6px rgba(11, 14, 46, 0.07), 0 10px 28px rgba(11, 14, 46, 0.14);
  --shadow-sheet: 0 4px 12px rgba(11, 14, 46, 0.1), 0 24px 64px rgba(11, 14, 46, 0.22);
}

/* Farbwelt Navy Nacht */
[data-theme="navy-dark"] {
  --field: #263c5e;
  --field-deep: #031d44;
  --on-field-secondary: #c9d3e6;
  --bg: #050b18;
  --bg-grouped: #050b18;
  --surface: #0c1628;
  --surface-raised: #14213a;
  --fill: rgba(201, 211, 230, 0.14);
  --separator: rgba(201, 211, 230, 0.18);
  --label: #f2f5fa;
  --label-secondary: #b1bdd1;
  --label-tertiary: #8d9bb3;
  --tint: #9db4dc;
  --on-tint: #050b18;
  --tint-soft: #17284a;
  --success: #5fd3a0;
  --success-soft: #0d2e22;
  --warning: #e3bd84;
  --warning-soft: #33270f;
  --danger: #ff9d8a;
  --on-danger: #050b18;
  --danger-soft: #3d1712;
  --material-chrome: rgba(12, 22, 40, 0.84);
  --material-field: rgba(3, 29, 68, 0.72);
  --material-sheet: rgba(20, 33, 58, 0.9);
  --material-edge: rgba(255, 255, 255, 0.1);
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-popover: 0 2px 6px rgba(0, 0, 0, 0.35), 0 10px 28px rgba(0, 0, 0, 0.55);
  --shadow-sheet: 0 4px 12px rgba(0, 0, 0, 0.4), 0 24px 64px rgba(0, 0, 0, 0.65);
}

/* Farbwelt Blau Nacht */
[data-theme="dark"] {
  --field: #2230cf;
  --field-deep: #141c8a;
  --on-field-secondary: #cdd1f7;
  --bg: #06081f;
  --bg-grouped: #06081f;
  --surface: #0e1238;
  --surface-raised: #171c52;
  --fill: rgba(205, 209, 247, 0.14);
  --separator: rgba(205, 209, 247, 0.18);
  --label: #f3f4ff;
  --label-secondary: #b3b8ea;
  --label-tertiary: #8f95d1;
  --tint: #a3acff;
  --on-tint: #06081f;
  --tint-soft: #1a2066;
  --success: #5fd3a0;
  --success-soft: #0d2e22;
  --warning: #e3bd84;
  --warning-soft: #33270f;
  --danger: #ff9d8a;
  --on-danger: #06081f;
  --danger-soft: #3d1712;
  --material-chrome: rgba(14, 18, 56, 0.84);
  --material-field: rgba(20, 28, 138, 0.7);
  --material-sheet: rgba(23, 28, 82, 0.9);
  --material-edge: rgba(255, 255, 255, 0.1);
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-popover: 0 2px 6px rgba(0, 0, 0, 0.35), 0 10px 28px rgba(0, 0, 0, 0.55);
  --shadow-sheet: 0 4px 12px rgba(0, 0, 0, 0.4), 0 24px 64px rgba(0, 0, 0, 0.65);
}

/* Farbwelt Grün */
[data-theme="green"] {
  --field: #1d6b50;
  --field-deep: #0f3f30;
  --on-field-secondary: #cfe7dc;
  --bg: #ffffff;
  --bg-grouped: #eef5f1;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --fill: rgba(29, 107, 80, 0.09);
  --separator: rgba(10, 26, 20, 0.14);
  --label: #0a1a14;
  --label-secondary: #3f5a4e;
  --label-tertiary: #55705f;
  --tint: #1d6b50;
  --on-tint: #ffffff;
  --tint-soft: #dff0e8;
  --success: #0b7a4b;
  --success-soft: #dff3ea;
  --warning: #8a5a12;
  --warning-soft: #f8eedd;
  --danger: #b3321f;
  --on-danger: #ffffff;
  --danger-soft: #fbe7e3;
  --material-chrome: rgba(255, 255, 255, 0.88);
  --material-field: rgba(15, 63, 48, 0.72);
  --material-sheet: rgba(255, 255, 255, 0.92);
  --material-edge: rgba(255, 255, 255, 0.6);
  --scrim: rgba(11, 14, 46, 0.4);
  --shadow-card: 0 1px 2px rgba(11, 14, 46, 0.06), 0 2px 8px rgba(11, 14, 46, 0.05);
  --shadow-popover: 0 2px 6px rgba(11, 14, 46, 0.07), 0 10px 28px rgba(11, 14, 46, 0.14);
  --shadow-sheet: 0 4px 12px rgba(11, 14, 46, 0.1), 0 24px 64px rgba(11, 14, 46, 0.22);
}

/* Farbwelt Grün Nacht */
[data-theme="green-dark"] {
  --field: #1d6b50;
  --field-deep: #0f3f30;
  --on-field-secondary: #cfe7dc;
  --bg: #04130e;
  --bg-grouped: #04130e;
  --surface: #0a2019;
  --surface-raised: #123026;
  --fill: rgba(207, 231, 220, 0.14);
  --separator: rgba(207, 231, 220, 0.18);
  --label: #f1f7f4;
  --label-secondary: #b0cabd;
  --label-tertiary: #86a596;
  --tint: #7fd0ad;
  --on-tint: #04130e;
  --tint-soft: #123a2c;
  --success: #5fd3a0;
  --success-soft: #0d2e22;
  --warning: #e3bd84;
  --warning-soft: #33270f;
  --danger: #ff9d8a;
  --on-danger: #04130e;
  --danger-soft: #3d1712;
  --material-chrome: rgba(10, 32, 25, 0.84);
  --material-field: rgba(15, 63, 48, 0.72);
  --material-sheet: rgba(18, 48, 38, 0.9);
  --material-edge: rgba(255, 255, 255, 0.1);
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-popover: 0 2px 6px rgba(0, 0, 0, 0.35), 0 10px 28px rgba(0, 0, 0, 0.55);
  --shadow-sheet: 0 4px 12px rgba(0, 0, 0, 0.4), 0 24px 64px rgba(0, 0, 0, 0.65);
}

/* Nacht folgt dem System, solange kein data-theme gesetzt ist. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --field: #2230cf;
    --field-deep: #141c8a;
    --on-field-secondary: #cdd1f7;
    --bg: #06081f;
    --bg-grouped: #06081f;
    --surface: #0e1238;
    --surface-raised: #171c52;
    --fill: rgba(205, 209, 247, 0.14);
    --separator: rgba(205, 209, 247, 0.18);
    --label: #f3f4ff;
    --label-secondary: #b3b8ea;
    --label-tertiary: #8f95d1;
    --tint: #a3acff;
    --on-tint: #06081f;
    --tint-soft: #1a2066;
    --success: #5fd3a0;
    --success-soft: #0d2e22;
    --warning: #e3bd84;
    --warning-soft: #33270f;
    --danger: #ff9d8a;
    --on-danger: #06081f;
    --danger-soft: #3d1712;
    --material-chrome: rgba(14, 18, 56, 0.84);
    --material-field: rgba(20, 28, 138, 0.7);
    --material-sheet: rgba(23, 28, 82, 0.9);
    --material-edge: rgba(255, 255, 255, 0.1);
    --scrim: rgba(0, 0, 0, 0.6);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-popover: 0 2px 6px rgba(0, 0, 0, 0.35), 0 10px 28px rgba(0, 0, 0, 0.55);
    --shadow-sheet: 0 4px 12px rgba(0, 0, 0, 0.4), 0 24px 64px rgba(0, 0, 0, 0.65);
  }
}

/* Abstand, Radius, Unschärfe, Maße, Layout, Raster, Schrift */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-full: 9999px;
  --blur-chrome: 20px;
  --blur-sheet: 40px;
  --size-touch: 44px;
  --size-control: 48px;
  --size-control-sm: 36px;
  --size-content: 640px;
  --breakpoint-medium: 600px;
  --breakpoint-wide: 1024px;
  --breakpoint-xwide: 1440px;
  --size-sidebar: 248px;
  --size-detail: 480px;
  --size-page: 1440px;
  --raster-cell: 6px;
  --raster-dot: 1.2px;
  --font-sans: "Instrument Sans", -apple-system, system-ui, sans-serif;
  --font-dot: "Doto", "Instrument Sans", ui-monospace, monospace;
}

/* Schriftstufen als Klassen: .t-display, .t-headline, .t-figure ... */
.t-display {
  font-family: var(--font-sans);
  font-size: 56px;
  line-height: 56px;
  font-weight: 600;
  letter-spacing: -0.035em;
}

.t-large-title {
  font-family: var(--font-sans);
  font-size: 34px;
  line-height: 38px;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.t-title-1 {
  font-family: var(--font-sans);
  font-size: 28px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.t-title-2 {
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.t-title-3 {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.t-headline {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 22px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.t-body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 24px;
  font-weight: 400;
}

.t-callout {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
}

.t-subheadline {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 20px;
  font-weight: 400;
}

.t-footnote {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 0.005em;
}

.t-caption {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.t-caption-2 {
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.t-figure-xl {
  font-family: var(--font-dot);
  font-size: 72px;
  line-height: 72px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.t-figure {
  font-family: var(--font-dot);
  font-size: 40px;
  line-height: 44px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}