/* =========================================================================
   Design Tokens — Material Design 3
   Verbindliche Quelle aller Farben, Spacings, Radien, Schriftgrössen, Motion.
   Keine Hardcodes ausserhalb dieser Datei. Theme-Overrides via html[data-*].
   ========================================================================= */

:root {
  /* ----- Surface Ladder (Light) ----- */
  --surf:                #FFFFFF;
  --surf-container-low:  #F3F6F6;
  --surf-container:      #F0F3F3;
  --surf-container-high: #E6EBEB;

  /* ----- Chip Surfaces (separate vom Container-Stack) ----- */
  --chip-idle:           #EAEDED;
  --chip-hover:          #E0E5E5;

  /* ----- Semantische Container ----- */
  --primary-container:    #CCE8E8;
  --on-primary-container: #00201F;
  --secondary-container:  #DAE5E4;
  --on-secondary-container: #0E1F1E;

  /* ----- Error (MD3) ----- */
  --error:                #B3261E;
  --on-error:             #FFFFFF;
  --error-container:      #F9DEDC;
  --on-error-container:   #410E0B;
  --error-rgb:            179, 38, 30;

  /* ----- RGB-Tuples fuer rgba()-Alpha-Blending -----
     Universalen Browser-Support statt color-mix(). Bei Theme-Wechsel
     werden diese mit ueberschrieben, damit rgba()-basierte Tints sich
     korrekt mitziehen. */
  --primary-rgb:             43, 106, 106;
  --primary-container-rgb:   204, 232, 232;
  --secondary-container-rgb: 218, 229, 228;
  --on-primary-container-rgb: 0, 32, 31;
  --surf-rgb:                255, 255, 255;

  /* ----- Primary / Accent ----- */
  --primary:    #2B6A6A;   /* Teal — Default-Brand */
  --on-primary: #FFFFFF;
  --primary-hover: #1F5454;

  /* ----- Text on Surface ----- */
  --on-surf:         #161D1D;
  --on-surf-variant: #3F4949;
  --on-surf-muted:   #646E6E;

  /* ----- Borders / Outlines ----- */
  --outline:         #6F7979;
  --outline-variant: #BFC8C8;
  --divider:         #DDE4E4;

  /* ----- State-Layer Opacities (MD3) ----- */
  --state-hover:    0.08;
  --state-focus:    0.12;
  --state-pressed:  0.12;

  /* ----- Elevation Shadows ----- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.06), 0 4px 8px rgba(0, 0, 0, 0.08);
  --shadow-3: 0 4px 8px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.10);

  /* ----- Typography Stack ----- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;

  /* ----- Font Sizes (MD3 Token-Set) ----- */
  --display-lg: 3.25rem;   /* 52px — Hero Display */
  --display-md: 2.5rem;    /* 40px */
  --headline-lg: 2rem;     /* 32px — Section-Titel */
  --headline-md: 1.5rem;   /* 24px */
  --title-lg:   1.25rem;   /* 20px — Karten-Titel */
  --title-md:   1rem;      /* 16px — Sekundär-Titel */
  --body-lg:    0.95rem;   /* 15px — Body */
  --body-md:    0.9rem;    /* 14px — Default */
  --body-sm:    0.85rem;   /* 13.5px */
  --label-lg:   0.9rem;    /* 14px — Buttons */
  --label-md:   0.85rem;   /* 13.5px — Chips */
  --label-sm:   0.75rem;   /* 12px — Metadaten */

  /* ----- Line Heights ----- */
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.55;
  --leading-relaxed: 1.75;

  /* ----- Font Weights ----- */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ----- Spacing-Treppe (4px-Basis) ----- */
  --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 */

  /* ----- Radii ----- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ----- Touch / Hit Targets ----- */
  --touch-min:   48px;
  --touch-small: 40px;

  /* ----- Motion ----- */
  --md-easing-standard:   cubic-bezier(0.2, 0, 0, 1);
  --md-easing-decelerate: cubic-bezier(0, 0, 0, 1);
  --md-easing-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --motion-short:  150ms;
  --motion-medium: 250ms;
  --motion-long:   400ms;

  /* ----- Layout ----- */
  --container-max: 1080px;
  --container-pad: var(--space-5);

  /* ----- Z-Stack ----- */
  --z-header: 50;
  --z-toast:  90;
  --z-modal:  100;

  color-scheme: light;
}

/* =========================================================================
   Dark Mode
   ========================================================================= */
html[data-theme="dark"] {
  --surf:                #1A1F1F;
  --surf-container-low:  #232828;
  --surf-container:      #2A3030;
  --surf-container-high: #353B3B;

  --chip-idle:           #2E3434;
  --chip-hover:          #3A4040;

  --primary-container:    #1F4848;
  --on-primary-container: #BFEFEF;
  --secondary-container:  #2B3F3E;
  --on-secondary-container: #D6E4E2;

  --error:                #F2B8B5;
  --on-error:             #601410;
  --error-container:      #8C1D18;
  --on-error-container:   #F9DEDC;
  --error-rgb:            242, 184, 181;

  --primary-rgb:             126, 218, 218;
  --primary-container-rgb:   31, 72, 72;
  --secondary-container-rgb: 43, 63, 62;
  --on-primary-container-rgb: 191, 239, 239;
  --surf-rgb:                26, 31, 31;

  --primary:    #7EDADA;
  --on-primary: #003332;
  --primary-hover: #A6E8E8;

  --on-surf:         #E2E6E6;
  --on-surf-variant: #B7C0C0;
  --on-surf-muted:   #8A9292;

  --outline:         #8A9494;
  --outline-variant: #424B4B;
  --divider:         #2F3636;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40), 0 1px 3px rgba(0, 0, 0, 0.32);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.44), 0 4px 12px rgba(0, 0, 0, 0.36);
  --shadow-3: 0 6px 12px rgba(0, 0, 0, 0.50), 0 12px 28px rgba(0, 0, 0, 0.42);

  color-scheme: dark;
}