/* ============================================================
   AVENUE Design System - Asset Avenue GmbH
   CSS Custom Properties (generiert aus tokens.json)
   Light Mode: :root · Dark Mode: [data-theme="dark"]
   Primary = echtes Logo-Blau #5C798D (Slate-Blue, OKLCH H 239),
   die Rampe ist aus diesem Hue abgeleitet.
   ============================================================ */

:root {
  /* Die Seite ist hell, unabhaengig davon, worauf das Geraet steht - einen
     Dunkelmodus schaltet allein [data-theme="dark"] ein. Ohne diese Angabe
     zeichnet der Browser auf einem Geraet im Dunkelmodus seine EIGENEN
     Bedienelemente dunkel: Aufklappliste, Bildlaufleisten, ausgefuellte
     Formularfelder - mitten in einer hellen Seite. */
  color-scheme: light;

  /* ---------- Primitives: Farben ---------- */
  --aa-primary-50:  #ECF5FB;
  --aa-primary-100: #DCEAF4;
  --aa-primary-200: #C0D4E3;
  --aa-primary-300: #9EB8CB;
  --aa-primary-400: #7A98AD;
  --aa-primary-500: #5C798D; /* Brand Core - exaktes Logo-Blau */
  --aa-primary-600: #44657B;
  --aa-primary-700: #315064;
  --aa-primary-800: #223C4E;
  --aa-primary-900: #162A37;

  --aa-mint-50:  #ECFDF6; --aa-mint-100: #D2F9E9; --aa-mint-200: #A6F0D4;
  --aa-mint-300: #6FE3BC; --aa-mint-400: #3ED0A3; --aa-mint-500: #1FB88C;
  --aa-mint-600: #149673; --aa-mint-700: #11785D; --aa-mint-800: #105F4B;
  --aa-mint-900: #0E4E3F;

  --aa-coral-50:  #FFF1EE; --aa-coral-100: #FFE0DA; --aa-coral-200: #FFC3B8;
  --aa-coral-300: #FF9D8C; --aa-coral-400: #FB7361; --aa-coral-500: #F04E3E;
  --aa-coral-600: #D93A2E; --aa-coral-700: #B02A24; --aa-coral-800: #8A211E;
  --aa-coral-900: #711D1B;

  --aa-violet-50:  #F5F2FF; --aa-violet-100: #EAE4FF; --aa-violet-200: #D3C8FF;
  --aa-violet-300: #B4A1FF; --aa-violet-400: #9376FA; --aa-violet-500: #7A55F0;
  --aa-violet-600: #6440D4; --aa-violet-700: #5132AB; --aa-violet-800: #402883;
  --aa-violet-900: #332162;

  --aa-apricot-50:  #FFF6EF; --aa-apricot-100: #FFE9D8; --aa-apricot-200: #FFD2B0;
  --aa-apricot-300: #FFB483; --aa-apricot-400: #FB9A61; --aa-apricot-500: #F58A4B;
  --aa-apricot-600: #D66F12; --aa-apricot-700: #AD5511; --aa-apricot-800: #854113;
  --aa-apricot-900: #6B3512;

  --aa-neutral-0: #FFFFFF; --aa-neutral-canvas: #FCFCFB;
  --aa-neutral-50:  #F7F9FB; --aa-neutral-100: #EFF2F6; --aa-neutral-200: #E3E8EE;
  --aa-neutral-300: #CBD4DE; --aa-neutral-400: #9AA7B6; --aa-neutral-500: #5E7086;
  --aa-neutral-600: #4E5A6A; --aa-neutral-700: #3A4452; --aa-neutral-800: #272E3A;
  --aa-neutral-900: #161B24;

  --aa-success-50:  #EFFDF3; --aa-success-100: #D8F8E3; --aa-success-200: #B0EFC6;
  --aa-success-300: #7CE1A4; --aa-success-400: #45CC7F; --aa-success-500: #22B060;
  --aa-success-600: #128243; --aa-success-700: #147540; --aa-success-800: #125D35;
  --aa-success-900: #0F4C2D;

  --aa-warning-50:  #FFF8EB; --aa-warning-100: #FFEDCC; --aa-warning-200: #FFDB99;
  --aa-warning-300: #FFC366; --aa-warning-400: #FBA83D; --aa-warning-500: #F28B1D;
  --aa-warning-600: #D66F12; --aa-warning-700: #AD5511; --aa-warning-800: #854113;
  --aa-warning-900: #6B3512;

  --aa-error-50:  #FEF1F2; --aa-error-100: #FDE1E3; --aa-error-200: #FBC5C9;
  --aa-error-300: #F79BA3; --aa-error-400: #F06A78; --aa-error-500: #E14156;
  --aa-error-600: #C42B44; --aa-error-700: #A02039; --aa-error-800: #7D1B31;
  --aa-error-900: #66182B;

  --aa-info-50:  #EFF9FF; --aa-info-100: #DEF2FF; --aa-info-200: #B8E6FF;
  --aa-info-300: #83D3FF; --aa-info-400: #48B8FB; --aa-info-500: #209CE8;
  --aa-info-600: #147CC4; --aa-info-700: #12639E; --aa-info-800: #145280;
  --aa-info-900: #15446A;

  /* ---------- Semantik (Light) ---------- */
  --aa-bg-canvas: var(--aa-neutral-canvas);
  --aa-bg-surface: var(--aa-neutral-0);
  --aa-bg-surface-subtle: var(--aa-neutral-50);
  --aa-border-default: var(--aa-neutral-200);
  --aa-border-strong: var(--aa-neutral-300);
  --aa-divider: var(--aa-neutral-100);
  --aa-text-primary: var(--aa-neutral-900);
  --aa-text-secondary: var(--aa-neutral-600);
  --aa-text-muted: var(--aa-neutral-500);
  --aa-text-placeholder: var(--aa-neutral-400);
  --aa-text-on-primary: #FFFFFF;

  /* Kalt-Akzent aus der Design-Studie vom 11.08.2026: aufgehellter
     Verwandter des Logo-Blaus. Einsatz NUR als Detailfarbe in dunklen
     Abschnitten (Haekchen, Ziffern, Fokus) - CTAs bleiben Apricot. */
  --aa-akzent-kalt: #5FD9FF;
  --aa-akzent-kalt-flaeche: rgba(95,217,255,.14);
  /* Bewertungssterne: EIN Ton fuer alle Vorkommen. Vorher standen #B07A00
     (3.32:1 auf der Meta-Leiste) und --aa-warning-500 #F28B1D (2.47:1 auf
     Weiss) fuer dieselbe Sache nebeneinander - beide unter WCAG AA. #8A5A00
     liegt bei 5.28:1 bzw. 5.93:1 und bleibt erkennbar Gold. */
  --aa-stern: #8A5A00;
  /* Signalfarbe des Ruf-Knopfs (Kundenentscheidung 17.08.2026). Amber statt
     Apricot: Apricot war dunkel, weil es mit WEISSER Schrift 4,5:1 erreichen
     musste - eine dunkle Farbe kann aber nicht rufen. Amber mit dunkler
     Schrift dreht das um: Die Beschriftung steht bei 11,6:1, die Flaeche
     leuchtet auf hellem wie auf dunklem Grund. */
  --aa-cta: #FFC400;
  --aa-cta-hover: #FFD22E;
  --aa-cta-aktiv: #EBB400;
  --aa-cta-text: #1A1200;
  /* Derselbe Stern auf dunklem Grund. #8A5A00 kommt auf der Zitatkarte einer
     Dunkelsektion (Navy mit 9 % Weiss, also etwa #2B3D49) nur auf 1,90:1 -
     die Sterne waren dort praktisch unsichtbar. #E8B54C liegt bei 5,97:1 auf
     der Karte und 7,85:1 auf reinem Navy und bleibt erkennbar Gold statt
     Gelb. Auf hellem Grund waere er mit 1,88:1 unbrauchbar - deshalb eine
     eigene Angabe und keine Umschaltung ueber das Farbschema. */
  --aa-stern-dunkel: #E8B54C;
  --aa-action-primary: var(--aa-primary-500);
  --aa-action-primary-hover: var(--aa-primary-600);
  --aa-action-primary-active: var(--aa-primary-700);
  --aa-action-primary-subtle: var(--aa-primary-50);
  --aa-focus-ring: var(--aa-primary-600);
  --aa-status-success-bg: var(--aa-success-50);
  --aa-status-success-text: var(--aa-success-700);
  --aa-status-success-solid: var(--aa-success-600);
  --aa-status-warning-bg: var(--aa-warning-50);
  --aa-status-warning-text: var(--aa-warning-800);
  --aa-status-error-bg: var(--aa-error-50);
  --aa-status-error-text: var(--aa-error-700);
  --aa-status-error-solid: var(--aa-error-600);
  --aa-status-info-bg: var(--aa-info-50);
  --aa-status-info-text: var(--aa-info-700);
  /* Dataviz: eigenes optimiertes Set (gesaettigtes Daten-Blau,
     entkoppelt vom ruhigen Marken-Primary) */
  --aa-viz-1: #245BD6;
  --aa-viz-2: var(--aa-coral-500);
  --aa-viz-3: var(--aa-mint-600);
  --aa-viz-4: var(--aa-violet-500);
  --aa-viz-5: var(--aa-apricot-600);
  --aa-viz-6: #0E88A6;

  /* ---------- Typografie ---------- */
  --aa-font-family: 'Figtree', system-ui, -apple-system,
    'Segoe UI', Roboto, sans-serif;
  --aa-font-weight-regular: 400;
  --aa-font-weight-medium: 500;
  --aa-font-weight-semibold: 600;
  --aa-font-weight-bold: 700;

  /* ---------- Spacing (4-px-Raster) ---------- */
  --aa-space-0: 0px;   --aa-space-0-5: 2px; --aa-space-1: 4px;
  --aa-space-2: 8px;   --aa-space-3: 12px;  --aa-space-4: 16px;
  --aa-space-5: 20px;  --aa-space-6: 24px;  --aa-space-8: 32px;
  --aa-space-10: 40px; --aa-space-12: 48px; --aa-space-16: 64px;
  --aa-space-20: 80px; --aa-space-24: 96px; --aa-space-32: 128px;

  /* ---------- Radius ---------- */
  --aa-radius-none: 0px; --aa-radius-xs: 4px;  --aa-radius-sm: 6px;
  --aa-radius-md: 8px;   --aa-radius-lg: 12px; --aa-radius-xl: 16px;
  --aa-radius-2xl: 24px; --aa-radius-full: 9999px;

  /* ---------- Shadows ---------- */
  --aa-shadow-xs: 0 1px 2px rgba(22,27,36,0.05);
  --aa-shadow-sm: 0 1px 2px rgba(22,27,36,0.05), 0 2px 8px rgba(22,27,36,0.05);
  --aa-shadow-md: 0 2px 4px rgba(22,27,36,0.04), 0 6px 16px rgba(22,27,36,0.08);
  --aa-shadow-lg: 0 4px 8px rgba(22,27,36,0.04), 0 12px 32px rgba(22,27,36,0.10);
  --aa-shadow-xl: 0 8px 16px rgba(22,27,36,0.06), 0 24px 56px rgba(22,27,36,0.12);
  --aa-shadow-focus: 0 0 0 4px rgba(92,121,141,0.30);

  /* ---------- Z-Index ---------- */
  --aa-z-base: 0;      --aa-z-dropdown: 1000; --aa-z-sticky: 1100;
  --aa-z-overlay: 1300; --aa-z-modal: 1400;   --aa-z-popover: 1500;
  --aa-z-toast: 1600;   --aa-z-tooltip: 1700;

  /* ---------- Opacity ---------- */
  --aa-opacity-disabled: 0.4;
  --aa-opacity-hover: 0.04;
  --aa-opacity-pressed: 0.08;
  --aa-opacity-backdrop: 0.45;

  /* ---------- Motion ---------- */
  --aa-duration-instant: 80ms;  --aa-duration-fast: 120ms;
  --aa-duration-base: 200ms;    --aa-duration-slow: 300ms;
  --aa-duration-slower: 400ms;  --aa-duration-data: 600ms;
  --aa-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --aa-ease-decelerate: cubic-bezier(0, 0, 0, 1);
  --aa-ease-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --aa-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* ---------- Icons ---------- */
  --aa-icon-xs: 16px; --aa-icon-sm: 20px; --aa-icon-md: 24px;
  --aa-icon-lg: 32px; --aa-icon-xl: 40px; --aa-icon-stroke: 1.5px;
}

