/* ==========================================================================
   LUDWIG GLOBAL ACADEMY — design tokens
   Source of truth for colour, type, space, radius, shadow, motion.
   Colours are sampled from the brand poster (navy + royal blue + German
   tricolour: Schwarz / Rot / Gold). Never hard-code hex values in section
   CSS — use these variables.
   ========================================================================== */

:root {
  /* ---- Brand: navy & blue (logo, headings, deep sections) ---- */
  --navy-950: #040f26;
  --navy-900: #061b3f;
  --navy-800: #0a2a5c; /* logo navy — primary brand colour */
  --navy-700: #0f3a80;
  --navy-600: #154c9f;
  --blue-600: #0b5bc4; /* primary action blue (poster "A1" pill) */
  --blue-500: #1f7ae8;
  --blue-400: #4a9bff;
  --blue-300: #8cc0ff;
  --sky-200: #cfe6ff;
  --sky-100: #e6f2ff;
  --sky-50: #f3f9ff;

  /* ---- Brand: the German tricolour (accent — use sparingly) ---- */
  --schwarz: #131316;
  --rot: #d91e2b;
  --rot-dark: #b3121f;
  --gold: #ffc81e;
  --gold-soft: #ffe08a;
  --gold-deep: #e8a800;

  /* ---- Utility ---- */
  --wa: #25d366;
  --wa-dark: #128c7e;
  --white: #ffffff;

  /* ---- Text ---- */
  --ink: #0b1b3a; /* body / headings on light */
  --ink-soft: #3a4c70; /* secondary text on light (8:1 on white) */
  --ink-mute: #566888; /* tertiary (5.6:1 on white) */
  --on-dark: #f3f8ff;
  --on-dark-soft: #b9cbe8; /* secondary text on navy (9:1 on navy-900) */

  /* ---- Surfaces ---- */
  --bg: #f4f9ff;
  --surface: #ffffff;
  --surface-glass: rgba(255, 255, 255, 0.72);
  --surface-glass-dark: rgba(10, 42, 92, 0.55);
  --line: rgba(10, 42, 92, 0.12);
  --line-strong: rgba(10, 42, 92, 0.22);
  --line-on-dark: rgba(255, 255, 255, 0.16);

  /* ---- Gradients ---- */
  --grad-sky: linear-gradient(180deg, #d6eaff 0%, #eaf4ff 46%, #f7fbff 100%);
  --grad-blue: linear-gradient(135deg, #2b86f2 0%, #0b5bc4 55%, #0a3f9e 100%);
  --grad-navy: linear-gradient(160deg, #0f3a80 0%, #0a2a5c 45%, #061b3f 100%);
  --grad-night: radial-gradient(120% 90% at 50% 0%, #0f3a80 0%, #061b3f 52%, #040f26 100%);
  --grad-gold: linear-gradient(135deg, #ffe08a 0%, #ffc81e 55%, #f0a800 100%);
  --grad-flag: linear-gradient(90deg, var(--schwarz) 0 33.34%, var(--rot) 33.34% 66.67%, var(--gold) 66.67% 100%);
  --grad-text-blue: linear-gradient(100deg, #1f7ae8 0%, #0b5bc4 50%, #0a2a5c 100%);

  /* ---- Typography ---- */
  --font-display: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-script: "Caveat", "Segoe Script", "Bradley Hand", cursive;

  --fs-xs: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);
  --fs-sm: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --fs-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fs-lg: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);
  --fs-xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --fs-2xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --fs-3xl: clamp(2.125rem, 1.5rem + 3vw, 3.75rem);
  --fs-4xl: clamp(2.5rem, 1.6rem + 4.6vw, 5.25rem);
  --fs-display: clamp(2.9rem, 1.4rem + 7.4vw, 8rem);
  --fs-script: clamp(1.5rem, 1.25rem + 1.2vw, 2.25rem);

  --lh-tight: 1.04;
  --lh-snug: 1.2;
  --lh-body: 1.65;

  /* ---- Space ---- */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --container: 1240px;
  --container-wide: 1440px;
  --section-y: clamp(5rem, 11vw, 10rem);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* ---- Radius ---- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-pill: 999px;

  /* ---- Shadow (navy-tinted, layered) ---- */
  --shadow-xs: 0 1px 2px rgba(10, 42, 92, 0.08);
  --shadow-sm: 0 2px 6px rgba(10, 42, 92, 0.07), 0 6px 16px rgba(10, 42, 92, 0.06);
  --shadow-md: 0 4px 12px rgba(10, 42, 92, 0.08), 0 16px 36px rgba(10, 42, 92, 0.1);
  --shadow-lg: 0 8px 24px rgba(10, 42, 92, 0.1), 0 32px 72px rgba(10, 42, 92, 0.16);
  --shadow-glow-blue: 0 10px 40px rgba(31, 122, 232, 0.35);
  --shadow-glow-gold: 0 10px 40px rgba(255, 200, 30, 0.4);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* expo-out feel */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 700ms;

  /* ---- Layers ---- */
  --z-base: 1;
  --z-sticky: 50;
  --z-header: 100;
  --z-menu: 200;
  --z-float: 300;
  --z-cursor: 900;
  --z-preloader: 1000;

  /* ---- Header ---- */
  --header-h: 76px;
}

@media (max-width: 720px) {
  :root {
    --header-h: 64px;
  }
}