/* ==========================================================================
   MR.KNOW — Design Tokens (CI 2026)
   Single source of truth for colours, type, spacing, radius, shadows.
   Derived from "CI - MRKNOW - 2026" design guide.
   --------------------------------------------------------------------------
   NOTE: Brand webfont not yet supplied. V1 uses a high-performance system
   font stack (zero network requests, instant render, perfect for Lighthouse).
   To drop in the real brand typeface later: add an @font-face in this file
   and point --font-sans / --font-display at it. Nothing else needs to change.
   ========================================================================== */

:root {
  /* --- Brand core colours (from CI guide) ------------------------------- */
  --c-purple-900: #241C42; /* "Geschütztes Lila" — primary / dark indigo   */
  --c-purple-600: #4E3F8E; /* Secondary purple                             */
  --c-grey-600:   #6D6E72; /* "Geschütztes Grau"                           */
  --c-red-600:    #C00000; /* "Schwarzwald-Rot" — signal / primary CTA     */

  /* --- Derived purple ramp (tints/shades of the brand purples) ---------- */
  --c-purple-800: #2e2455;
  --c-purple-700: #3b2f72;
  --c-purple-500: #6354a8;
  --c-purple-400: #8678c0;
  --c-purple-200: #c9c2e3;
  --c-purple-100: #e9e6f4;
  --c-purple-050: #f4f2fa;

  /* --- Derived red ramp ------------------------------------------------- */
  --c-red-700: #A30000;
  --c-red-100: #f7dede;

  /* --- Neutrals --------------------------------------------------------- */
  --c-ink:      #1a1726; /* near-black text, tinted toward brand purple     */
  --c-grey-800: #3a3a40;
  --c-grey-500: #8a8a90;
  --c-grey-300: #cdced2;
  --c-grey-200: #e4e5e8;
  --c-grey-100: #f1f1f3;
  --c-grey-050: #f8f8fa;
  --c-white:    #ffffff;

  /* --- Accent (Made in Black Forest flag / award highlights) ------------ */
  --c-gold:  #6D6E72; /* normalisiert: war Gold, jetzt Grau */
  --c-green: #4E3F8E; /* normalisiert: war Grün, jetzt Brand-Lila */

  /* --- Semantic aliases (use these in components) ----------------------- */
  --bg:           var(--c-white);
  --bg-alt:       var(--c-purple-050);
  --bg-dark:      var(--c-purple-900);
  --text:         var(--c-ink);
  --text-muted:   var(--c-grey-600);
  --text-on-dark: #efeef6;
  --brand:        var(--c-purple-900);
  --brand-2:      var(--c-purple-600);
  --cta:          var(--c-red-600);
  --cta-hover:    var(--c-red-700);
  --border:       var(--c-grey-200);
  --focus-ring:   var(--c-purple-500);

  /* --- Typography (STYLEGUIDE V3: Arial only) --------------------------- */
  --font-sans: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-display: var(--font-sans); /* Arial only — keine zweite Schrift     */

  /* Type scale per styleguide: H1 72 · H2 48 · H3 32 · H4 24 · Body 20/16 · 14/11 */
  --fs-300: 0.875rem;                                   /* 14px small/label  */
  --fs-400: 1rem;                                       /* 16px body         */
  --fs-500: clamp(1.125rem, 0.4vw + 1rem, 1.25rem);     /* 20px body large   */
  --fs-h4:  1.5rem;                                     /* 24px H4           */
  --fs-600: clamp(1.5rem, 1.4vw + 1rem, 2rem);          /* 32px H3           */
  --fs-700: clamp(1.875rem, 2.6vw + 1rem, 3rem);        /* 48px H2           */
  --fs-800: clamp(2.25rem, 4.2vw + 1rem, 4.5rem);       /* 72px H1           */

  --lh-tight: 1.1;
  --lh-snug:  1.3;
  --lh-base:  1.6;

  --fw-regular: 400;
  --fw-medium:  400; /* Arial: kein Medium → Regular */
  --fw-bold:    700;
  --fw-black:   700; /* Arial Bold ist die schwerste Stufe */

  /* --- Spacing scale (8px base) ----------------------------------------- */
  --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;

  /* --- Layout ----------------------------------------------------------- */
  --container: 1200px;
  --container-narrow: 820px;
  --gutter: clamp(1rem, 4vw, 2.5rem);

  /* --- Radius (STYLEGUIDE: Buttons 12px · Cards 16px) ------------------- */
  --radius-sm: 8px;
  --radius-btn: 12px;   /* Buttons / CTAs */
  --radius:    16px;    /* Cards / Module */
  --radius-card: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(36, 28, 66, 0.06);
  --shadow:    0 10px 30px rgba(36, 28, 66, 0.08);
  --shadow-lg: 0 24px 60px rgba(36, 28, 66, 0.14);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.25s;

  --header-h: 72px;
  --rail-w: 56px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0.001s; }
}