/* ==========================================================================
   Meet Ava — Design Tokens / CSS Custom Properties
   ========================================================================== */

:root {
  /* ── Primärfarben ───────────────────────────────────────────────────────── */
  --color-primary:       #0D7377;   /* Deep Teal */
  --color-accent:        #FF6B5A;   /* Warm Coral */
  --color-dark:          #1A1A2E;   /* Dark Navy */
  --color-light:         #F5F0EB;   /* Warm White */

  /* ── Funktionsfarben ────────────────────────────────────────────────────── */
  --color-success:       #34D399;   /* Soft Mint */
  --color-warning:       #F59E0B;   /* Amber */
  --color-error:         #E5533D;   /* Coral Dark */
  --color-info:          #5BB5B8;   /* Light Teal */

  /* ── Teal-Skala ─────────────────────────────────────────────────────────── */
  --teal-50:             #E6F5F5;
  --teal-100:            #B3E0E1;
  --teal-200:            #80CCCE;
  --teal-500:            #0D7377;
  --teal-700:            #095456;
  --teal-900:            #043535;

  /* ── Coral-Skala ────────────────────────────────────────────────────────── */
  --coral-light:         #FF9A8D;
  --coral-500:           #FF6B5A;
  --coral-dark:          #E5533D;

  /* ── Amber-Skala ────────────────────────────────────────────────────────── */
  --amber-light:         #FCD34D;
  --amber-500:           #F59E0B;

  /* ── Text-Farben ────────────────────────────────────────────────────────── */
  --text-primary:        #1A1A2E;
  --text-secondary:      #4A4A5A;
  --text-muted:          #8888A0;
  --text-on-dark:        #F5F0EB;
  --text-on-primary:     #FFFFFF;

  /* ── Hintergründe ───────────────────────────────────────────────────────── */
  --bg-page:             #F5F0EB;
  --bg-card:             rgba(255, 255, 255, 0.7);
  --bg-dark:             #1A1A2E;
  --bg-teal:             #0D7377;
  --bg-navy-gradient:    linear-gradient(135deg, #1A1A2E 0%, #0D7377 100%);
  --bg-teal-gradient:    linear-gradient(135deg, #0D7377 0%, #5BB5B8 100%);
  --bg-warm-gradient:    linear-gradient(180deg, #F5F0EB 0%, #E6F5F5 100%);

  /* ── Typografie ─────────────────────────────────────────────────────────── */
  --font-display:        "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-headline:       "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-body:           "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:           "JetBrains Mono", "Fira Code", ui-monospace, monospace;

  /* Font-Sizes */
  --text-xs:             0.75rem;    /* 12px */
  --text-sm:             0.875rem;   /* 14px */
  --text-base:           1rem;       /* 16px */
  --text-lg:             1.125rem;   /* 18px */
  --text-xl:             1.25rem;    /* 20px */
  --text-2xl:            1.5rem;     /* 24px */
  --text-3xl:            1.75rem;    /* 28px */
  --text-4xl:            2rem;       /* 32px */
  --text-5xl:            2.5rem;     /* 40px */
  --text-6xl:            3rem;       /* 48px */
  --text-7xl:            4.5rem;     /* 72px */

  /* ── Spacing (8px-basiert) ──────────────────────────────────────────────── */
  --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:             3rem;       /* 48px */
  --space-8:             4rem;       /* 64px */
  --space-9:             6rem;       /* 96px */
  --space-10:            8rem;       /* 128px */

  /* ── Border-Radius ──────────────────────────────────────────────────────── */
  --radius-sm:           6px;
  --radius-md:           12px;
  --radius-lg:           20px;
  --radius-xl:           32px;
  --radius-full:         50%;

  /* ── Schatten ───────────────────────────────────────────────────────────── */
  --shadow-sm:           0 1px 3px rgba(26, 26, 46, 0.08);
  --shadow-md:           0 4px 12px rgba(26, 26, 46, 0.12);
  --shadow-lg:           0 8px 32px rgba(26, 26, 46, 0.16);
  --shadow-glow:         0 0 24px rgba(13, 115, 119, 0.2);

  /* ── Glasmorphism ───────────────────────────────────────────────────────── */
  --glass-bg:            rgba(255, 255, 255, 0.7);
  --glass-border:        1px solid rgba(255, 255, 255, 0.3);
  --glass-blur:          blur(12px);

  /* ── Transitions ────────────────────────────────────────────────────────── */
  --transition-fast:     150ms ease;
  --transition-base:     300ms ease;
  --transition-slow:     500ms ease;
  --transition-slower:   800ms ease;

  /* ── Layout ─────────────────────────────────────────────────────────────── */
  --max-width:           1200px;
  --max-width-narrow:    800px;
  --section-padding:     var(--space-8) var(--space-5);

  /* ── Z-Index ────────────────────────────────────────────────────────────── */
  --z-background:        -1;
  --z-default:           1;
  --z-sticky:            100;
  --z-overlay:           200;
  --z-modal:             300;
}