/* ==========================================================================
   tokens.css — the design system of myGSN.de
   --------------------------------------------------------------------------
   Every color, font size, spacing, radius and animation on the website comes
   from the variables in this file. Change a value here and it changes
   everywhere. Do not use hard-coded values in other CSS files.

   Principles
   - Type:    modular scale with ratio 1.25 ("major third") on a 17px base.
   - Spacing: 8px grid (4px half-step for fine details).
   - Color:   DLR core (white, black, grey, DLR yellow) + a deep "space" ink
              for immersive dark sections.
   ========================================================================== */

:root {
  /* ---- Color: neutrals ------------------------------------------------- */
  --c-white: #ffffff;
  --c-paper: #f5f5f7;          /* light section background */
  --c-paper-2: #ebecef;        /* hover / subtle fills on light */
  --c-line: #dcdde2;           /* hairlines on light */
  --c-text: #1d1d1f;           /* primary text on light */
  --c-text-2: #5f6168;         /* secondary text on light (DLR grey family) */
  --c-text-3: #8b8d94;         /* tertiary text, captions */

  --c-ink: #07080c;            /* space black — dark sections */
  --c-ink-2: #0e1017;          /* raised surface on dark */
  --c-ink-3: #171a23;          /* cards on dark */
  --c-line-dark: rgba(255, 255, 255, 0.12);
  --c-on-dark: #f5f5f7;        /* primary text on dark */
  --c-on-dark-2: rgba(245, 245, 247, 0.68);
  --c-on-dark-3: rgba(245, 245, 247, 0.45);

  /* ---- Color: brand & semantic ---------------------------------------- */
  --c-accent: #ffc800;         /* DLR yellow */
  --c-accent-strong: #f2b600;
  --c-accent-soft: rgba(255, 200, 0, 0.14);
  --c-on-accent: #1d1d1f;

  /* Semantic colors. Yellow is reserved for the DLR brand accent and the NOC
     (the hub of the network); station types use their own colors. */
  --c-rf: #5aa9ff;             /* radio-frequency antennas (radio = blue) */
  --c-optical: #b98cff;        /* optical ground stations (laser light = violet) */
  --c-noc: #ffc800;            /* network operations center = brand yellow */
  --c-link: #0a5fb4;           /* text links on light */
  --c-link-dark: #7cc4ff;      /* text links on dark */
  --c-focus: #2f8cff;          /* keyboard focus ring */

  /* ---- Typography ------------------------------------------------------ */
  --font-sans: "Frutiger LT Pro", "Frutiger", -apple-system, BlinkMacSystemFont,
    "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Frutiger LT Pro", "Frutiger", -apple-system, BlinkMacSystemFont,
    "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* Modular scale 1.25 on 17px. Steps 3+ grow fluidly with the viewport. */
  --step--2: 0.68rem;    /* 10.9px  micro labels           */
  --step--1: 0.85rem;    /* 13.6px  captions, meta          */
  --step-0: 1.0625rem;   /* 17px    body text               */
  --step-1: 1.328rem;    /* 21.3px  lead text, card titles  */
  --step-2: 1.66rem;     /* 26.6px  h3                      */
  --step-3: clamp(1.66rem, 1.3rem + 1.2vw, 2.075rem);   /* 33px  h2 small */
  --step-4: clamp(2.075rem, 1.5rem + 2vw, 2.594rem);    /* 41px  h2        */
  --step-5: clamp(2.4rem, 1.4rem + 3.4vw, 3.242rem);    /* 52px  h1        */
  --step-6: clamp(2.8rem, 1.2rem + 5.4vw, 4.053rem);    /* 65px  display   */
  --step-7: clamp(3.2rem, 1rem + 7.4vw, 5.066rem);      /* 81px  hero      */
  /* hero headline on the globe page: also limited by the screen height */
  --step-hero: clamp(2.4rem, min(5.2vw, 7.4vh), 4.75rem);

  --fw-light: 300;       /* DLR-style light headlines */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  --lh-tight: 1.08;      /* display headlines */
  --lh-snug: 1.25;       /* headings */
  --lh-body: 1.55;       /* running text */

  --tracking-tight: -0.022em;  /* large headlines */
  --tracking-wide: 0.12em;     /* uppercase eyebrow labels */

  /* ---- Spacing: 8px grid ---------------------------------------------- */
  --space-1: 0.25rem;  /*   4px */
  --space-2: 0.5rem;   /*   8px */
  --space-3: 0.75rem;  /*  12px */
  --space-4: 1rem;     /*  16px */
  --space-5: 1.5rem;   /*  24px */
  --space-6: 2rem;     /*  32px */
  --space-7: 3rem;     /*  48px */
  --space-8: 4rem;     /*  64px */
  --space-9: 6rem;     /*  96px */
  --space-10: 8rem;    /* 128px */

  --section-y: clamp(var(--space-8), 9vw, var(--space-10)); /* vertical section padding */

  /* ---- Layout ---------------------------------------------------------- */
  --container: 76rem;          /* 1216px content width */
  --container-narrow: 48rem;   /* 768px  reading width */
  --container-wide: 90rem;     /* 1440px full layouts */
  --gutter: clamp(var(--space-4), 4vw, var(--space-7));
  --header-h: 5rem;            /* 80px (64px on small screens, see below) */

  /* ---- Shape ----------------------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ---- Elevation ------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.08), 0 16px 40px rgba(0, 0, 0, 0.1);
  --shadow-3: 0 24px 64px rgba(0, 0, 0, 0.35);
  --glass-light: rgba(255, 255, 255, 0.72);
  --glass-dark: rgba(14, 16, 23, 0.62);
  --blur: saturate(180%) blur(20px);

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 150ms;
  --dur-2: 300ms;
  --dur-3: 600ms;

  /* ---- Layers ---------------------------------------------------------- */
  --z-base: 1;
  --z-overlay: 10;
  --z-popover: 40;
  --z-header: 100;
  --z-modal: 200;
}

@media (max-width: 860px) {
  :root { --header-h: 4rem; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms;
    --dur-2: 0ms;
    --dur-3: 0ms;
  }
}