/* GENERATED from sommer-design-system/DESIGN.md by tools/build.js – do not edit by hand. */
/* Sommer Design System 2.0 · DESIGN.md version alpha */

:root {
  color-scheme: light;
  /* Colors (primitives + semantics; references stay linked via var()) */
  --color-primary: var(--color-neutral-900);
  --color-secondary: var(--color-neutral-600);
  --color-tertiary: var(--color-accent);
  --color-neutral: var(--color-neutral-50);
  --color-neutral-25: oklch(0.99 0.003 85);
  --color-neutral-50: oklch(0.976 0.003 85);
  --color-neutral-100: oklch(0.93 0.006 85);
  --color-neutral-200: oklch(0.86 0.007 85);
  --color-neutral-300: oklch(0.72 0.008 85);
  --color-neutral-400: oklch(0.6 0.008 85);
  --color-neutral-500: oklch(0.5 0.008 85);
  --color-neutral-600: oklch(0.42 0.008 85);
  --color-neutral-700: oklch(0.3 0.008 85);
  --color-neutral-900: oklch(0.2 0.008 85);
  --color-accent: #c15a30;
  --color-accent-text: #a8481f;
  --color-accent-hover: #8a4a24;
  --color-accent-tint: #f8ece5;
  --color-bg-page: var(--color-neutral-50);
  --color-bg-surface: var(--color-neutral-25);
  --color-bg-subtle: var(--color-neutral-100);
  --color-bg-field: #fffdf6;
  --color-text-primary: var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-700);
  --color-text-muted: var(--color-neutral-500);
  --color-text-disabled: var(--color-neutral-400);
  --color-text-link: var(--color-accent-text);
  --color-text-on-action: var(--color-neutral-25);
  --color-border-hairline: var(--color-neutral-200);
  --color-border-control: var(--color-neutral-400);
  --color-border-strong: var(--color-neutral-700);
  --color-border-focus: var(--color-accent-text);
  --color-action-primary: var(--color-neutral-700);
  --color-action-primary-hover: var(--color-neutral-900);
  --color-action-secondary: var(--color-neutral-100);
  --color-action-secondary-hover: var(--color-neutral-200);
  --color-action-cta: var(--color-accent-text);
  --color-action-cta-hover: var(--color-accent-hover);
  --color-action-danger: #a12f2b;
  --color-action-danger-hover: #7f2420;
  --color-success: #286047;
  --color-success-bg: #edf5ef;
  --color-warning: #75500a;
  --color-warning-bg: #fff4d8;
  --color-danger: #a12f2b;
  --color-danger-bg: #fbecea;
  --color-info: #1f5f8b;
  --color-info-bg: #e8f1f8;
  --color-data-seq: #2a78d6;
  --color-data-seq-track: #cde2fb;
  --color-data-1: #2a78d6;
  --color-data-2: #eb6834;
  --color-data-3: #1baf7a;
  --color-data-4: #eda100;
  --color-data-5: #e87ba4;
  --color-data-6: #6250d6;
  /* Typography */
  --font-display: 'Archivo', 'Manrope', Arial, sans-serif;
  --font-text: 'Manrope', system-ui, 'Segoe UI', Arial, sans-serif;
  --type-h1-family: var(--font-display);
  --type-h1-size: 46px;
  --type-h1-weight: 700;
  --type-h1-leading: 1.16;
  --type-h1-tracking: -0.012em;
  --type-h2-family: var(--font-display);
  --type-h2-size: 34px;
  --type-h2-weight: 700;
  --type-h2-leading: 1.2;
  --type-h2-tracking: -0.01em;
  --type-h3-family: var(--font-display);
  --type-h3-size: 26px;
  --type-h3-weight: 700;
  --type-h3-leading: 1.25;
  --type-h3-tracking: -0.008em;
  --type-h4-family: var(--font-display);
  --type-h4-size: 20px;
  --type-h4-weight: 600;
  --type-h4-leading: 1.3;
  --type-h4-tracking: -0.004em;
  --type-body-lg-family: var(--font-text);
  --type-body-lg-size: 18px;
  --type-body-lg-weight: 500;
  --type-body-lg-leading: 1.55;
  --type-body-md-family: var(--font-text);
  --type-body-md-size: 16.5px;
  --type-body-md-weight: 500;
  --type-body-md-leading: 1.6;
  --type-body-sm-family: var(--font-text);
  --type-body-sm-size: 14px;
  --type-body-sm-weight: 500;
  --type-body-sm-leading: 1.5;
  --type-label-caps-family: var(--font-text);
  --type-label-caps-size: 12px;
  --type-label-caps-weight: 600;
  --type-label-caps-leading: 1.3;
  --type-label-caps-tracking: 0.05em;
  --type-app-title-family: var(--font-display);
  --type-app-title-size: 24px;
  --type-app-title-weight: 700;
  --type-app-title-leading: 1.2;
  --type-app-title-tracking: -0.01em;
  --type-app-heading-family: var(--font-display);
  --type-app-heading-size: 20px;
  --type-app-heading-weight: 650;
  --type-app-heading-leading: 1.25;
  --type-app-subheading-family: var(--font-text);
  --type-app-subheading-size: 16px;
  --type-app-subheading-weight: 650;
  --type-app-subheading-leading: 1.35;
  --type-app-body-family: var(--font-text);
  --type-app-body-size: 15px;
  --type-app-body-weight: 500;
  --type-app-body-leading: 1.5;
  --type-app-control-family: var(--font-text);
  --type-app-control-size: 14px;
  --type-app-control-weight: 600;
  --type-app-control-leading: 1.3;
  --type-app-small-family: var(--font-text);
  --type-app-small-size: 13px;
  --type-app-small-weight: 500;
  --type-app-small-leading: 1.4;
  --type-app-caption-family: var(--font-text);
  --type-app-caption-size: 12px;
  --type-app-caption-weight: 600;
  --type-app-caption-leading: 1.35;
  --type-app-numeric-family: var(--font-text);
  --type-app-numeric-size: 30px;
  --type-app-numeric-weight: 650;
  --type-app-numeric-leading: 1.15;
  /* Shape, spacing, sizes, motion, elevation, layers */
  --radius-base: 0px;
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --size-control-height: 36px;
  --size-control-height-compact: 32px;
  --size-target-touch: 44px;
  --size-target-min: 24px;
  --size-icon-sm: 16px;
  --size-icon-md: 20px;
  --size-border-hairline: 1px;
  --size-border-control: 1px;
  --size-border-emphasis: 2px;
  --size-accent-bar: 4px;
  --size-focus-ring: 2px;
  --size-focus-offset: 2px;
  --size-module-padding: 24px;
  --size-module-padding-compact: 16px;
  --size-container-max: 1200px;
  --size-reading-max: 68ch;
  --size-gutter: 24px;
  --size-gutter-narrow: 16px;
  --motion-duration-fast: 150ms;
  --motion-duration-base: 220ms;
  --motion-duration-slow: 350ms;
  --motion-easing-enter: ease-out;
  --motion-easing-transition: ease-in-out;
  --elevation-none: none;
  --elevation-overlay: 0 4px 16px rgba(23, 22, 17, 0.14);
  --elevation-scrim: rgba(23, 22, 17, 0.45);
  --layer-sticky: 10;
  --layer-overlay: 20;
  --layer-toast: 30;
  --layer-dialog: 40;
}

