/* ==========================================================================
   tokens.css — Single Source of Truth
   Elektro M.Koller GmbH

   Alle Design-Entscheidungen leben hier als Custom Properties.
   Regel fuer das restliche CSS: keine Hex-Werte, keine rohen px-Werte
   ausser 1px-Hairlines und 100%/0-Werte. Wer eine neue Groesse braucht,
   legt hier einen Token an.

   Farbherleitung direkt aus assets/logo/logo.png:
     Wortmarke "elektro"  -> #221E1F
     Subline  "m.koller"  -> #797677
     Sonnenscheibe        -> #F5A522
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     1. FARBE
     --------------------------------------------------------------------- */

  /* Marke — 1:1 aus dem Logo gemessen */
  --c-brand-ink:        #221E1F;  /* Wortmarke */
  --c-brand-accent:     #F5A522;  /* Sonnenscheibe */
  --c-brand-grey:       #797677;  /* Subline m.koller */

  /* Neutralskala, 5-stufig — warm, aus #797677 abgeleitet (leicht rot-getoent) */
  --c-n-100:            #F6F4F1;  /* Sektionsflaeche, ruhig */
  --c-n-200:            #E7E3DF;  /* Hairline, Trennlinie */
  --c-n-300:            #C9C4C0;  /* Rahmen aktiv, Platzhalterflaeche */
  --c-n-400:            #797677;  /* Sekundaertext gross, Icon-Stroke */
  --c-n-500:            #5C5658;  /* Fliesstext gedaempft — 7.17:1 auf Weiss */

  /* Flaechen */
  --c-surface:          #FFFFFF;
  --c-surface-alt:      var(--c-n-100);
  --c-surface-invert:   var(--c-brand-ink);
  --c-surface-accent:   var(--c-brand-accent);

  /* Text */
  --c-text:             var(--c-brand-ink);          /* 16.5:1 auf Weiss */
  --c-text-muted:       var(--c-n-500);              /*  7.2:1 auf Weiss */
  --c-text-invert:      #FFFFFF;                     /* 16.5:1 auf Ink   */
  --c-text-invert-mute: #C9C4C0;                     /*  9.5:1 auf Ink   */

  /* Akzent
     Wichtig: #F5A522 traegt auf Weiss nur 2.04:1 und ist damit als Text
     unbrauchbar. Als FLAECHE mit Ink-Beschriftung dagegen 8.08:1 — genau
     die Kombination, die das Logo selbst benutzt (Blitz auf Sonne).
     Fuer orangen TEXT auf hellem Grund gibt es --c-accent-ink. */
  --c-accent:           var(--c-brand-accent);
  --c-accent-hover:     #E39412;
  --c-accent-ink:       #9A5A00;  /* 5.47:1 auf Weiss — Links, Eyebrows */
  --c-accent-ink-hover: #7C4800;
  --c-accent-wash:      #FDF3E1;  /* 8%-Ton fuer ruhige Hinterlegungen */
  --c-on-accent:        var(--c-brand-ink);

  /* Transparente Ableitungen der Markenfarben — fuer Zustaende auf
     farbigem Grund, damit dort keine rohen rgba-Werte im CSS stehen. */
  --c-ink-a06:       rgba(34, 30, 31, 0.06);   /* Hover auf oranger Flaeche */
  --c-ink-a16:       rgba(34, 30, 31, 0.16);   /* Bogen im CTA-Band        */
  --c-ink-a35:       rgba(34, 30, 31, 0.35);   /* Rahmen auf Orange        */
  --c-ink-a78:       rgba(34, 30, 31, 0.78);   /* Fliesstext auf Orange    */
  --c-ink-deep:      #141213;                  /* aktivster Zustand        */
  --c-light-a06:     rgba(255, 255, 255, 0.06);/* Hover auf Ink            */
  --c-print-ink:     #000000;                  /* nur fuer @media print    */

  /* Linien */
  --c-line:             var(--c-n-200);
  --c-line-strong:      var(--c-n-300);
  --c-line-invert:      #3A3536;

  /* Semantik */
  --c-success:          #0F7B4F;  /* 5.29:1 auf Weiss */
  --c-success-wash:     #E9F5EF;
  --c-danger:           #B3261E;  /* 6.54:1 auf Weiss */
  --c-danger-wash:      #FCECEB;

  /* Fokus — bewusst Ink-Ring + Accent-Halo, damit er auf jedem
     Untergrund sichtbar bleibt (auch auf oranger Flaeche) */
  --c-focus:            var(--c-brand-ink);
  --c-focus-halo:       rgba(245, 165, 34, 0.55);

  /* ---------------------------------------------------------------------
     2. TYPOGRAFIE
     Headline: Archivo   — sachliche Grotesk, Signaletik-Anmutung
     Body:     Figtree   — humanistisch, leicht gerundet, hohe x-Hoehe
     Modulare Skala 1.25 (grosse Terz), Basis 17px, fluid via clamp()
     --------------------------------------------------------------------- */
  --font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fs-label:  0.75rem;                                   /* 12px, fix     */
  --fs-2xs:    0.8125rem;                                 /* 13px, fix     */
  --fs-xs:     0.875rem;                                  /* 14px, fix     */
  --fs-sm:     clamp(0.9375rem, 0.92rem + 0.09vw, 1rem);  /* 15 -> 16      */
  --fs-base:   clamp(1rem,      0.98rem + 0.11vw, 1.0625rem); /* 16 -> 17  */
  --fs-md:     clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem); /* 17 -> 19  */
  --fs-lg:     clamp(1.125rem,  1.05rem + 0.38vw, 1.3125rem); /* 18 -> 21  */
  --fs-xl:     clamp(1.3125rem, 1.16rem + 0.71vw, 1.625rem);  /* 21 -> 26  */
  --fs-2xl:    clamp(1.5rem,    1.24rem + 1.20vw, 2.0625rem); /* 24 -> 33  */
  --fs-3xl:    clamp(1.8125rem, 1.42rem + 1.79vw, 2.5625rem); /* 29 -> 41  */
  --fs-4xl:    clamp(2.125rem,  1.53rem + 2.72vw, 3.25rem);   /* 34 -> 52  */
  --fs-5xl:    clamp(2.4375rem, 1.60rem + 3.84vw, 4.0625rem); /* 39 -> 65  */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  --lh-tight:   1.06;   /* Hero */
  --lh-heading: 1.14;
  --lh-snug:    1.35;   /* Lead */
  --lh-body:    1.65;
  --lh-loose:   1.75;   /* Fliesstext Rechtsseiten */

  --ls-display: -0.02em;  /* Archivo laeuft in Grossgraden zu weit */
  --ls-heading: -0.012em;
  --ls-body:     0em;
  --ls-label:    0.14em;  /* Versalien-Eyebrows */

  --measure:        68ch;  /* max. Zeilenlaenge Fliesstext */
  --measure-narrow: 46ch;  /* max. Zeilenlaenge Lead/Hero  */

  /* ---------------------------------------------------------------------
     3. RAUM — 8px-Basis, durchgehend
     --------------------------------------------------------------------- */
  --sp-1:  0.25rem;   /*   4 */
  --sp-2:  0.5rem;    /*   8 */
  --sp-3:  0.75rem;   /*  12 */
  --sp-4:  1rem;      /*  16 */
  --sp-5:  1.5rem;    /*  24 */
  --sp-6:  2rem;      /*  32 */
  --sp-7:  3rem;      /*  48 */
  --sp-8:  4rem;      /*  64 */
  --sp-9:  6rem;      /*  96 */
  --sp-10: 8rem;      /* 128 */
  --sp-11: 10rem;     /* 160 */

  /* Fluid: Abstand zwischen Sektionen und innerhalb grosser Bloecke */
  --sp-section:   clamp(var(--sp-8), 7vw, var(--sp-11));
  --sp-block:     clamp(var(--sp-6), 4vw, var(--sp-8));
  --gap-grid:     clamp(var(--sp-5), 2.4vw, var(--sp-7));

  /* ---------------------------------------------------------------------
     4. RASTER
     --------------------------------------------------------------------- */
  --container:        77.5rem;  /* 1240px */
  --container-wide:   90rem;    /* 1440px — nur fuer randlose Baender */
  --container-narrow: 47.5rem;  /*  760px — Lauftext, Formular         */
  --gutter:           clamp(var(--sp-5), 4vw, var(--sp-7));
  --header-h:         5rem;     /*  80px — ab 64rem auf 6.5rem erhoeht,
                                   siehe unten. Ein einziges Token, damit
                                   scroll-padding und Sticky-Offsets
                                   automatisch mitwandern. */

  /* ---------------------------------------------------------------------
     5. FORM — Radien folgen den runden Strichenden des Logos
     --------------------------------------------------------------------- */
  --r-pill:  999px;      /* Buttons, Tags — = runde Kappen der Wortmarke */
  --r-card:  0.625rem;   /* 10px */
  --r-input: 0.375rem;   /*  6px */
  --r-sm:    0.25rem;    /*  4px */

  --bw-hair: 1px;
  --bw-line: 2px;        /* Signature-Leitung, aktive Rahmen */

  /* Schatten: warm getoent (Ink statt Schwarz), sehr zurueckhaltend.
     Karten arbeiten grundsaetzlich mit Hairline, nicht mit Schatten. */
  --sh-header: 0 1px 0 0 rgba(34, 30, 31, 0.07), 0 10px 28px -22px rgba(34, 30, 31, 0.45);
  --sh-lift:   0 1px 2px -1px rgba(34, 30, 31, 0.05), 0 18px 34px -24px rgba(34, 30, 31, 0.40);
  --sh-pop:    0 2px 4px -2px rgba(34, 30, 31, 0.08), 0 26px 50px -28px rgba(34, 30, 31, 0.45);

  /* ---------------------------------------------------------------------
     6. BEWEGUNG
     --------------------------------------------------------------------- */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-micro:   180ms;   /* Hover, Fokus, Farbe */
  --t-move:    320ms;   /* Scroll-Reveal, Panel */
  --t-draw:    700ms;   /* Leitungsfuehrung zeichnen */
  --reveal-y:  1.25rem; /* Distanz Scroll-Reveal — bewusst klein */

  /* ---------------------------------------------------------------------
     7. SIGNATURE — "Leitungsfuehrung"
     Monolinie mit runden Enden, 90-Grad-Ecken mit festem Radius,
     Knoten = Abzweigdose. Abgeleitet aus der gleichmaessigen Strichstaerke
     und den runden Kappen des Logos.
     --------------------------------------------------------------------- */
  --wire-w:      var(--bw-line);
  --wire-color:  var(--c-accent);
  --wire-idle:   var(--c-line);
  --wire-radius: 0.75rem;   /* 12px Eckenradius der Leitung */
  --wire-node:   0.625rem;  /* 10px Durchmesser Abzweigdose */

  /* ---------------------------------------------------------------------
     8. EBENEN
     --------------------------------------------------------------------- */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  50;
  --z-header:  100;
  --z-overlay: 200;
}

/* Ab Desktop hat der Header mehr Luft, weil die Wortmarke groesser steht. */
@media (min-width: 64rem) {
  :root { --header-h: 6.5rem; }  /* 104px */
}

/* Bildplatzhalter-Seitenverhaeltnisse — zentral, damit kein Layout-Shift
   entsteht und die Verhaeltnisse ueber alle Seiten konsistent bleiben. */
:root {
  --ar-hero:    4 / 3;
  --ar-wide:    16 / 9;
  --ar-card:    3 / 2;
  --ar-portrait: 4 / 5;
  --ar-square:  1 / 1;
}