/* Netcloud AG design tokens, copied from netcloud-cicd-brand-guidelines/tokens/tokens.css
   (Brand Guidelines V2, 07/2026). Values are unchanged; keep them in sync with the brand repo.
   One deviation: the brand file loads Switzer from Fontshare with @import. The CSP (font-src 'self')
   and FE-05 forbid third-party fonts, so Switzer is self-hosted below instead. The ITF Free Font
   License 2.0 (assets/fonts/Switzer-FFL-2.0.txt, section 01) allows self-hosting via @font-face for
   our own applications; the file is the official, unmodified WOFF2 (no subsetting or conversion). */
@font-face {
  font-family: "Switzer";
  src: url("../assets/fonts/Switzer-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Hauptfarben (main) --- */
  --nc-color-logo-blue:      #454b9a; /* Pantone 7670 C */
  --nc-color-blue-soft:      #7a82cc; /* Pantone 7446 C */
  --nc-color-glowing-blue:   #4640ff; /* "Glowing Blue" — primary digital */
  --nc-color-black:          #000000;
  --nc-color-white:          #ffffff;

  /* --- Sekundärfarben (use sparingly) --- */
  --nc-color-services-violet: #8000ff;
  --nc-color-solutions-blue:  #0073e5;
  --nc-color-grey:            #c3c3c3; /* Cool Gray 4 C */

  /* --- Office-Theme "Netcloud AG" --- */
  --nc-color-deep-blue:      #2c2f66; /* Theme dk2 — dunkles Blau, Flächen/Text auf Hell */
  --nc-color-surface-subtle: #f2f2f2; /* Theme lt2 — helle Flächen, Tabellenzeilen */
  --nc-color-meta:           #7a7d99; /* Metatext / Sublines in Inhaltslayouts */
  --nc-color-glowing-blue-40:  #b5b2ff; /* accent2 */
  --nc-color-glowing-blue-20:  #d8d6ff; /* accent6 */
  --nc-color-solutions-blue-25:#bfdfff; /* accent4 */

  /* --- Semantic aliases --- */
  --nc-color-primary:  var(--nc-color-glowing-blue);
  --nc-color-brand:    var(--nc-color-logo-blue);
  --nc-color-text:     var(--nc-color-black);
  --nc-color-surface:  var(--nc-color-white);
  --nc-color-link:     var(--nc-color-services-violet);
  --nc-color-link-visited: var(--nc-color-glowing-blue-40);

  /* --- Typography --- */
  --nc-font-display: "Switzer", "Helvetica Neue", Arial, sans-serif;
  --nc-font-office:  Arial, Helvetica, sans-serif;

  /* Web-Typoskala (PDF V2, S. 16 "Styleguide Webseite") — Desktop-Werte. */
  --nc-text-h1:  60px;
  --nc-text-h2:  36px;
  --nc-text-h3:  32px; /* gilt auch für H4 */
  --nc-text-h5:  16px; /* gilt auch für H6 */
  --nc-text-p-l:  24px;
  --nc-text-p-m:  18px;
  --nc-text-p-s:  16px;
  --nc-text-p-xs: 14px;
}

@media (max-width: 1024px) { /* Tablet */
  :root {
    --nc-text-h1: 45px; --nc-text-h2: 28px; --nc-text-h3: 24px; --nc-text-h5: 16px;
    --nc-text-p-l: 21px; --nc-text-p-m: 18px; --nc-text-p-s: 16px; --nc-text-p-xs: 14px;
  }
}

@media (max-width: 640px) { /* Mobile */
  :root {
    --nc-text-h1: 30px; --nc-text-h2: 24px; --nc-text-h3: 24px; --nc-text-h5: 16px;
    --nc-text-p-l: 18px; --nc-text-p-m: 16px; --nc-text-p-s: 14px; --nc-text-p-xs: 14px;
  }
}