/* ==============================================
   Design Tokens – Auranatura Design System
   Quelle: Figma (extrahiert via MCP)
   ============================================== */

:root {

  /* --- Farben: Aura Green (Primary) --- */
  --green-50: #F3FAED;
  --green-100: #E4F2D4;
  --green-200: #CCE6AA;
  --green-300: #ADD97B;
  --green-400: #8CC94F;
  --green-500: #73B122;
  --green-600: #5D8F1B;
  --green-700: #47682D;
  --green-800: #28401D;
  --green-900: #152514;
  --green-950: #06170E;

  /* --- Farben: Aura Sand (Secondary/UI-Neutral) --- */
  --sand-50: #FAF7F2;
  --sand-100: #F3EEE8;
  --sand-200: #E7DFD4;
  --sand-300: #D7C9B8;
  --sand-400: #C3AF96;
  --sand-500: #AD9478;
  --sand-600: #8F7559;
  --sand-700: #715945;
  --sand-800: #4D3A2C;
  --sand-900: #2E221A;
  --sand-950: #1A120F;

  /* --- Farben: Blue (Medical Primary) --- */
  --blue-50: #EFF5FB;
  --blue-100: #DCEAF7;
  --blue-200: #B8D4EF;
  --blue-300: #8ABBE4;
  --blue-400: #5C9ED6;
  --blue-500: #3882C4;
  --blue-600: #2A69A3;
  --blue-700: #1F5080;
  --blue-800: #163A5C;
  --blue-900: #0E2439;
  --blue-950: #081521;

  /* --- Farben: Sage (Medical Surface) --- */
  --sage-50: #F3F6F1;
  --sage-100: #E5EBE2;
  --sage-200: #CDD8C8;
  --sage-300: #AFC0A8;
  --sage-400: #8FA686;
  --sage-500: #728C68;
  --sage-600: #5A7050;
  --sage-700: #44553D;
  --sage-800: #2E3B2A;
  --sage-900: #1A221A;
  --sage-950: #0E130E;

  /* --- Farben: Neutral (Medical Text/Borders) --- */
  --neutral-50: #F5F6F7;
  --neutral-100: #EAECEE;
  --neutral-200: #D5D8DC;
  --neutral-300: #BCC1C7;
  --neutral-400: #A0A7AF;
  --neutral-500: #858D96;
  --neutral-600: #6B7480;
  --neutral-700: #535B66;
  --neutral-800: #3B424B;
  --neutral-900: #252A31;
  --neutral-950: #14171B;

  /* --- Farben: Wine (Vita Primary) --- */
  --wine-50: #FDF2F4;
  --wine-100: #FAE1E5;
  --wine-200: #F4C2CC;
  --wine-300: #EA99A8;
  --wine-400: #DC6E82;
  --wine-500: #C94A62;
  --wine-600: #A83650;
  --wine-700: #872A3C;
  --wine-800: #5E1D2A;
  --wine-900: #3A1119;
  --wine-950: #220A0F;

  /* --- Farben: Sonstige --- */
  --white: #FFFFFF;
  --black: #000000;
  --signal-rot: #C73A52;
  --stern-gelb: #FFAA01;

  /* --- Typografie --- */
  --font-family: 'Poppins', sans-serif;

  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Headlines (Figma) */
  --headline-xl-size: 3.5rem;     /* 56px */
  --headline-xl-line: 4.75rem;    /* 76px */
  --headline-lg-size: 2.5rem;     /* 40px */
  --headline-lg-line: 3.125rem;   /* 50px */
  --headline-md-size: 2rem;       /* 32px */
  --headline-md-line: 2.625rem;   /* 42px */
  --headline-sm-size: 1.75rem;    /* 28px */
  --headline-sm-line: 2.375rem;   /* 38px */
  --headline-xs-size: 1.25rem;    /* 20px */
  --headline-xs-line: 1.875rem;   /* 30px */

  /* Text (Figma + Ergänzungen, skaliert für ältere Zielgruppe) */
  --text-xl-size: 1.375rem;       /* 22px (vorher 20px) */
  --text-xl-line: 1.75rem;        /* 28px */
  --text-md-size: 1.25rem;        /* 20px (vorher 18px) */
  --text-md-line: 1.875rem;       /* 30px */
  --text-lg-size: 1.125rem;       /* 18px (vorher 16px) — Body */
  --text-lg-line: 1.75rem;        /* 28px */
  --text-sm-size: 1rem;           /* 16px (vorher 14px) */
  --text-sm-line: 1.625rem;       /* 26px */
  --text-xs-size: 0.875rem;       /* 14px (vorher 12px) — Minimum */
  --text-xs-line: 1.375rem;       /* 22px */

  /* --- Spacing (8px Basis-Grid) --- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 2.5rem;    /* 40px */
  --space-8: 3rem;      /* 48px */
  --space-9: 4rem;      /* 64px */

  /* --- Section Spacing (konsistenter Abstand zwischen Modulen) --- */
  --section-gap: var(--space-9);        /* 64px – Mobile */
  --section-padding: var(--space-8);    /* 48px – Innenabstand für --alt Sektionen */

  /* --- Shadows --- */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);

  /* --- Border Radius --- */
  --radius-sm: 0.25rem;   /* 4px */
  --radius-md: 0.5rem;    /* 8px */
  --radius-lg: 1rem;      /* 16px */
  --radius-full: 2.5rem;  /* 40px – Buttons */

  /* --- Focus --- */
  /* Ring (2px, solid Sand 900) + Glow (5px, subtil) — einheitlich auf allen Elementen */
  /* Sand 900 auf Weiss ≈ 14:1 Kontrast — weit über WCAG 3:1 Minimum */
  --focus-shadow:
    0 0 0 2px var(--ui-900),
    0 0 0 5px color-mix(in srgb, var(--ui-900) 15%, transparent);

  /* --- Transitions --- */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;

  /* --- Button Sizes --- */
  --btn-sm-size: 0.875rem;      /* 14px */
  --btn-sm-line: 1.25rem;       /* 20px */
  --btn-sm-padding: 8px 16px;
  --btn-sm-min-h: 36px;

  --btn-md-size: 1.125rem;       /* 18px — aligned with input-md */
  --btn-md-line: 1.5rem;         /* 24px */
  --btn-md-padding: 12px 20px;
  --btn-md-min-h: 48px;

  --btn-lg-size: 1.375rem;      /* 22px */
  --btn-lg-line: 1.75rem;       /* 28px */
  --btn-lg-padding: 16px 24px;
  --btn-lg-min-h: 64px;

  /* --- Icon Sizes (Phosphor Icons, font-basiert) --- */
  --icon-xs: 1rem;                 /* 16px — Tags, Badges, kompakte UI */
  --icon-sm: 1.25rem;              /* 20px — Top Bar, Inline-Text */
  --icon-md: 1.5rem;               /* 24px — Inputs, Standard */
  --icon-lg: 1.75rem;              /* 28px — Nav-Buttons, Actions, Header */

  /* --- Layout --- */
  --content-max-width: 1200px;
  --page-px: 18px;

  /* --- Breakpoints (als Referenz, in @media verwendet) --- */
  /* Mobile: < 768px */
  /* Desktop: >= 768px */

  /* ==============================================
     Semantische Farb-Tokens (Theme-fähig)
     Primary = Markenfarbe/CTA, Secondary = Begleitfarbe
     ============================================== */

  /* --- Primary (Brand/CTA) --- */
  --primary-50: var(--green-50);
  --primary-100: var(--green-100);
  --primary-200: var(--green-200);
  --primary-300: var(--green-300);
  --primary-400: var(--green-400);
  --primary-500: var(--green-500);
  --primary-600: var(--green-600);
  --primary-700: var(--green-700);
  --primary-800: var(--green-800);
  --primary-900: var(--green-900);
  --primary-950: var(--green-950);

  /* --- Secondary (Begleitfarbe, Hintergründe) --- */
  --secondary-50: var(--sand-50);
  --secondary-100: var(--sand-100);
  --secondary-200: var(--sand-200);
  --secondary-300: var(--sand-300);
  --secondary-400: var(--sand-400);
  --secondary-500: var(--sand-500);
  --secondary-600: var(--sand-600);
  --secondary-700: var(--sand-700);
  --secondary-800: var(--sand-800);
  --secondary-900: var(--sand-900);
  --secondary-950: var(--sand-950);

  /* --- Brand Icons (themeable) --- */
  --brand-icon-bg: var(--green-200);
  --brand-icon-bg-hover: var(--green-300);
  --brand-icon-bg-active: var(--green-400);
  --brand-icon-color: var(--green-700);

  /* --- Logo Filter --- */
  --logo-filter: none;

  /* --- Image Tint (Theme-Harmonie) --- */
  --image-tint: none;

  /* --- UI Neutrals (themeable) --- */
  --ui-50: var(--sand-50);
  --ui-100: var(--sand-100);
  --ui-200: var(--sand-200);
  --ui-300: var(--sand-300);
  --ui-400: var(--sand-400);
  --ui-500: var(--sand-500);
  --ui-600: var(--sand-600);
  --ui-700: var(--sand-700);
  --ui-800: var(--sand-800);
  --ui-900: var(--sand-900);
  --ui-950: var(--sand-950);
}

