/* =========================================
   VARIABLES.CSS — Mondia Agency Design System
   Gebaseerd op logo kleuren (staal-blauw palet)
   ========================================= */

:root {

  /* ── KLEURENPALET ── */

  /* Primaire blauw tonen (uit logo) */
  --color-primary:        #4A8ED4;   /* Primair staal-blauw */
  --color-primary-deep:   #2E6CB5;   /* Diep blauw */
  --color-primary-light:  #7AB3E0;   /* Licht blauw */
  --color-primary-pale:   #C4DCEF;   /* Zeer licht blauw */
  --color-primary-mist:   #EBF4FB;   /* Blauw waas achtergrond */

  /* Accent kleur */
  --color-accent:         #1A5BA8;   /* Diep marine accent */

  /* Neutraal palet */
  --color-dark:           #0B1829;   /* Diepste donker (bijna zwart-blauw) */
  --color-dark-2:         #1A2C46;   /* Donker navy */
  --color-dark-3:         #2D4263;   /* Medium donker */
  --color-mid:            #4A6480;   /* Midden toon */
  --color-light:          #8FA8C0;   /* Licht grijs-blauw */
  --color-light-2:        #C8D8E8;   /* Nog lichter */
  --color-light-3:        #EBF1F7;   /* Lichtste grijs-blauw */

  /* Achtergrond kleuren */
  --color-bg:             #FFFFFF;   /* Zuiver wit */
  --color-bg-alt:         #F7FAFD;   /* Lichtste blauw-wit */
  --color-bg-dark:        #0B1829;   /* Donkere achtergrond */

  /* Tekst kleuren */
  --color-text:           #0B1829;   /* Primaire tekst */
  --color-text-2:         #2D4263;   /* Secundaire tekst */
  --color-text-muted:     #6B88A2;   /* Gedempte tekst */
  --color-text-light:     #FFFFFF;   /* Lichte tekst op donker */

  /* Status kleuren */
  --color-success:        #2E8B57;
  --color-error:          #C0392B;

  /* ── TYPOGRAFIE ── */

  /* Font families */
  --font-display:  'Cormorant Garamond', 'Georgia', serif;
  --font-body:     'DM Sans', 'Helvetica Neue', sans-serif;

  /* Font groottes — fluid schaal */
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-md:    1.125rem;   /* 18px */
  --text-lg:    1.25rem;    /* 20px */
  --text-xl:    1.5rem;     /* 24px */
  --text-2xl:   2rem;       /* 32px */
  --text-3xl:   2.5rem;     /* 40px */
  --text-4xl:   3.25rem;    /* 52px */
  --text-5xl:   4.5rem;     /* 72px */
  --text-6xl:   6rem;       /* 96px */

  /* Font weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Line heights */
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.6;
  --leading-relaxed: 1.8;

  /* Letter spacing */
  --tracking-tight:  -0.03em;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.12em;

  /* ── SPACING ── */

  --space-1:    0.25rem;   /* 4px */
  --space-2:    0.5rem;    /* 8px */
  --space-3:    0.75rem;   /* 12px */
  --space-4:    1rem;      /* 16px */
  --space-5:    1.25rem;   /* 20px */
  --space-6:    1.5rem;    /* 24px */
  --space-8:    2rem;      /* 32px */
  --space-10:   2.5rem;    /* 40px */
  --space-12:   3rem;      /* 48px */
  --space-16:   4rem;      /* 64px */
  --space-20:   5rem;      /* 80px */
  --space-24:   6rem;      /* 96px */
  --space-32:   8rem;      /* 128px */

  /* ── LAYOUT ── */

  --container-max:  1280px;
  --container-md:   960px;
  --container-sm:   680px;

  --gutter:         clamp(1.5rem, 5vw, 3rem);
  --section-gap:    clamp(5rem, 10vw, 10rem);

  /* ── BORDER RADIUS ── */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-full: 9999px;

  /* ── TRANSITIONS ── */

  --ease-premium: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out:     cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.4, 0.0, 0.2, 1);

  --duration-fast:   0.25s;
  --duration-base:   0.4s;
  --duration-slow:   0.6s;
  --duration-slower: 0.8s;

  /* ── Z-INDEX ── */

  --z-base:    1;
  --z-above:   10;
  --z-nav:     100;
  --z-overlay: 200;
  --z-modal:   300;

  /* ── HEADER ── */

  --header-height-initial: 88px;
  --header-height-scrolled: 64px;
}