/* CardPrime — huisstijl. Alle kleuren/typografie als :root-tokens.
   Componenten verwijzen NOOIT naar hex, altijd naar deze variabelen. */

:root{
  /* Merkkleuren CardPrime (uit logo) */
  --cp-gold:        #C4A35C;  /* primair goud/champagne */
  --cp-gold-dark:   #A8863F;  /* hover / accent donker */
  --cp-gold-light:  #E2CB8E;  /* lichte accent / highlights */
  --cp-black:       #1A1A1A;  /* logo donker */
  --cp-charcoal:    #262626;  /* surfaces / footer */
  --cp-white:       #FFFFFF;
  --cp-offwhite:    #F7F5F0;  /* zachte achtergrond */
  --cp-muted:       #6B6B6B;  /* secundaire tekst */
  --cp-border:      #E6E2D8;

  /* Semantisch */
  --color-primary:        var(--cp-gold);
  --color-primary-hover:  var(--cp-gold-dark);
  --color-bg:             var(--cp-white);
  --color-bg-alt:         var(--cp-offwhite);
  --color-text:           var(--cp-black);
  --color-text-muted:     var(--cp-muted);
  --color-footer-bg:      var(--cp-black);
  --color-footer-text:    var(--cp-offwhite);
  --color-border:         var(--cp-border);
  --color-surface:        var(--cp-white);
  --color-surface-soft:   var(--cp-offwhite);
  --color-dark-surface:   var(--cp-charcoal);
  --color-overlay-soft:   rgba(26,26,26,.08);
  --color-overlay-mid:    rgba(26,26,26,.34);
  --color-overlay-strong: rgba(26,26,26,.72);
  --color-white-soft:     rgba(255,255,255,.76);

  /* Typografie & vorm */
  --font-heading: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --radius:       10px;
  --radius-sm:    6px;
  --shadow:       0 6px 24px rgba(0,0,0,.08);
  --shadow-sm:    0 2px 8px rgba(0,0,0,.06);
  --shadow-lg:    0 20px 70px rgba(0,0,0,.18);
  --container-max: 1280px;

  /* Bootstrap 5 overrides naar onze tokens */
  --bs-primary:        var(--color-primary);
  --bs-primary-rgb:    196,163,92;
  --bs-body-color:     var(--color-text);
  --bs-body-bg:        var(--color-bg);
  --bs-body-font-family: var(--font-body);
  --bs-border-color:   var(--color-border);
  --bs-border-radius:  var(--radius);
  --bs-link-color:     var(--color-primary-hover);
  --bs-link-hover-color: var(--cp-gold-dark);
}