@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-primary: var(--color-text-primary);
    --color-secondary: var(--color-text-secondary);
    --color-tertiary: var(--color-accent);
    --color-neutral: var(--color-bg-page);
    --color-accent: #d9744a;
    --color-accent-text: #e8946b;
    --color-accent-hover: #f0a985;
    --color-accent-tint: #2c211b;
    --color-bg-page: #161511;
    --color-bg-surface: #1f1d19;
    --color-bg-subtle: #2a2823;
    --color-bg-field: #24221e;
    --color-text-primary: #f1efe9;
    --color-text-secondary: #b5b1a8;
    --color-text-muted: #9a968d;
    --color-text-disabled: #6f6b63;
    --color-text-link: var(--color-accent-text);
    --color-text-on-action: #171611;
    --color-border-hairline: #3a3732;
    --color-border-control: #8a867d;
    --color-border-strong: #d8d4cb;
    --color-border-focus: var(--color-accent-text);
    --color-action-primary: #f1efe9;
    --color-action-primary-hover: #ffffff;
    --color-action-secondary: #2a2823;
    --color-action-secondary-hover: #3a3732;
    --color-action-cta: var(--color-accent-text);
    --color-action-cta-hover: var(--color-accent-hover);
    --color-action-danger: #f08a80;
    --color-action-danger-hover: #f6aaa2;
    --color-success: #6cc596;
    --color-success-bg: #15291e;
    --color-warning: #e8bf62;
    --color-warning-bg: #33280f;
    --color-danger: #f08a80;
    --color-danger-bg: #3a1816;
    --color-info: #8cc0e8;
    --color-info-bg: #13263a;
    --color-data-seq: #3987e5;
    --color-data-seq-track: #24364d;
    --color-data-1: #3987e5;
    --color-data-2: #d95926;
    --color-data-3: #199e70;
    --color-data-4: #c98500;
    --color-data-5: #d55181;
    --color-data-6: #9085e9;
    --elevation-overlay: 0 4px 16px rgba(0, 0, 0, 0.5);
    --elevation-scrim: rgba(0, 0, 0, 0.6);
  }
}

