/* =========================================================
   Design tokens — Colors (Autogloss Detailing)

   Donker-first palet: zwarte werkplaats-canvas, bone tekst,
   goud als enige merkaccent. Afgeleid uit het concept op
   concept.leadsprint.nl/autogloss.

   Eén accentkleur is een bewuste keuze. Wil je later een
   tweede accent, voeg die toe onder BRAND en map hem op
   --color-secondary.
========================================================= */

:root {

  /* ======================================================
     BRAND — bronkleuren
  ====================================================== */

  --color-gold:        #CFB53B;
  --color-gold-dark:   #B89C2C;

  --color-ink:         #0E0E0E;  /* canvas zwart */
  --color-ink-2:       #161616;  /* iets lichter zwart */
  --color-ink-card:    #1C1B18;  /* kaartvlak, warm zwart */

  --color-bone:        #F3EFE8;  /* tekst op donker */
  --color-bone-dim:    #8E8A82;  /* subtiele tekst op donker */


  /* ======================================================
     OPPERVLAK ≠ ACCENT

     Goud op volle sterkte werkt op een knop van 40px, niet op
     een vlak van 800px: hetzelfde pigment gaat schreeuwen zodra
     het de pagina vult. Grote vlakken krijgen daarom een eigen,
     gedempte variant.

     Wat dat scheelt ten opzichte van het zwarte canvas:
       goud  9.5:1 → 7.2:1
       bone 16.8:1 → 13.7:1
     Allebei nog ruim boven AAA (7:1), dus de leesbaarheid van de
     zwarte tekst erop blijft intact.

     Let op: bij een licht vlak met zwarte tekst zijn "sprong vanaf
     het canvas" en "tekstcontrast" dezelfde meting. Verder dempen
     kost dus altijd leesbaarheid — onder 7:1 niet gaan.
  ====================================================== */

  --color-gold-surface: #B89C2C;
  --color-bone-surface: #E0D9CA;

  /* Goud als TEKST op een licht vlak. Het merkgoud haalt op crème
     maar 1.91:1 en is daar onleesbaar; deze tint haalt 4.82:1.
     Gebruik hem overal waar goud op bone of crème komt te staan. */
  --color-gold-on-light: #6B5A1A;


  /* ======================================================
     SEMANTIC BRAND (generieke namen mappen naar brand)
  ====================================================== */

  --color-primary:        var(--color-gold);
  --color-primary-dark:   var(--color-gold-dark);

  --color-secondary:      var(--color-gold);
  --color-secondary-dark: var(--color-gold-dark);

  --color-accent:         var(--color-gold);
  --color-accent-dark:    var(--color-gold-dark);


  /* ======================================================
     CANVAS
  ====================================================== */

  --color-bg: var(--color-ink);


  /* ======================================================
     SURFACES
  ====================================================== */

  --color-surface:        var(--color-ink-2);
  --color-surface-alt:    var(--color-ink-card);
  --color-surface-muted:  #221F1B;

  --color-surface-dark:   var(--color-ink);
  --color-surface-darker: #080808;

  --color-surface-light:  var(--color-bone-surface);  /* lichte sectie op donker thema */


  /* ======================================================
     TEXT
  ====================================================== */

  --color-text:           var(--color-bone);      /* body tekst op donker */
  --color-muted:          var(--color-bone-dim);  /* subtiele tekst op donker */

  --color-inverted:       var(--color-ink);       /* body tekst op licht */
  --color-inverted-muted: #55524C;


  /* ======================================================
     BORDERS
  ====================================================== */

  --color-border:       rgba(243, 239, 232, .12);  /* op donker */
  --color-border-light: #DED8CE;                   /* op licht */


  /* ======================================================
     SYSTEM (waarschuwingen etc.)
  ====================================================== */

  --color-info:    #60A5FA;
  --color-success: #34D399;
  --color-warning: #FBBF24;
  --color-danger:  #F87171;

}