@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/montserrat-bold.ttf") format("truetype");
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/roboto-v30-latin-300.woff2") format("woff2");
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/roboto-v30-latin-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/roboto-v30-latin-500.woff2") format("woff2");
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/roboto-v30-latin-700.woff2") format("woff2");
}

:root {
  /* Canonical Leadity token contract. DESIGN.md owns meaning; this file owns values. */
  color-scheme: light;

  /* Color roles */
  --bg: #f0f5f5;
  --surface: #ffffff;
  --fg: #05323c;
  --muted: #829ba0;
  --border: #cbd9da;
  --accent: #325a5f;
  --accent-on: #ffffff;
  --accent-hover: #05323c;
  --accent-active: #01181d;
  --accent-secondary: #5ab45a;
  --brand-secondary: #ffa53c;

  --neutral-10: #f0f5f5;
  --neutral-20: #dce7e7;
  --neutral-40: #cbd9da;
  --neutral-50: #a6b8b9;
  --neutral-60: #829ba0;
  --neutral-80: #325a5f;
  --neutral-100: #05323c;
  --neutral-120: #01181d;

  --success-text: #1d8b6a;
  --success: #00a977;
  --success-soft: #e2f7eb;
  --warning-text: #f4a100;
  --warning: #ffa53c;
  --warning-soft: #fff8de;
  --error-text: #bc194a;
  --error: #e74444;
  --error-soft: #ffe7ea;
  --info-text: #2073a2;
  --info: #2591cf;
  --info-soft: #e9f7ff;

  /* Source-backed chart palette from the legacy Leadity chart contract. */
  --chart-neutral-100: var(--neutral-100);
  --chart-neutral-80: var(--neutral-80);
  --chart-neutral-60: var(--neutral-60);
  --chart-neutral-40: var(--neutral-40);
  --chart-neutral-20: var(--neutral-20);
  --chart-gold-100: #ab9460;
  --chart-gold-80: #b9a67b;
  --chart-gold-60: #c7b896;
  --chart-gold-40: #d5cab0;
  --chart-gold-20: #e3dccb;
  --chart-green-100: #5faa70;
  --chart-green-80: #7ab888;
  --chart-green-60: #95c6a0;
  --chart-green-40: #afd4b8;
  --chart-green-20: #cae3cf;
  --chart-aqua-100: #66bcc1;
  --chart-aqua-80: #83c9cd;
  --chart-aqua-60: #a0d6d9;
  --chart-aqua-40: #bde2e4;
  --chart-aqua-20: #daeff0;
  --chart-lilac-100: #815cd7;
  --chart-lilac-80: #9a7ddf;
  --chart-lilac-60: #b39ee7;
  --chart-lilac-40: #cdbeef;
  --chart-lilac-20: #e6dff7;
  --chart-pink-100: #c166b5;
  --chart-pink-80: #cd83c3;
  --chart-pink-60: #d9a0d1;
  --chart-pink-40: #e4bddf;
  --chart-pink-20: #f0daed;
  --chart-purple-100: #c16667;
  --chart-purple-80: #cd8384;
  --chart-purple-60: #d9a0a1;
  --chart-purple-40: #e4bdbe;
  --chart-purple-20: #f0dadb;

  /* Typography */
  --font-display: "Montserrat", system-ui, sans-serif;
  --font-body: "Roboto", system-ui, sans-serif;
  --font-mono: ui-monospace, "Roboto Mono", monospace;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 21px;
  --text-2xl: 25px;
  --text-3xl: 30px;
  --text-4xl: var(--text-3xl);
  --leading-body: 1.5;
  --leading-tight: 1.3;
  --tracking-display: 0;
  --display-lg: 700 var(--text-3xl)/1.3 var(--font-display);
  --display-md: 700 var(--text-2xl)/1.3 var(--font-display);
  --display-sm: 700 var(--text-xl)/1.3 var(--font-display);
  --headline-md: 700 var(--text-lg)/1.5 var(--font-body);
  --body: 400 var(--text-base)/1.5 var(--font-body);
  --body-medium: 500 var(--text-base)/1.5 var(--font-body);
  --body-bold: 700 var(--text-base)/1.5 var(--font-body);
  --body-compact: 400 var(--text-sm)/1.5 var(--font-body);
  --overline: 400 var(--text-xs)/1.5 var(--font-body);

  /* Leadity spacing scale */
  --s0: 0;
  --s1: 2px;
  --s2: 4px;
  --s3: 8px;
  --s4: 12px;
  --s5: 16px;
  --s6: 24px;
  --s7: 32px;
  --s8: 48px;
  --s9: 64px;
  --s10: 96px;
  --s11: 128px;
  --s12: 192px;
  --s13: 256px;
  --s14: 320px;

  /* Layout, elevation, controls, and motion */
  --radius-field: 4px;
  --radius-compact: 8px;
  --radius-panel: 12px;
  --radius-card: 20px;
  --radius-full: 9999px;
  --shadow-flat: none;
  --shadow-ring: 0 0 0 1px var(--border);
  --shadow-default: 0 2px 15px 0 #313c5405;
  --shadow-hover: 0 4px 30px 0 #313c540d;
  --shadow-floating: 0 4px 15px 0 #3c4b5114;
  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
  --content-max: 1800px;
  --text-max: 1000px;
  --control-compact: 32px;
  --control-default: 40px;
  --control-large: 48px;
  --control-floating: 56px;
  --motion-fast: 140ms;
  --motion-base: 200ms;
  --ease-standard: cubic-bezier(0.23, 1, 0.32, 1);

  /* Open Design compatibility aliases; never assign independent values here. */
  --fg-2: var(--fg);
  --meta: var(--muted);
  --border-soft: var(--border);
  --warn: var(--warning-text);
  --danger: var(--error-text);
  --space-1: var(--s2);
  --space-2: var(--s3);
  --space-3: var(--s4);
  --space-4: var(--s5);
  --space-5: var(--s5);
  --space-6: var(--s6);
  --space-8: var(--s7);
  --space-12: var(--s8);
  --section-y-desktop: var(--s10);
  --section-y-tablet: var(--s9);
  --section-y-phone: var(--s8);
  --radius-sm: var(--radius-field);
  --radius-md: var(--radius-compact);
  --radius-lg: var(--radius-card);
  --radius-pill: var(--radius-full);
  --elev-flat: var(--shadow-flat);
  --elev-ring: var(--shadow-ring);
  --elev-raised: var(--shadow-default);
  --container-max: var(--content-max);
  --container-gutter-desktop: var(--s7);
  --container-gutter-tablet: var(--s6);
  --container-gutter-phone: var(--s5);

  /* Kanonische Leadity-App-Shell-Aliase. Werte bleiben an diesen Tokenvertrag gebunden. */
  --leadity-white: var(--surface);
  --leadity-neutral-10: var(--neutral-10);
  --leadity-neutral-20: var(--neutral-20);
  --leadity-neutral-40: var(--neutral-40);
  --leadity-neutral-50: var(--neutral-50);
  --leadity-neutral-60: var(--neutral-60);
  --leadity-neutral-80: var(--neutral-80);
  --leadity-neutral-100: var(--neutral-100);
  --leadity-neutral-120: var(--neutral-120);
  --leadity-text-dark: var(--neutral-120);
  --leadity-text-default: var(--neutral-100);
  --leadity-text-light: var(--neutral-60);
  --leadity-ui-primary: var(--accent);
  --leadity-state-check-background: var(--info);
  --leadity-theme-main: var(--mainColor, var(--accent-secondary));
  --leadity-theme-on-main: var(--secondColor, var(--accent-on));
  --leadity-font-display: var(--font-display);
  --leadity-font-body: var(--font-body);
  --leadity-space-1: var(--s1);
  --leadity-space-2: var(--s2);
  --leadity-space-3: var(--s3);
  --leadity-space-4: var(--s4);
  --leadity-space-5: var(--s5);
  --leadity-space-6: var(--s6);
  --leadity-space-7: var(--s7);
  --leadity-space-8: var(--s8);
  --leadity-radius-xl: var(--radius-card);
  --leadity-radius-sm: var(--radius-field);
  --leadity-radius-full: var(--radius-full);
  --leadity-line-xs: 1px;
  --leadity-shadow-default: var(--shadow-default);
  --leadity-shadow-hover: var(--shadow-hover);
  --leadity-shadow-floating: var(--shadow-floating);
  --leadity-shell-header-height: 50px;
  --leadity-shell-footer-height: 50px;
  --leadity-shell-sidebar-width: 344px;
  --leadity-shell-context-rail-width: var(--control-large);
  --leadity-control-large: var(--control-large);
  --leadity-focus-width: 2px;
  --leadity-focus-offset: 2px;
  --leadity-focus-color: var(--accent);

}