@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --color-primary: var(--color-text-primary);
    --color-secondary: var(--color-text-secondary);
    --color-tertiary: var(--color-accent);
    --color-neutral: var(--color-bg-page);
    --color-accent: #d9744a;
    --color-accent-text: #e8946b;
    --color-accent-hover: #f0a985;
    --color-accent-tint: #2c211b;
    --color-bg-page: #161511;
    --color-bg-surface: #1f1d19;
    --color-bg-subtle: #2a2823;
    --color-bg-field: #24221e;
    --color-text-primary: #f1efe9;
    --color-text-secondary: #b5b1a8;
    --color-text-muted: #9a968d;
    --color-text-disabled: #6f6b63;
    --color-text-link: var(--color-accent-text);
    --color-text-on-action: #171611;
    --color-border-hairline: #3a3732;
    --color-border-control: #8a867d;
    --color-border-strong: #d8d4cb;
    --color-border-focus: var(--color-accent-text);
    --color-action-primary: #f1efe9;
    --color-action-primary-hover: #ffffff;
    --color-action-secondary: #2a2823;
    --color-action-secondary-hover: #3a3732;
    --color-action-cta: var(--color-accent-text);
    --color-action-cta-hover: var(--color-accent-hover);
    --color-action-danger: #f08a80;
    --color-action-danger-hover: #f6aaa2;
    --color-success: #6cc596;
    --color-success-bg: #15291e;
    --color-warning: #e8bf62;
    --color-warning-bg: #33280f;
    --color-danger: #f08a80;
    --color-danger-bg: #3a1816;
    --color-info: #8cc0e8;
    --color-info-bg: #13263a;
    --color-data-seq: #3987e5;
    --color-data-seq-track: #24364d;
    --color-data-1: #3987e5;
    --color-data-2: #d95926;
    --color-data-3: #199e70;
    --color-data-4: #c98500;
    --color-data-5: #d55181;
    --color-data-6: #9085e9;
    --elevation-overlay: 0 4px 16px rgba(0, 0, 0, 0.5);
    --elevation-scrim: rgba(0, 0, 0, 0.6);
  }
}

[data-density="compact"] {
  --size-control-height: var(--size-control-height-compact);
  --size-module-padding: var(--size-module-padding-compact);
}

