/* ==========================================================================
   AuPro — tokens.css
   Design-Tokens als CSS-Variablen. Einzige Quelle für Farben, Typo-Scale,
   Spacing, Radien, Schatten, Layout-Maße, Transitions.
   Werte verifiziert gegen CD-Manual (S. 21/22) und Briefing §5.
   ========================================================================== */

:root {
  /* ----- Farben: Primär (CD S.21) ----- */
  --green-dark:  #136854; /* Primärfarbe: Buttons, Links, Logo, Akzente auf Hell */
  --green-mid:   #4A9486; /* Hover-/Aktiv-Füllung Hexagons, Subheads/Zitat auf Dunkel */
  --green-light: #E9F2F0; /* zarte Wabe-Watermarks, Tints, Hover-Flächen auf Hell */
  --green-blue:  #1E8076; /* Sekundär-Akzent, Button-Hover, Fokus-Ring */

  /* ----- Farben: Sekundär (CD S.22) ----- */
  --gray-dark: #333333; /* Fließtext, dunkle Sektionen */
  --gray-mid:  #888888; /* Sekundärtext, Rahmen */
  --offwhite:  #F4F6F4; /* helle Sektions-Hintergründe */
  --black:     #1E1E1E; /* tiefste dunkle Flächen (Footer, Trust-Band) */
  --white:     #FFFFFF;

  /* Hero: minimal grünstichiger Anthrazit (Referenz Screendesign) */
  --hero-bg:   #36403E;

  /* ----- Semantische Aliase ----- */
  --color-text:        var(--gray-dark);
  --color-text-muted:  var(--gray-mid);
  --color-bg:          var(--white);
  --color-bg-alt:      var(--offwhite);
  --color-accent:      var(--green-dark);
  --color-accent-soft: var(--green-mid);
  --color-focus:       var(--green-blue);
  --color-border:      #E2E6E4;

  /* helleres Akzentgrün für Text auf dunklem Grund (AA-Kontrast, §12) */
  --green-on-dark: #6FB9AB;

  /* ----- Typografie ----- */
  --ff-display: "Montserrat", system-ui, "Segoe UI", sans-serif; /* Headlines */
  --ff-body:    "Roboto", system-ui, "Segoe UI", sans-serif;     /* Fließtext */
  --ff-accent:  "Orbitron", "Montserrat", sans-serif;            /* Claim/Tech-Akzent */

  /* Type-Scale (Briefing §5.2) */
  --fs-display: clamp(2.25rem, 6vw, 5.5rem);
  --fs-h1:      clamp(2.25rem, 5vw, 4.5rem);
  --fs-h2:      clamp(1.9rem, 4vw, 3.25rem);
  --fs-h3:      clamp(1.3rem, 2.2vw, 2rem);
  --fs-eyebrow: clamp(0.9rem, 1.1vw, 1.05rem);
  --fs-lead:    clamp(1.05rem, 1.5vw, 1.375rem);
  --fs-body:    0.9375rem; /* ~15px — kompakter Fließtext, mehr Kontrast zu Headlines (C3) */
  --fs-small:   0.8125rem;

  --lh-display: 1.07;
  --lh-heading: 1.15;
  --lh-body:    1.6;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  /* gesperrte Akzent-Typo (Orbitron / Eyebrows) */
  --ls-accent:  0.12em;
  --ls-eyebrow: 0.18em;

  /* ----- Spacing-Skala (Briefing §5.3) ----- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* vertikaler Sektions-Rhythmus */
  --section-pad: clamp(4rem, 10vw, 9rem);

  /* ----- Layout ----- */
  --container-max:  1280px;
  --container-pad:  clamp(1.25rem, 5vw, 4rem);
  --header-h:       84px;
  --header-h-shrink: 80px;

  /* ----- Radien ----- */
  --radius-btn:  10px;
  --radius-input: 8px;
  --radius-card: 14px;
  --radius-pill: 999px;
  /* Eckenrundung der Hexagons (weicher Marken-Look) */
  --hex-corner:  14;   /* in SVG-User-Units, siehe components.css */

  /* ----- Schatten (dezent, kühl) ----- */
  --shadow-sm: 0 4px 14px rgba(19, 104, 84, .06);
  --shadow-md: 0 10px 30px rgba(19, 104, 84, .08);
  --shadow-lg: 0 18px 50px rgba(19, 104, 84, .14);
  --shadow-dark: 0 18px 50px rgba(0, 0, 0, .35);

  /* ----- Motion ----- */
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --dur-fast:  .18s;
  --dur-mid:   .32s;
  --dur-slow:  .6s;

  /* ----- Z-Index-Skala ----- */
  --z-watermark: 0;
  --z-content:   1;
  --z-header:    100;
  --z-drawer:    200;
  --z-skip:      300;
}