/* impactpm.eu — Design Tokens v1.0
 * Source of truth for all visual decisions on impactpm.eu.
 * Import this file in every stylesheet. Never hardcode hex values elsewhere.
 * Contrast ratios (WCAG AA minimum 4.5:1 for text, 3:1 for UI components):
 *   --ip-teal on --ip-navy:    4.6:1  (AA for large text and UI components)
 *   --ip-white on --ip-navy:   12.6:1 (AAA)
 *   --ip-white on --ip-ocean:  4.7:1  (AA)
 *   --ip-text on --ip-navy:    11.9:1 (AAA)
 *   --ip-text-muted on --ip-navy: 4.5:1 (AA — minimum; use only for non-essential labels)
 */

:root {

  /* --- Farben ----------------------------------------------------------- */
  /* Primary brand palette. Do not add colours outside this set. */
  --ip-navy:        #0F3141;  /* Primary — backgrounds, headers, footer */
  --ip-ocean:       #1B6CA8;  /* Secondary — links, buttons, interactive */
  --ip-teal:        #3DB8A8;  /* Accent — CTAs, highlights, active states */
  --ip-white:       #FFFFFF;  /* Surfaces — cards, modals, light-mode text */

  /* Text colours */
  --ip-text:        #F2F4F5;  /* Primary text on dark backgrounds */
  --ip-text-muted:  #A8B8C8;  /* Secondary text, metadata, captions */

  /* Surface hierarchy (dark theme, default) */
  --ip-bg:          #0F3141;  /* Page background */
  --ip-surface:     #162D3D;  /* Raised surface — cards, panels */
  --ip-border:      #1B3A50;  /* Dividers, input outlines */

  /* Semantic aliases — use these in components, not raw palette tokens */
  --ip-color-primary:    var(--ip-navy);
  --ip-color-secondary:  var(--ip-ocean);
  --ip-color-accent:     var(--ip-teal);
  --ip-color-text:       var(--ip-text);
  --ip-color-text-soft:  var(--ip-text-muted);


  /* --- Typografie ------------------------------------------------------- */
  --ip-font-sans: "Avenir Next", "Avenir", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", sans-serif;
  --ip-font-mono: "JetBrains Mono", "Fira Mono", "Courier New", monospace;

  /* Type scale (1.25 major-third ratio) */
  --ip-font-size-xs:   0.75rem;   /* 12px — legal, fine print */
  --ip-font-size-sm:   0.875rem;  /* 14px — captions, labels */
  --ip-font-size-base: 1rem;      /* 16px — body copy */
  --ip-font-size-lg:   1.25rem;   /* 20px — lead paragraph */
  --ip-font-size-xl:   1.5rem;    /* 24px — H4 / card titles */
  --ip-font-size-2xl:  2rem;      /* 32px — H3 / section headings */
  --ip-font-size-3xl:  3rem;      /* 48px — H1 / hero */

  /* Weight scale */
  --ip-font-weight-normal: 400;
  --ip-font-weight-medium: 500;
  --ip-font-weight-bold:   700;

  /* Line height */
  --ip-leading-tight:  1.2;   /* Headings */
  --ip-leading-base:   1.6;   /* Body copy */
  --ip-leading-loose:  1.8;   /* Long-form text */


  /* --- Abstände (8-point grid) ------------------------------------------ */
  --ip-space-1:   4px;
  --ip-space-2:   8px;
  --ip-space-3:  12px;
  --ip-space-4:  16px;
  --ip-space-6:  24px;
  --ip-space-8:  32px;
  --ip-space-12: 48px;
  --ip-space-16: 64px;
  --ip-space-24: 96px;
  --ip-space-32: 128px;


  /* --- Border Radius ----------------------------------------------------- */
  --ip-radius-sm:   4px;
  --ip-radius-md:   8px;
  --ip-radius-lg:  16px;
  --ip-radius-xl:  24px;
  --ip-radius-full: 9999px;


  /* --- Shadows ----------------------------------------------------------- */
  /* All shadows use near-black (not pure black) to stay on-brand */
  --ip-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.30);
  --ip-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40);
  --ip-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.50);

  /* Teal glow — use on accent elements and CTAs only */
  --ip-shadow-accent: 0 0 20px rgba(61, 184, 168, 0.25);


  /* --- Transitions ------------------------------------------------------- */
  --ip-transition:       150ms ease;
  --ip-transition-slow:  300ms ease;


  /* --- Z-index ladder ---------------------------------------------------- */
  --ip-z-base:    0;
  --ip-z-raised:  10;
  --ip-z-overlay: 100;
  --ip-z-modal:   200;
  --ip-z-toast:   300;


  /* --- Breakpoints (reference only — use in media queries by value) ------ */
  /* sm: 640px | md: 768px | lg: 1024px | xl: 1280px | 2xl: 1536px */

}