/* ==========================================================================
   TOKENS — Single Source of Truth
   Werte exakt nach „Pixel_Perfect_Webdesign_Masteranalyse", Abschnitt 02 / 09.1
   Keine Hexwerte direkt in Komponenten. Keine willkürlichen Abstände.
   ========================================================================== */

:root {
  /* --- Farbe ------------------------------------------------------------ */
  --color-canvas: #e9eae7;   /* Browser-/Seitenhintergrund, nur außerhalb der Shell */
  --color-paper:  #fcfcfa;   /* Hauptfläche, Default für Sections               */
  --color-ink:    #111315;   /* Primärtext, nie reines #000                     */
  /* Gemessen, nicht geschätzt: #6a7073 kam auf Cloud und Lime nur auf 4,43 : 1
     und lag damit unter WCAG AA. Fünf Stufen dunkler reichen — der Ton bleibt
     derselbe, der Kontrast stimmt auf allen hellen Flächen. */
  --color-muted:  #656b6e;   /* Sekundärtext                                    */
  --color-petrol: #173f49;   /* Dunkle UI, Footer                               */
  --color-aqua:   #93c3ca;   /* Image-Overlay, Flächen                          */
  --color-ice:    #dff3f4;   /* Info- und Formflächen                           */
  --color-lime:   #eafb58;   /* CTA / Highlight — max. ein dominantes pro View   */
  --color-coral:  #ff5a36;   /* CTA 2 / Status, nie großflächig                 */
  /* Dasselbe Signal, aber als Schriftfarbe lesbar. #ff5a36 erreicht auf Weiß
     nur 3,02 : 1 — genug für große Headlines, zu wenig für Fließtext und
     kleine Beschriftungen. Überall dort steht dieser Ton. */
  --color-coral-ink: #be4429;
  --color-cloud:  #f0f1ee;   /* Cards / Inputs                                  */
  --color-line:   #d7dad6;   /* Border / Divider, 1 px                          */

  /* --- Typografie ------------------------------------------------------- */
  --font-sans: "Manrope", "Inter", system-ui, -apple-system, sans-serif;
  --font-ar: "Noto Kufi Arabic", "Manrope", system-ui, sans-serif;

  /* --- Spacing ---------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --space-10: 64px;
  --space-12: 80px;
  --space-16: 112px;

  /* --- Radien ----------------------------------------------------------- */
  --radius-control: 14px;
  --radius-card: 24px;
  --radius-hero: 32px;
  --radius-shell: 32px;
  --radius-pill: 999px;

  /* --- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur-hover: 180ms;
  --dur-arrow: 220ms;
  --dur-card: 320ms;
  --dur-image: 650ms;
  --dur-reveal: 720ms;
  --dur-mask: 850ms;
  --dur-slider: 720ms;
  --dur-nav: 280ms;

  /* --- Schatten --------------------------------------------------------- */
  --shadow-soft:  0 10px 34px rgba(15, 38, 44, .08);
  --shadow-float: 0 18px 48px rgba(15, 38, 44, .13);
  --shadow-shell: 0 30px 90px rgba(17, 19, 21, .08);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .72);
  --shadow-nav:   0 12px 36px rgba(15, 38, 44, .09);

  /* --- Layout ----------------------------------------------------------- */
  --shell-max: 1360px;
  --container-max: 1240px;
  --nav-height: 72px;
  --nav-height-compact: 64px;
}