/* ==========================================================================
   Design-Tokens – FDP.Die Liberalen Steffisburg
   Alle Farben, Schriften, Abstände und Bewegungswerte der Website.
   Komponenten verwenden ausschliesslich diese Variablen.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     Farben
     TODO: Farbwerte gegen assets/img/logo-fdp.svg abgleichen, sobald die Datei
     vorliegt. Die Werte unten sind aus dem Logo im Wahlprospekt 2026 gemessen
     (_originale/FDP_PDF_24-09-26/Wahlprospekt_2026.pdf, Seite 1).
     Kontrastwerte: siehe styleguide.html (live berechnet).
     ------------------------------------------------------------------------ */

  /* Primär: FDP-Blau (Logo-Wortmarke) */
  --color-blue:            #385191;
  --color-blue-dark:       #273B6E;  /* Hover/Active, dunkle Flächen */
  --color-blue-light:      #E8ECF5;  /* zarte Tönung für Hintergründe */

  /* Sekundär: FDP-Cyan (Linie unter dem Logo) – sparsam einsetzen */
  --color-cyan:            #009ED5;  /* nur Deko und Flächen, nicht für Text auf Hell */
  --color-cyan-text:       #0077A2;  /* abgedunkelt, textfähig auf Papier und Weiss */

  /* Kampagne Wahlen 2026 (Magenta aus dem Prospekt) – nur im Wahlkontext */
  --color-campaign:        #E32682;  /* Flächen; Weiss darauf nur für grossen Text */
  --color-campaign-text:   #CC1F73;  /* textfähig, auch Weiss darauf */

  /* Neutrale */
  --color-paper:           #F7F6F2;  /* Seitenhintergrund, warmes Off-White */
  --color-white:           #FFFFFF;
  --color-ink:             #15171C;  /* Fliesstext, fast Schwarz */

  /* Graustufen, warm auf das Papier abgestimmt.
     Für Text auf Papier mindestens --color-gray-600 verwenden. */
  --color-gray-100:        #EEEDE8;
  --color-gray-200:        #E2E0DA;
  --color-gray-300:        #CFCCC5;
  --color-gray-400:        #ADAAA3;
  --color-gray-500:        #8A8780;
  --color-gray-600:        #6B6862;
  --color-gray-700:        #4F4D48;
  --color-gray-800:        #33322F;
  --color-gray-900:        #1E1D1B;

  /* Rollen */
  --color-bg:              var(--color-paper);
  --color-surface:         var(--color-white);
  --color-text:            var(--color-ink);
  --color-text-muted:      var(--color-gray-600);
  --color-border:          var(--color-gray-300);
  --color-link:            var(--color-blue);
  --color-link-hover:      var(--color-blue-dark);
  --color-focus:           var(--color-blue);
  --color-focus-on-dark:   var(--color-white);
  --color-selection:       var(--color-blue);

  /* ------------------------------------------------------------------------
     Typografie
     TODO: Schriften als WOFF2 nach assets/fonts/ holen und selbst hosten
     (Datenschutz, Performance); bis dahin über Google Fonts eingebunden.
     ------------------------------------------------------------------------ */

  --font-display: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-text:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* Fluide Skala: Mindestwert bei 375px, Höchstwert ab ca. 1920px */
  --text-xs:      clamp(0.75rem,  0.72rem + 0.12vw, 0.8125rem);  /* 12 → 13 */
  --text-sm:      clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);  /* 14 → 15 */
  --text-base:    clamp(1rem,     0.95rem + 0.25vw, 1.125rem);   /* 16 → 18 */
  --text-lg:      clamp(1.125rem, 1.04rem + 0.4vw,  1.375rem);   /* 18 → 22 */
  --text-xl:      clamp(1.375rem, 1.2rem + 0.8vw,   1.875rem);   /* 22 → 30 */
  --text-2xl:     clamp(1.75rem,  1.4rem + 1.5vw,   2.75rem);    /* 28 → 44 */
  --text-3xl:     clamp(2.25rem,  1.6rem + 2.8vw,   4.25rem);    /* 36 → 68 */
  --text-4xl:     clamp(2.75rem,  1.7rem + 4.6vw,   6.5rem);     /* 44 → 104 */
  --text-display: clamp(3rem,     1.5rem + 7vw,     10rem);      /* 48 → 160 */
  --text-hero:    clamp(3rem,     0.5rem + 14.5vw,  20rem);      /* 62 @375 · 194 @1280 · 286 @1920 (~15–16vw) */

  --leading-none:    0.88;   /* Hero, Display */
  --leading-tight:   1.05;   /* Überschriften */
  --leading-snug:    1.3;    /* Lead-Texte */
  --leading-normal:  1.6;    /* Fliesstext */

  --tracking-display: -0.04em;
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-label:   0.08em;

  --measure: 65ch;           /* maximale Zeilenlänge für Fliesstext */

  /* Icons (Sprite assets/img/icons/sprite.svg, Klasse .icon) */
  --icon-sm: 1rem;           /* 16px – neben Text: Termine, Kontakt, Chips */
  --icon-md: 1.5rem;         /* 24px – Standard */
  --icon-lg: 2.5rem;         /* 40px – Schwerpunkte, Kacheln, Wahlanleitung */
  --icon-stroke: 1.6;        /* wie die Pfeile */

  /* ------------------------------------------------------------------------
     Abstände – 4px-Raster (Zahl = Anzahl 4px-Einheiten)
     ------------------------------------------------------------------------ */

  --space-1:  0.25rem;  /*   4 */
  --space-2:  0.5rem;   /*   8 */
  --space-3:  0.75rem;  /*  12 */
  --space-4:  1rem;     /*  16 */
  --space-5:  1.25rem;  /*  20 */
  --space-6:  1.5rem;   /*  24 */
  --space-8:  2rem;     /*  32 */
  --space-10: 2.5rem;   /*  40 */
  --space-12: 3rem;     /*  48 */
  --space-16: 4rem;     /*  64 */
  --space-20: 5rem;     /*  80 */
  --space-24: 6rem;     /*  96 */
  --space-32: 8rem;     /* 128 */
  --space-40: 10rem;    /* 160 */

  /* Fluide Rhythmus-Abstände */
  --gutter:        clamp(1rem, 0.4rem + 2.6vw, 3rem);     /* 16 → 48 Seitenrand */
  --space-section: clamp(4rem, 2rem + 8vw, 10rem);         /* 64 → 160 zwischen Sektionen */
  --space-block:   clamp(2rem, 1.25rem + 3vw, 4rem);       /* 32 → 64 innerhalb Sektionen */

  --container-max:    1440px;
  --container-narrow: 48rem;

  /* ------------------------------------------------------------------------
     Radien & Linien
     ------------------------------------------------------------------------ */

  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  --border-hairline: 1px solid var(--color-border);
  --border-strong:   1px solid var(--color-ink);

  /* ------------------------------------------------------------------------
     Schatten – sehr dezent
     ------------------------------------------------------------------------ */

  --shadow-sm: 0 1px 2px rgb(21 23 28 / 0.04), 0 1px 1px rgb(21 23 28 / 0.03);
  --shadow-md: 0 4px 12px -2px rgb(21 23 28 / 0.06), 0 2px 4px rgb(21 23 28 / 0.03);
  --shadow-lg: 0 24px 48px -16px rgb(21 23 28 / 0.10), 0 4px 8px rgb(21 23 28 / 0.03);

  /* ------------------------------------------------------------------------
     Bewegung
     ------------------------------------------------------------------------ */

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);   /* federt leicht über; CSS-Pendant zu back.out(1.7) */

  /* Dieselben Kurven als GSAP-Namen (motion.js liest sie hier aus).
     Elastic nur sparsam einsetzen, z.B. für einen einzelnen Wow-Moment. */
  --gsap-ease-out:     expo.out;
  --gsap-ease-in-out:  power3.inOut;
  --gsap-ease-spring:  back.out(1.7);
  --gsap-ease-elastic: elastic.out(1, 0.6);

  --dur-fast:   200ms;
  --dur-base:   400ms;
  --dur-slow:   800ms;
  --dur-slower: 1200ms;

  /* ------------------------------------------------------------------------
     Ebenen & Fokus
     ------------------------------------------------------------------------ */

  --z-header:  100;
  --z-overlay: 200;
  --z-skip:    1000;
  --z-curtain: 2000;

  /* Höhe des Headers; main.js misst und überschreibt sie */
  --header-h: 4.5rem;

  --focus-ring-width:  3px;
  --focus-ring-offset: 3px;
}

/* Reduzierte Bewegung: alle Dauern auf 0, Animationen bleiben statisch */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:   0ms;
    --dur-base:   0ms;
    --dur-slow:   0ms;
    --dur-slower: 0ms;
  }
}