/* ================================================================
   BRAND.CSS — Deutsche Horizonte Design System
   Color tokens, typography, design variables
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {

  /* ── COLOUR PALETTE ── */
  --c-primary:        #1F3A45;
  --c-secondary:      #2E4A3E;
  --c-accent:         #C9A24A;
  --c-accent-hover:   #CFAC5C;
  --c-accent-light:   #D9B96E;
  --c-accent2:        #8C3F3A;
  --c-bg:             #E1E8EA;
  --c-bg-alt:         #D2DBDE;
  --c-bg-dark:        #2B3436;
  --c-text:           #1E2324;
  --c-text-light:     #4A5568;
  --c-text-muted:     #6B7B80;
  --c-white:          #FFFFFF;
  --c-border:         rgba(31, 58, 69, 0.12);
  --c-border-light:   rgba(31, 58, 69, 0.06);
  --overlay-img:      rgba(31, 58, 69, 0.42);

  /* ── GRADIENTS ── */
  --g-hero:    linear-gradient(135deg, #1F3A45 0%, #2E4A3E 55%, #2B3436 100%);
  --g-light:   linear-gradient(180deg, #E1E8EA 0%, #D2DBDE 100%);
  --g-accent:  linear-gradient(135deg, #C9A24A 0%, #D9B96E 100%);
  --g-forest:  linear-gradient(135deg, #2E4A3E 0%, #5F776B 100%);
  --g-warm:    linear-gradient(135deg, #8C3F3A 0%, #A65750 100%);

  /* ── TYPOGRAPHY ── */
  --ff-head:  'Manrope', 'Inter', sans-serif;
  --ff-body:  'Inter', 'Manrope', sans-serif;
  --ff-mono:  'IBM Plex Mono', monospace;

  /* fluid sizes */
  --fs-xs:    clamp(0.68rem, 1.4vw,  0.75rem);
  --fs-sm:    clamp(0.8rem,  1.8vw,  0.875rem);
  --fs-base:  clamp(0.9rem,  2vw,    1rem);
  --fs-md:    clamp(1rem,    2.2vw,  1.125rem);
  --fs-lg:    clamp(1.1rem,  2.5vw,  1.25rem);
  --fs-xl:    clamp(1.25rem, 3vw,    1.5rem);
  --fs-2xl:   clamp(1.5rem,  3.5vw,  2rem);
  --fs-3xl:   clamp(1.75rem, 4vw,    2.5rem);
  --fs-4xl:   clamp(2rem,    5vw,    3.25rem);
  --fs-5xl:   clamp(2.5rem,  6vw,    4rem);
  --fs-hero:  clamp(2.8rem,  7vw,    5.5rem);
  --fs-mq:    clamp(20px,    3vw,    38px);

  /* line heights */
  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.55;
  --lh-relaxed: 1.72;
  --lh-loose:   1.9;

  /* weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semi:     600;
  --fw-bold:     700;
  --fw-xbold:    800;

  /* ── SPACING ── */
  --sp-1:   0.25rem;
  --sp-2:   0.5rem;
  --sp-3:   0.75rem;
  --sp-4:   1rem;
  --sp-5:   1.25rem;
  --sp-6:   1.5rem;
  --sp-8:   2rem;
  --sp-10:  2.5rem;
  --sp-12:  3rem;
  --sp-16:  4rem;
  --sp-20:  5rem;
  --sp-24:  6rem;
  --sp-32:  8rem;

  /* ── LAYOUT ── */
  --wrap:         1280px;
  --wrap-narrow:  960px;
  --wrap-wide:    1440px;
  --pad-x:        clamp(1rem, 5vw, 3rem);

  /* ── BORDERS ── */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   14px;
  --r-xl:   22px;
  --r-2xl:  36px;
  --r-full: 9999px;

  /* ── SHADOWS ── */
  --sh-xs: 0 1px 3px  rgba(31,58,69,0.06);
  --sh-sm: 0 2px 8px  rgba(31,58,69,0.08);
  --sh-md: 0 4px 16px rgba(31,58,69,0.10);
  --sh-lg: 0 8px 32px rgba(31,58,69,0.13);
  --sh-xl: 0 16px 64px rgba(31,58,69,0.16);
  --sh-ac: 0 8px 32px rgba(201,162,74,0.28);

  /* ── TRANSITIONS ── */
  --tr-fast:   150ms ease;
  --tr-base:   300ms ease;
  --tr-slow:   600ms ease;
  --tr-bounce: 420ms cubic-bezier(0.34,1.56,0.64,1);

  /* ── HEADER ── */
  --header-h:           80px;
  --header-h-scrolled:  62px;
}