:root {
  /* ── Neutral palette (unchanged) ── */
  --color-midnight-ink: #05060f;
  --color-graphite-plate: #2f343e;
  --color-steel-border: #3f4959;
  --color-fog: #81899b;
  --color-pebble: #9da7ba;
  --color-moonlight: #c7d3ea;
  --color-ice: #d1e4fa;
  --color-glacier: #d8ecf8;
  --color-frost-link: #b6d9fc;
  --color-cipher-mint: #269684;

  /* ── Brand — bordeaux rood (uit logo: rgb 105,12,15) ── */
  --color-bordeaux:        #690C0F;   /* exact logo match — primary CTA fill */
  --color-bordeaux-hover:  #8C1217;   /* lichtere variant voor hover states */
  --color-bordeaux-glow:   #B5191F;   /* voor glows en icon accenten */
  --color-bordeaux-text:   #E0484E;   /* leesbaar rood op donker achtergrond */
  --color-bordeaux-subtle: rgba(105, 12, 15, 0.15); /* achtergrond tint */
  --color-bordeaux-hairline: rgba(105, 12, 15, 0.4); /* border tint */

  /* ── Gradients ── */
  --gradient-hero-text: linear-gradient(135deg, #ffffff 0%, #d8ecf8 50%, #E0484E 100%);
  --gradient-bordeaux:  linear-gradient(135deg, #8C1217 0%, #690C0F 100%);

  /* ── Fonts ── */
  --font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: 'DM Sans', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Mono', monospace;

  /* ── Type scale ── */
  --text-caption:     12px;
  --text-body-sm:     14px;
  --text-body:        16px;
  --text-subheading:  18px;
  --text-heading-sm:  24px;
  --text-heading:     32px;
  --text-display:     56px;

  /* ── Weights ── */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-black:     800;

  /* ── Spacing ── */
  --space-4:   4px;
  --space-8:   8px;
  --space-12:  12px;
  --space-16:  16px;
  --space-20:  20px;
  --space-24:  24px;
  --space-32:  32px;
  --space-40:  40px;
  --space-48:  48px;
  --space-56:  56px;
  --space-80:  80px;
  --space-120: 120px;

  /* ── Layout ── */
  --max-width:   clamp(1280px, 75vw, 1680px);
  --section-gap: 120px;
  --card-padding: 24px;

  /* ── Radius ── */
  --radius-sm:  2px;
  --radius-md:  6px;
  --radius-lg:  10px;
  --radius-xl:  16px;
  --radius-pill: 999px;

  /* ── Shadows ── */
  --shadow-sm:       rgba(186, 207, 247, 0.25) 0px 0px 6px 0px;
  --shadow-card:     rgba(199, 211, 234, 0.10) 0px 1px 1px 0px inset,
                     rgba(199, 211, 234, 0.04) 0px 24px 48px 0px inset,
                     rgba(6, 6, 14, 0.75) 0px 24px 32px 0px;
  --shadow-hairline: rgba(186, 215, 247, 0.10) 0px 0px 0px 1px inset;
  --shadow-bordeaux: 0 0 24px rgba(105, 12, 15, 0.5);
}