/* ============================================================
   DESIGN TOKENS — Dr. Arndt Schwaiger Website V.5.00
   Based on BMDNA Design System (Okabe-Ito palette)
   ============================================================ */


/* ============================================================
   TIER 1: PRIMITIVE TOKENS (raw values, never use directly)
   ============================================================ */
:root {
  /* Colors: Okabe-Ito Palette (colorblind-safe) */
  --raw-blue: #0072B2;
  --raw-sky: #56B4E9;
  --raw-vermilion: #D55E00;
  --raw-orange: #E69F00;
  --raw-teal: #009E73;

  /* Colors: Light Tints */
  --raw-blue-light: #E4F0FA;
  --raw-sky-light: #EBF5FC;
  --raw-vermilion-light: #FCEDE4;
  --raw-orange-light: #FEF5E0;
  --raw-teal-light: #DCEEE7;
  --raw-gray-light: #F5F4F1;

  /* Colors: Dark (for text on tinted backgrounds) */
  --raw-blue-dark: #004A75;
  --raw-vermilion-dark: #A04500;
  --raw-orange-dark: #8B6508;
  --raw-teal-dark: #006B4E;

  /* Neutrals */
  --raw-black: #1A1A1A;
  --raw-gray-900: #2D2D2D;
  --raw-gray-700: #555555;
  --raw-gray-500: #888888;
  --raw-gray-400: #AAAAAA;
  --raw-gray-300: #BBBBBB;
  --raw-gray-200: #E0DDD8;
  --raw-gray-100: #F2F1EE;
  --raw-gray-50: #F8F7F4;
  --raw-white: #FFFFFF;

  /* Spacing Scale */
  --raw-space-1: 0.25rem;
  --raw-space-2: 0.5rem;
  --raw-space-3: 0.75rem;
  --raw-space-4: 1rem;
  --raw-space-5: 1.25rem;
  --raw-space-6: 1.5rem;
  --raw-space-8: 2rem;
  --raw-space-10: 2.5rem;
  --raw-space-12: 3rem;
  --raw-space-16: 4rem;
  --raw-space-20: 5rem;
  --raw-space-24: 6rem;
  --raw-space-32: 8rem;
  --raw-space-40: 10rem;

  /* Font Sizes */
  --raw-text-2xs: 0.65rem;
  --raw-text-xs: 0.7rem;
  --raw-text-sm: 0.8rem;
  --raw-text-md: 0.9rem;
  --raw-text-base: 1rem;
  --raw-text-lg: 1.175rem;
  --raw-text-xl: 1.4rem;
  --raw-text-2xl: 1.85rem;
  --raw-text-3xl: 2.5rem;
  --raw-text-4xl: 3.25rem;
  --raw-text-5xl: 4rem;

  /* Radii */
  --raw-radius-sm: 4px;
  --raw-radius-md: 8px;
  --raw-radius-lg: 12px;
  --raw-radius-xl: 16px;
  --raw-radius-full: 100px;

  /* Shadows */
  --raw-shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
  --raw-shadow-md: 0 2px 4px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.08);
  --raw-shadow-lg: 0 4px 8px rgba(0,0,0,0.04), 0 16px 40px rgba(0,0,0,0.10);

  /* Transitions */
  --raw-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --raw-transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}


/* ============================================================
   TIER 2: SEMANTIC TOKENS (meaning-based)
   ============================================================ */
:root {
  /* Brand & Accent */
  --color-brand: var(--raw-blue);
  --color-brand-hover: var(--raw-blue-dark);
  --color-accent: var(--raw-sky);
  --color-alert: var(--raw-vermilion);

  /* BMDNA Semantic Colors */
  --color-acquisition: var(--raw-vermilion);
  --color-conversion: var(--raw-orange);
  --color-revenue: var(--raw-teal);

  /* Text Colors */
  --color-text-heading: var(--raw-black);
  --color-text-body: var(--raw-gray-900);
  --color-text-secondary: var(--raw-gray-700);
  --color-text-caption: var(--raw-gray-500);
  --color-text-muted: var(--raw-gray-400);
  --color-text-disabled: var(--raw-gray-300);
  --color-text-inverse: var(--raw-white);

  /* Surface Colors */
  --color-surface-page: var(--raw-white);
  --color-surface-warm: var(--raw-gray-50);
  --color-surface-muted: var(--raw-gray-100);
  --color-surface-rule: var(--raw-gray-200);
  --color-surface-dark: #1E1E1E;

  /* Typography */
  --font-body: 'IBM Plex Serif', 'Georgia', 'Times New Roman', serif;
  --font-heading: 'IBM Plex Sans', 'Helvetica Neue', 'Arial', sans-serif;
  --font-ui: 'IBM Plex Sans', 'Helvetica Neue', 'Arial', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Consolas', 'Courier New', monospace;

  /* Spacing Semantic */
  --space-inline: var(--raw-space-2);
  --space-block: var(--raw-space-4);
  --space-block-lg: var(--raw-space-6);
  --space-section: var(--raw-space-20);

  /* Vertical Rhythm */
  --baseline: 1.625rem;
  --line-height-body: 1.7;
  --line-height-heading: 1.2;
  --line-height-tight: 1.35;
  --line-height-loose: 1.8;
}


/* ============================================================
   TIER 3: COMPONENT TOKENS
   ============================================================ */
:root {
  /* Header */
  --header-height: 4rem;
  --header-bg: var(--color-surface-page);
  --header-border: var(--color-surface-rule);

  /* Buttons */
  --btn-radius: var(--raw-radius-md);
  --btn-padding: 0.65em 1.75em;
  --btn-padding-lg: 0.85em 2.25em;
  --btn-font-size: var(--raw-text-md);
  --btn-font-size-lg: var(--raw-text-base);

  /* Cards */
  --card-radius: var(--raw-radius-lg);
  --card-padding: var(--raw-space-6) var(--raw-space-8);
  --card-shadow: var(--raw-shadow-sm);
  --card-shadow-hover: var(--raw-shadow-md);

  /* Testimonials */
  --testimonial-gap: var(--raw-space-6);

  /* Logo Wall */
  --logo-size: 120px;
  --logo-gap: var(--raw-space-8);

  /* Footer */
  --footer-bg: var(--color-surface-dark);
  --footer-text: rgba(255,255,255,0.7);
  --footer-heading: var(--raw-white);
  --footer-link-hover: var(--raw-white);

  /* FAQ */
  --faq-border: var(--color-surface-rule);
  --faq-padding: var(--raw-space-5) var(--raw-space-6);
}