/* Huisstijl Tacstone Technology (Brand Guidelines 2024).
   Kleuren: #ce2030 (rood), #582628 (donkerrood), #231f20 (tekst),
   #f1f2f2 (lichtgrijs), #edce9b (zand). Fonts: Bree Serif (koppen),
   Open Sans (tekst). Laadt ná variables.css en overschrijft die in elke
   modus, zodat een opnieuw gegenereerd Nodge-palet de huisstijl niet breekt.
   De huisstijl kent alleen een lichte variant. */

@font-face { font-family: 'Bree Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/bree-serif-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/open-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/open-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/open-sans-latin-700-normal.woff2') format('woff2'); }

:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
  color-scheme: light;
  --brand-red:       #ce2030;
  --brand-darkred:   #582628;
  --brand-ink:       #231f20;
  --brand-grey:      #f1f2f2;
  --brand-sand:      #edce9b;
  --brand-gradient:  linear-gradient(90deg, #582628 0%, #ce2030 100%);

  --color-text:          #231f20;
  --color-text-muted:    #5e5355;
  --color-bg:            #ffffff;
  --color-surface:       #f1f2f2;
  --color-border:        #dcdede;
  --color-primary:       #ce2030;
  --color-primary-hover: #a91a27;
  --color-primary-20:    rgba(206, 32, 48, 0.12);
  --color-secondary:     #582628;
  --color-secondary-20:  rgba(88, 38, 40, 0.12);
  --color-accent:        #edce9b;
  --color-accent-20:     rgba(237, 206, 155, 0.35);
  --color-muted-20:      rgba(94, 83, 85, 0.15);
  --color-on-primary:    #ffffff;
  --color-hover:         rgba(88, 38, 40, 0.05);
  --color-active:        #ffffff;
  --color-error:         #b3261e;
  --color-error-bg:      rgba(179, 38, 30, 0.08);

  --font-ui:      'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Bree Serif', Georgia, serif;
}

@media (prefers-color-scheme: light), (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: light;
    --color-text:          #231f20;
    --color-text-muted:    #5e5355;
    --color-bg:            #ffffff;
    --color-surface:       #f1f2f2;
    --color-border:        #dcdede;
    --color-primary:       #ce2030;
    --color-primary-hover: #a91a27;
    --color-primary-20:    rgba(206, 32, 48, 0.12);
    --color-secondary:     #582628;
    --color-secondary-20:  rgba(88, 38, 40, 0.12);
    --color-accent:        #edce9b;
    --color-accent-20:     rgba(237, 206, 155, 0.35);
    --color-muted-20:      rgba(94, 83, 85, 0.15);
    --color-on-primary:    #ffffff;
    --color-hover:         rgba(88, 38, 40, 0.05);
    --color-active:        #ffffff;
    --color-error:         #b3261e;
    --color-error-bg:      rgba(179, 38, 30, 0.08);
  }
}

h1, h2, h3, .brand-title {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--brand-darkred);
}