/* --- Responsive Page Padding & Section Spacing --- */
@media (min-width: 768px) {
  :root {
    --page-px: clamp(24px, 4vw, 48px);
    --section-gap: 5rem;        /* 80px */
    --section-padding: var(--space-9);  /* 64px */
  }
}

@media (min-width: 1024px) {
  :root {
    --page-px: clamp(32px, 5vw, 64px);
    --section-gap: 6rem;        /* 96px */
    --section-padding: 5rem;    /* 80px */
  }
}

/* --- Medical Theme --- */
[data-theme="medical"] {
  --primary-50: var(--blue-50);
  --primary-100: var(--blue-100);
  --primary-200: var(--blue-200);
  --primary-300: var(--blue-300);
  --primary-400: var(--blue-400);
  --primary-500: var(--blue-500);
  --primary-600: var(--blue-600);
  --primary-700: var(--blue-700);
  --primary-800: var(--blue-800);
  --primary-900: var(--blue-900);
  --primary-950: var(--blue-950);

  --secondary-50: var(--sage-50);
  --secondary-100: var(--sage-100);
  --secondary-200: var(--sage-200);
  --secondary-300: var(--sage-300);
  --secondary-400: var(--sage-400);
  --secondary-500: var(--sage-500);
  --secondary-600: var(--sage-600);
  --secondary-700: var(--sage-700);
  --secondary-800: var(--sage-800);
  --secondary-900: var(--sage-900);
  --secondary-950: var(--sage-950);

  --brand-icon-bg: var(--blue-200);
  --brand-icon-bg-hover: var(--blue-300);
  --brand-icon-bg-active: var(--blue-400);
  --brand-icon-color: var(--blue-700);

  --ui-50: var(--neutral-50);
  --ui-100: var(--neutral-100);
  --ui-200: var(--neutral-200);
  --ui-300: var(--neutral-300);
  --ui-400: var(--neutral-400);
  --ui-500: var(--neutral-500);
  --ui-600: var(--neutral-600);
  --ui-700: var(--neutral-700);
  --ui-800: var(--neutral-800);
  --ui-900: var(--neutral-900);
  --ui-950: var(--neutral-950);

  --image-tint: saturate(0.82) hue-rotate(-12deg) brightness(1.03);

  --logo-filter: hue-rotate(120deg) saturate(2) brightness(0.7);
}