/* ============================ Dark Mode ============================ */
[data-theme="dark"] {
  color-scheme: dark;
  --aa-bg-canvas: var(--aa-neutral-900);
  --aa-bg-surface: #1E2531;
  --aa-bg-surface-subtle: var(--aa-neutral-800);
  --aa-border-default: var(--aa-neutral-700);
  --aa-border-strong: var(--aa-neutral-600);
  --aa-divider: var(--aa-neutral-800);
  --aa-text-primary: var(--aa-neutral-50);
  --aa-text-secondary: var(--aa-neutral-300);
  --aa-text-muted: var(--aa-neutral-400);
  --aa-text-placeholder: var(--aa-neutral-500);
  /* Dark: Aktionsfarbe ist ein helles Slate -> Text darauf muss dunkel sein */
  --aa-text-on-primary: var(--aa-neutral-900);
  --aa-action-primary: var(--aa-primary-400);
  --aa-action-primary-hover: var(--aa-primary-300);
  --aa-action-primary-active: var(--aa-primary-200);
  --aa-action-primary-subtle: #21323F;
  --aa-focus-ring: var(--aa-primary-300);
  --aa-status-success-bg: #12291C;
  --aa-status-success-text: var(--aa-success-300);
  --aa-status-success-solid: var(--aa-success-500);
  --aa-status-warning-bg: #2E2210;
  --aa-status-warning-text: var(--aa-warning-300);
  --aa-status-error-bg: #301418;
  --aa-status-error-text: var(--aa-error-300);
  --aa-status-error-solid: var(--aa-error-500);
  --aa-status-info-bg: #122636;
  --aa-status-info-text: var(--aa-info-300);
  --aa-viz-1: #5B86E8;
  --aa-viz-2: var(--aa-coral-500);
  --aa-viz-3: #18A87F;
  --aa-viz-4: var(--aa-violet-400);
  --aa-viz-5: #D97008;
  --aa-viz-6: #1C97B7;
  --aa-shadow-focus: 0 0 0 4px rgba(122,152,173,0.35);
}

/* ================== Reduced Motion ================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --aa-duration-instant: 0ms; --aa-duration-fast: 0ms;
    --aa-duration-base: 50ms;   --aa-duration-slow: 50ms;
    --aa-duration-slower: 50ms; --aa-duration-data: 0ms;
  }
}