/* Profile personal (festgelegt) */
[data-profile="personal"] {
  --color-accent: #c15a30;
  --color-accent-text: #a8481f;
  --color-accent-hover: #8a4a24;
  --color-accent-tint: #f8ece5;
  --color-action-cta: var(--color-accent-text);
  --color-action-cta-hover: var(--color-accent-hover);
  --color-border-focus: var(--color-accent-text);
  --color-tertiary: var(--color-accent);
  --color-text-link: var(--color-accent-text);
}
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-profile="personal"], :root:not([data-theme="light"])[data-profile="personal"] {
    --color-accent: #d9744a;
    --color-accent-text: #e8946b;
    --color-accent-hover: #f0a985;
    --color-accent-tint: #2c211b;
    --color-action-cta: var(--color-accent-text);
    --color-action-cta-hover: var(--color-accent-hover);
    --color-border-focus: var(--color-accent-text);
    --color-tertiary: var(--color-accent);
    --color-text-link: var(--color-accent-text);
  }
}
@media screen {
  :root[data-theme="dark"] [data-profile="personal"], :root[data-theme="dark"][data-profile="personal"] {
    --color-accent: #d9744a;
    --color-accent-text: #e8946b;
    --color-accent-hover: #f0a985;
    --color-accent-tint: #2c211b;
    --color-action-cta: var(--color-accent-text);
    --color-action-cta-hover: var(--color-accent-hover);
    --color-border-focus: var(--color-accent-text);
    --color-tertiary: var(--color-accent);
    --color-text-link: var(--color-accent-text);
  }
}

/* Profile sommerflow (festgelegt) */
[data-profile="sommerflow"] {
  --color-accent: #c15a30;
  --color-accent-text: #a8481f;
  --color-accent-hover: #8a4a24;
  --color-accent-tint: #f8ece5;
  --color-action-cta: var(--color-accent-text);
  --color-action-cta-hover: var(--color-accent-hover);
  --color-border-focus: var(--color-accent-text);
  --color-tertiary: var(--color-accent);
  --color-text-link: var(--color-accent-text);
}
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-profile="sommerflow"], :root:not([data-theme="light"])[data-profile="sommerflow"] {
    --color-accent: #d9744a;
    --color-accent-text: #e8946b;
    --color-accent-hover: #f0a985;
    --color-accent-tint: #2c211b;
    --color-action-cta: var(--color-accent-text);
    --color-action-cta-hover: var(--color-accent-hover);
    --color-border-focus: var(--color-accent-text);
    --color-tertiary: var(--color-accent);
    --color-text-link: var(--color-accent-text);
  }
}
@media screen {
  :root[data-theme="dark"] [data-profile="sommerflow"], :root[data-theme="dark"][data-profile="sommerflow"] {
    --color-accent: #d9744a;
    --color-accent-text: #e8946b;
    --color-accent-hover: #f0a985;
    --color-accent-tint: #2c211b;
    --color-action-cta: var(--color-accent-text);
    --color-action-cta-hover: var(--color-accent-hover);
    --color-border-focus: var(--color-accent-text);
    --color-tertiary: var(--color-accent);
    --color-text-link: var(--color-accent-text);
  }
}

/* Profile training (festgelegt) */
[data-profile="training"] {
  --color-accent: #c15a30;
  --color-accent-text: #a8481f;
  --color-accent-hover: #8a4a24;
  --color-accent-tint: #f8ece5;
  --color-action-cta: var(--color-accent-text);
  --color-action-cta-hover: var(--color-accent-hover);
  --color-border-focus: var(--color-accent-text);
  --color-tertiary: var(--color-accent);
  --color-text-link: var(--color-accent-text);
}
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-profile="training"], :root:not([data-theme="light"])[data-profile="training"] {
    --color-accent: #d9744a;
    --color-accent-text: #e8946b;
    --color-accent-hover: #f0a985;
    --color-accent-tint: #2c211b;
    --color-action-cta: var(--color-accent-text);
    --color-action-cta-hover: var(--color-accent-hover);
    --color-border-focus: var(--color-accent-text);
    --color-tertiary: var(--color-accent);
    --color-text-link: var(--color-accent-text);
  }
}
@media screen {
  :root[data-theme="dark"] [data-profile="training"], :root[data-theme="dark"][data-profile="training"] {
    --color-accent: #d9744a;
    --color-accent-text: #e8946b;
    --color-accent-hover: #f0a985;
    --color-accent-tint: #2c211b;
    --color-action-cta: var(--color-accent-text);
    --color-action-cta-hover: var(--color-accent-hover);
    --color-border-focus: var(--color-accent-text);
    --color-tertiary: var(--color-accent);
    --color-text-link: var(--color-accent-text);
  }
}