/* --- Vita Theme --- */
[data-theme="vita"] {
  --primary-50: var(--wine-50);
  --primary-100: var(--wine-100);
  --primary-200: var(--wine-200);
  --primary-300: var(--wine-300);
  --primary-400: var(--wine-400);
  --primary-500: var(--wine-500);
  --primary-600: var(--wine-600);
  --primary-700: var(--wine-700);
  --primary-800: var(--wine-800);
  --primary-900: var(--wine-900);
  --primary-950: var(--wine-950);

  /* Secondary erbt von :root (Sand) — kein Override nötig */

  --brand-icon-bg: var(--wine-200);
  --brand-icon-bg-hover: var(--wine-300);
  --brand-icon-bg-active: var(--wine-400);
  --brand-icon-color: var(--wine-700);

  --logo-filter: hue-rotate(310deg) saturate(1.2) brightness(0.85);
}

/* --- Typografie-Klassen --- */

body {
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-lg-size);
  line-height: var(--text-lg-line);
  color: var(--ui-900);
  background-color: var(--white);
}

.headline-xl {
  font-size: var(--headline-xl-size);
  line-height: var(--headline-xl-line);
  font-weight: var(--font-weight-semibold);
}

.headline-lg {
  font-size: var(--headline-lg-size);
  line-height: var(--headline-lg-line);
  font-weight: var(--font-weight-semibold);
}

.headline-md {
  font-size: var(--headline-md-size);
  line-height: var(--headline-md-line);
  font-weight: var(--font-weight-semibold);
}

.headline-sm {
  font-size: var(--headline-sm-size);
  line-height: var(--headline-sm-line);
  font-weight: var(--font-weight-semibold);
}

.headline-xs {
  font-size: var(--headline-xs-size);
  line-height: var(--headline-xs-line);
  font-weight: var(--font-weight-semibold);
}

.text-xl {
  font-size: var(--text-xl-size);
  line-height: var(--text-xl-line);
  font-weight: var(--font-weight-medium);
}

.text-md {
  font-size: var(--text-md-size);
  line-height: var(--text-md-line);
  font-weight: var(--font-weight-medium);
}

.text-lg {
  font-size: var(--text-lg-size);
  line-height: var(--text-lg-line);
  font-weight: var(--font-weight-medium);
}

.text-sm {
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  font-weight: var(--font-weight-medium);
}

.text-xs {
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-line);
  font-weight: var(--font-weight-medium);
}