/*
 * Leopold Alarm- und Sicherheitstechnik: Design-Tokens
 * Stand 13.11.2026, Prototyp Phase 1
 *
 * CI gemessen, nicht geraten:
 *   Logo-Datei Leopold-Sicherheitstechnik.png (Pixelzaehlung): Rot #CD1626, Navy #003770
 *   Live-Seite getComputedStyle: H1/H2 #003770, Button #003770, dunkle Flaechen #3B414F
 * Schrift: Signika Negative (variabel, wght 300 bis 700), OFL 1.1, selbst gehostet.
 * Kontraste (WCAG 2.x) stehen in der README, Tabelle "Kontrast".
 */

@font-face {
  font-family: "Signika Negative";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/signika-negative-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Signika Negative";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/signika-negative-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Farben: Marke */
  --ds-navy: #003770;          /* Logo, Hauptfarbe */
  --ds-navy-800: #002B57;      /* Hover auf Navy-Flaechen */
  --ds-navy-900: #001F3F;      /* Fuss, tiefste Flaeche */
  --ds-navy-600: #1D4F86;      /* Linien und Flaechen auf Navy */
  --ds-navy-300: #8FA6C1;      /* Plan-Linien auf Navy (Grafik) */
  --ds-navy-200: #C9D6E5;      /* Sekundaertext auf Navy, 7.99:1 */
  --ds-navy-100: #E6EDF5;      /* helle Navy-Flaeche, Chips */
  --ds-navy-50: #F2F6FA;       /* Planpapier, Wechselflaeche */

  --ds-rot: #CD1626;           /* Logo, Signalrot, weisse Schrift 5.62:1 */
  --ds-rot-700: #A8101E;       /* Hover, roter Text auf Weiss 7.61:1 */
  --ds-rot-100: #FBE8EA;       /* Fehlerflaeche Formular */

  --ds-anthrazit: #3B414F;     /* gemessen auf der Live-Seite, fuer Altinhalte */

  /* Farben: Neutral */
  --ds-weiss: #FFFFFF;
  --ds-tinte: #142233;         /* Fliesstext, 16.08:1 auf Weiss */
  --ds-schiefer: #4A5868;      /* Sekundaertext, 7.27:1 auf Weiss, 6.70:1 auf Planpapier */
  --ds-linie: #D5DEE8;         /* Haarlinien, Rahmen (dekorativ) */
  --ds-linie-stark: #8496AA;   /* Formularrahmen, 3.03:1 auf Weiss (UI-Grenze 3:1) */
  --ds-erfolg: #1F7A4D;        /* Erfolgsmeldung, 5.32:1 auf Weiss */

  /* Semantik */
  --ds-text: var(--ds-tinte);
  --ds-text-leise: var(--ds-schiefer);
  --ds-ueberschrift: var(--ds-navy);
  --ds-flaeche: var(--ds-weiss);
  --ds-flaeche-alt: var(--ds-navy-50);
  --ds-link: var(--ds-navy);
  --ds-link-hover: var(--ds-rot-700);
  --ds-fokus: var(--ds-rot);
  --ds-fokus-innen: var(--ds-weiss);

  /* Schrift */
  --ds-font: "Signika Negative", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --ds-w-leicht: 300;
  --ds-w-normal: 400;
  --ds-w-mittel: 500;
  --ds-w-fett: 600;
  --ds-w-extra: 700;

  /* Typo-Skala: fluessig zwischen 360 px und 1440 px */
  --ds-text-xs: 0.8125rem;                                      /* 13 px, Rechtliches, Bildnachweis */
  --ds-text-sm: 0.9375rem;                                      /* 15 px, Meta, Chips */
  --ds-text-base: clamp(1.0625rem, 1.02rem + 0.19vw, 1.1875rem); /* 17 bis 19 px */
  --ds-text-lg: clamp(1.1875rem, 1.09rem + 0.42vw, 1.4375rem);   /* Lead, 19 bis 23 px */
  --ds-h4: clamp(1.1875rem, 1.13rem + 0.28vw, 1.375rem);
  --ds-h3: clamp(1.375rem, 1.24rem + 0.6vw, 1.75rem);
  --ds-h2: clamp(1.875rem, 1.5rem + 1.65vw, 2.875rem);
  --ds-h1: clamp(2.125rem, 1.6rem + 2.35vw, 3.625rem);
  --ds-display: clamp(2.375rem, 1.7rem + 3vw, 4.25rem);

  --ds-lh-eng: 1.08;
  --ds-lh-titel: 1.18;
  --ds-lh-text: 1.6;
  --ds-track-titel: -0.012em;

  /* Abstaende: 4-px-Raster */
  --ds-s-1: 0.25rem;
  --ds-s-2: 0.5rem;
  --ds-s-3: 0.75rem;
  --ds-s-4: 1rem;
  --ds-s-5: 1.25rem;
  --ds-s-6: 1.5rem;
  --ds-s-8: 2rem;
  --ds-s-10: 2.5rem;
  --ds-s-12: 3rem;
  --ds-s-16: 4rem;
  --ds-s-20: 5rem;
  --ds-abschnitt: clamp(3.5rem, 2.4rem + 4.8vw, 7rem);      /* vertikaler Abschnittsabstand */
  --ds-abschnitt-klein: clamp(2.5rem, 1.9rem + 2.6vw, 4.5rem);
  --ds-rand: clamp(1rem, 0.55rem + 2vw, 2.5rem);            /* seitlicher Seitenrand, 16 px bei 360 px */
  --ds-spalt: clamp(1rem, 0.7rem + 1.3vw, 2rem);            /* Grid-Gap */

  /* Breiten */
  --ds-breite: 76rem;          /* 1216 px Inhalt */
  --ds-breite-schmal: 46rem;   /* Lesespalte */
  --ds-breite-weit: 90rem;
  --ds-zeile: 68ch;

  /* Radien: nach Hierarchie, nicht ueberall gleich */
  --ds-r-s: 4px;               /* Chips, Eingaben innen */
  --ds-r-m: 6px;               /* Buttons, Felder */
  --ds-r-l: 12px;              /* Karten, Panels, Mega-Menue */
  --ds-r-xl: 20px;             /* grosse Bilder, Hero-Szene */
  --ds-r-rund: 999px;

  /* Schatten: navy getoent */
  --ds-schatten-1: 0 1px 2px rgba(0, 31, 63, 0.06), 0 1px 1px rgba(0, 31, 63, 0.04);
  --ds-schatten-2: 0 10px 28px -12px rgba(0, 31, 63, 0.22);
  --ds-schatten-3: 0 28px 56px -18px rgba(0, 31, 63, 0.32);
  --ds-schatten-kopf: 0 6px 18px -10px rgba(0, 31, 63, 0.28);

  /* Bewegung */
  --ds-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ds-ease-ruhig: cubic-bezier(0.45, 0, 0.55, 1);
  --ds-t-1: 120ms;
  --ds-t-2: 200ms;
  --ds-t-3: 320ms;

  /* Ebenen */
  --ds-z-inhalt: 1;
  --ds-z-kopf: 100;
  --ds-z-mega: 110;
  --ds-z-schleier: 190;
  --ds-z-mobilnav: 200;
  --ds-z-sprung: 300;

  /* Kopf */
  --ds-kopf-h: 4.25rem;        /* 68 px mobil */
  --ds-kopf-h-klein: 4.25rem;
  --ds-logo-b: 9.5rem;         /* 152 px mobil */
  --ds-tap: 2.75rem;           /* 44 px Mindest-Tap-Ziel */
}

@media (min-width: 64em) {
  :root {
    --ds-kopf-h: 5.5rem;       /* 88 px */
    --ds-kopf-h-klein: 4.25rem;/* 68 px nach dem Scrollen */
    --ds-logo-b: 11.5rem;      /* 184 px */
  }
}

/* Dunkle Kontexte: Fokus und Links umschalten */
.ds-dunkel {
  --ds-text: var(--ds-weiss);
  --ds-text-leise: var(--ds-navy-200);
  --ds-ueberschrift: var(--ds-weiss);
  --ds-link: var(--ds-weiss);
  --ds-link-hover: var(--ds-navy-200);
  --ds-fokus: var(--ds-weiss);
  --ds-fokus-innen: var(--ds-navy);
}