/* ==========================================================================
   Octopus Service – Design Tokens
   Quelle: Designsystem (Stand 24.10.2026). Werte 1:1 übernommen.
   Hell ist Standard; Dunkel folgt der Systemeinstellung oder dem Umschalter
   (data-theme="light" | "dark" auf <html>).
   ========================================================================== */

/* ---------- Schriften (selbst gehostet, DSGVO) ---------- */
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  /* ---------- Skala ---------- */
  --petrol-900: #062f36;
  --petrol-700: #0d5763;
  --petrol-500: #15899a;
  --petrol-300: #7fc6d0;
  --petrol-100: #dcf0f3;
  --petrol-50:  #f0f8f9;
  --coral-600:  #d4593a;
  --coral-500:  #e8714f;
  --coral-300:  #f5a183;
  --paper-200:  #e6e1d8;
  --paper-100:  #f2efe9;
  --paper-50:   #faf9f6;
  --slate-950:  #0c171b;
  --slate-600:  #4a5e66;
  --slate-200:  #d5dee1;

  /* ---------- Semantische Farben · HELL ---------- */
  --bg:             #faf9f6;
  --bg-subtle:      #f2efe9;
  --surface:        #ffffff;   /* Karten, Formular */
  --surface-brand:  #f0f8f9;
  --surface-deep:   #062f36;
  --text:           #0c171b;
  --text-muted:     #4a5e66;
  --text-on-deep:   #f4f7f8;
  --text-on-deep-muted: #b4ccd0;
  --primary:        #0d5763;
  --accent-line:    #15899a;
  --cta:            #e8714f;
  --on-cta:         #0c171b;
  --bracket:        #d4593a;
  --grid-line:      #e6e1d8;
  --border:         #e6e1d8;
  --border-strong:  #4a5e66;   /* Eingabefelder, Kettenknoten */
  --success:        #1d6b47;
  --danger:         #b42318;
  --icon-tile:      #dcf0f3;   /* petrol-100: Icon-Kacheln, Trustchip-Punkt */
  --primary-subtle: #dcf0f3;   /* petrol-100: Fläche der Vertrauensmerkmale */
  --on-primary:     #ffffff;   /* Icons/Text auf --primary */
  --trustbar-line:  #062f36;   /* petrol-900: Akzentlinie über den Vertrauensmerkmalen (Referenzgrafik) */
  --trustbar-line-w: 3px;
  --placeholder-bg: #f2efe9;
  --logo:           #e8714f;

  /* Tentakel */
  --tentacle-line:   #7fc6d0;
  --tentacle-accent: #e8714f;
  --tentacle-sucker: #0d5763;
  --hero-mark:       .45;    /* Deckkraft Tentakel-Wasserzeichen (mobil) */

  /* ---------- Typografie ---------- */
  --font-head: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-display: var(--font-head);
  --font-text: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display: 72px;   --lh-display: 76px;
  --fs-h1: 56px;        --lh-h1: 62px;
  --fs-h2: 40px;        --lh-h2: 46px;
  --fs-statement: 48px; --lh-statement: 56px;
  --fs-h3: 24px;        --lh-h3: 30px;
  --fs-stat: 52px;      --lh-stat: 56px;
  --fs-lead: 20px;      --lh-lead: 31px;
  --fs-body: 17px;      --lh-body: 28px;
  --fs-body-sm: 15px;   --lh-body-sm: 24px;
  --fs-nav: 16px;       --lh-nav: 20px;
  --fs-caption: 13px;   --lh-caption: 19px;
  --fs-overline: 14px;  --lh-overline: 18px;
  --fs-button: 15px;    --lh-button: 20px;
  --fs-counter: 13px;   --lh-counter: 20px;
  --tracking-mono: 0.14em;

  /* ---------- Abstände (4-px-Raster) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --section-y: 112px; /* space-9 + space-4 */

  /* ---------- Ecken ---------- */
  --radius-sm: 2px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 4px;
  --radius-full: 999px;

  /* ---------- Raster ---------- */
  --container: 1200px;
  --gutter: 24px;
  --page-pad: 24px;

  color-scheme: light;
}

/* ---------- Semantische Farben · DUNKEL ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:             #0c171b;
    --bg-subtle:      #0f1d22;
    --surface:        #13232a;
    --surface-brand:  #0d2a30;
    --surface-deep:   #041f24;
    --text:           #f4f7f8;
    --text-muted:     #8d9da3;
    --text-on-deep:   #f4f7f8;
    --text-on-deep-muted: #a9c3c8;
    --primary:        #3fa9b8;
    --accent-line:    #3fa9b8;
    --cta:            #f5a183;
    --on-cta:         #0c171b;
    --bracket:        #f5a183;
    --grid-line:      #16262c;
    --border:         #2f444c;
    --border-strong:  #8d9da3;
    --success:        #5cc795;
    --danger:         #f2847a;
    --icon-tile:      #0d2a30;
    --primary-subtle: #0d2a30;
    --on-primary:     #0c171b;
    --trustbar-line:  #3fa9b8;
    --placeholder-bg: #0f1d22;
    --logo:           #e8714f;
    --tentacle-line:   #2a7f8b;
    --tentacle-accent: #f5a183;
    --tentacle-sucker: #3fa9b8;
    --hero-mark:       .6;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg:             #0c171b;
  --bg-subtle:      #0f1d22;
  --surface:        #13232a;
  --surface-brand:  #0d2a30;
  --surface-deep:   #041f24;
  --text:           #f4f7f8;
  --text-muted:     #8d9da3;
  --text-on-deep:   #f4f7f8;
  --text-on-deep-muted: #a9c3c8;
  --primary:        #3fa9b8;
  --accent-line:    #3fa9b8;
  --cta:            #f5a183;
  --on-cta:         #0c171b;
  --bracket:        #f5a183;
  --grid-line:      #16262c;
  --border:         #2f444c;
  --border-strong:  #8d9da3;
  --success:        #5cc795;
  --danger:         #f2847a;
  --icon-tile:      #0d2a30;
  --primary-subtle: #0d2a30;
  --on-primary:     #0c171b;
  --trustbar-line:  #3fa9b8;
  --placeholder-bg: #0f1d22;
  --logo:           #e8714f;
  --tentacle-line:   #2a7f8b;
  --tentacle-accent: #f5a183;
  --tentacle-sucker: #3fa9b8;
  --hero-mark:       .6;
  color-scheme: dark;
}

/* ---------- Mobile Typografie (laut Designsystem) ---------- */
@media (max-width: 767px) {
  :root {
    --fs-display: 40px;   --lh-display: 44px;
    --fs-h1: 36px;        --lh-h1: 42px;
    --fs-h2: 30px;        --lh-h2: 36px;
    --fs-statement: 32px; --lh-statement: 38px;
    --fs-h3: 21px;        --lh-h3: 27px;
    --section-y: 64px;
    --page-pad: 20px;
  }
}