/* ============================================================
   Kursnova Design System — CSS Custom Properties
   Einbinden in alle Seitenlayouts die kn-* / kb-* Klassen nutzen.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Source+Sans+3:ital,wght@0,300..700;1,300..700&display=swap');

:root {
  /* --- Brand ------------------------------------------------ */
  --color-primary:       #0A5558;
  --color-primary-dark:  #073D40;
  --color-primary-light: #1A7679;
  --color-primary-glow:  rgba(10, 85, 88, 0.18);
  --color-navy:          #00267f;
  --color-navy-soft:     #00267fdd;

  /* --- Neutrals (cool gray) --------------------------------- */
  --color-white:   #ffffff;
  --color-cream:   #f8f9fb;
  --color-sand:    #f1f3f6;
  --color-stone:   #e4e7ec;
  --color-gray-300: #d0d5dd;
  --color-gray-400: #98a2b3;
  --color-gray-500: #667085;
  --color-gray-600: #475467;
  --color-gray-700: #344054;
  --color-gray-800: #1d2939;
  --color-gray-900: #101828;
  --color-black:   #0a0d12;

  /* --- Semantic -------------------------------------------- */
  --color-success: #1a8754;
  --color-warning: #cc8400;
  --color-error:   #c53030;

  /* --- Typography ------------------------------------------ */
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body:    'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* --- Fluid type scale ------------------------------------ */
  --text-xs:   clamp(0.75rem,   0.7rem  + 0.25vw, 0.8125rem);
  --text-sm:   clamp(0.8125rem, 0.75rem + 0.3vw,  0.9375rem);
  --text-base: clamp(0.9375rem, 0.875rem + 0.3vw, 1.0625rem);
  --text-lg:   clamp(1.0625rem, 1rem    + 0.3vw,  1.1875rem);
  --text-xl:   clamp(1.1875rem, 1.1rem  + 0.4vw,  1.375rem);
  --text-2xl:  clamp(1.375rem,  1.25rem + 0.6vw,  1.75rem);
  --text-3xl:  clamp(1.75rem,   1.5rem  + 1.25vw, 2.5rem);
  --text-4xl:  clamp(2.25rem,   1.75rem + 2.5vw,  3.75rem);
  --text-5xl:  clamp(3rem,      2rem    + 5vw,     5.5rem);

  /* --- Line height ----------------------------------------- */
  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.4;
  --lh-prose:  1.6;

  /* --- Letter spacing -------------------------------------- */
  --ls-tight:   -0.01em;
  --ls-normal:  0;
  --ls-loose:   0.02em;
  --ls-eyebrow: 0.08em;

  /* --- Spacing --------------------------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --container-padding: var(--space-6);

  /* --- Border radius --------------------------------------- */
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-full: 9999px;

  /* --- Shadows --------------------------------------------- */
  --shadow-sm:    0 1px 2px rgb(16 24 40 / 0.05), 0 1px 1px rgb(16 24 40 / 0.04);
  --shadow-md:    0 4px 12px rgb(16 24 40 / 0.06), 0 2px 4px rgb(16 24 40 / 0.05);
  --shadow-lg:    0 12px 24px rgb(16 24 40 / 0.08), 0 4px 8px rgb(16 24 40 / 0.05);
  --shadow-focus: 0 0 0 3px var(--color-primary-glow);

  /* --- Motion ---------------------------------------------- */
  --ease:     cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 260ms;

  /* --- Layout ---------------------------------------------- */
  --container-max: 1330px;
  --content-max:   72ch;
  --nav-h:         4.814rem;
}