/* =====================================================================
   DEECKE FINANCIAL SOLUTIONS — DESIGN TOKENS
   ---------------------------------------------------------------------
   ZENTRALE STELLE FÜR FARBEN, SCHRIFT, ABSTÄNDE, RADIEN.
   Werte 1:1 aus der offiziellen Brand Guideline
   (260601_DEECKE_Brand_Guidelines.pptx — „A Circle of Trust“).

   Kernregeln der Guideline, die hier verankert sind:
     • Farben: Deep Navy #122941 (dominant), Brand Blue #006CA6,
       Bright Cyan #00AFE0, Grautöne #505456 / #7D8386 / #A4ACB1 / #E9EBEC.
     • Typografie: DIN Pro (self-hosted, OTF — assets/fonts/). KEIN Google
       Fonts / kein externer Font-Call (DSGVO). Bold Headlines, Regular Body.
     • KEINE runden Ecken. KEINE Schatten. Klare, reduzierte Formsprache.
   ===================================================================== */

/* ---------------------------------------------------------------------
   DIN PRO — self-hosted Markenschrift (kein externer Font-Call, DSGVO).
   woff2 zuerst, OTF als Fallback fuer sehr alte Browser.
   --------------------------------------------------------------------- */
@font-face {
  font-family: "DIN Pro";
  src: url("../assets/fonts/dinpro.woff2") format("woff2"),
       url("../assets/fonts/dinpro.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DIN Pro";
  src: url("../assets/fonts/dinpro_medium.woff2") format("woff2"),
       url("../assets/fonts/dinpro_medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DIN Pro";
  src: url("../assets/fonts/dinpro_bold.woff2") format("woff2"),
       url("../assets/fonts/dinpro_bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DIN Pro";
  src: url("../assets/fonts/dinpro_black.woff2") format("woff2"),
       url("../assets/fonts/dinpro_black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- MARKENFARBEN (Guideline: Colour System) ---------- */
  --brand-navy:     #122941;   /* Deep Navy — dominant, Hintergründe        */
  --brand-navy-800: #0e2036;   /* tieferer Verlauf                          */
  --brand-navy-900: #0a1826;   /* tiefster Punkt / Footer                   */
  --brand-blue:     #006ca6;   /* Brand Blue — Highlight / Links            */
  --brand-blue-700: #005886;   /* Brand Blue, gedrückt                      */
  --brand-cyan:     #00afe0;   /* Bright Cyan — Highlight / Momentum        */
  --brand-cyan-700: #0090c0;   /* Cyan Hover / gedrückt                     */
  --brand-cyan-300: #00afe0;   /* helle Akzente auf Navy                    */

  /* ---------- NEUTRALE / FLÄCHEN ---------- */
  --paper:          #ffffff;   /* Standard-Hintergrund                      */
  --paper-alt:      #f6f7f8;   /* abgesetzte helle Sektion (Very light)     */
  --paper-line:     #e9ebec;   /* Very light gray — feine Flächen/Linien    */
  --ink:            #122941;   /* Headlines = Deep Navy                     */
  --ink-body:       #505456;   /* Dark Gray — Fließtext                     */
  --ink-soft:       #7d8386;   /* Medium Gray — Sekundärtext                */
  --ink-faint:      #a4acb1;   /* Light Gray — Captions                     */
  --on-dark:        #f6f7f8;   /* Text auf Navy                             */
  --on-dark-soft:   #a4acb1;   /* Sekundärtext auf Navy                     */

  /* ---------- LINIEN & RÄNDER ---------- */
  --border:         #e9ebec;
  --border-strong:  #d3d8db;
  --border-on-dark: rgba(255, 255, 255, 0.16);

  /* ---------- ZUSTÄNDE (Guideline-Signalfarben) ---------- */
  --focus-ring:     #00afe0;
  --success:        #1f8a5b;
  --error:          #c0392b;

  /* ---------- TYPOGRAFIE ----------
     DIN Pro = Markenschrift, self-hosted aus assets/fonts/ (woff2 + OTF).
     Die @font-face-Regeln stehen oben in dieser Datei. Kein Google Fonts,
     kein externer Font-Call (DSGVO).                                       */
  --font-body:    "DIN Pro", system-ui,
                  -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-heading: "DIN Pro", system-ui,
                  -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --fw-regular: 400;   /* Body            */
  --fw-medium:  500;   /* Labels/Sublines */
  --fw-bold:    700;   /* Headlines       */
  --fw-black:   800;

  /* Fluide Schriftgrößen — Guideline: Headline 36–54pt, Sub 24–32, Body 12–24 */
  --fs-display: clamp(2.1rem, 1.4rem + 3.2vw, 3.6rem);
  --fs-h2:      clamp(1.6rem, 1.2rem  + 1.9vw, 2.4rem);
  --fs-h3:      clamp(1.2rem, 1.05rem + 0.7vw, 1.45rem);
  --fs-lead:    clamp(1.05rem,0.98rem + 0.4vw, 1.2rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;
  --fs-eyebrow: 0.8125rem;

  --lh-tight: 1.1;
  --lh-snug:  1.28;
  --lh-body:  1.62;

  /* ---------- ABSTÄNDE (4px-Basis) ---------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;  --sp-9: 6rem;

  --section-y:  clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  --container:  1160px;
  --container-narrow: 760px;

  /* ---------- RADIEN — Guideline: KEINE runden Ecken ---------- */
  --radius-sm:   0;
  --radius:      0;
  --radius-lg:   0;
  --radius-pill: 0;

  /* ---------- SCHATTEN — Guideline: KEINE Schatten ---------- */
  --shadow-sm:  none;
  --shadow:     none;
  --shadow-lg:  none;
  --shadow-cta: none;

  /* ---------- SONSTIGES ---------- */
  --header-h: 68px;
  --transition: 180ms ease;
  --transition-slow: 320ms ease;
}