/* ===========================================================================
   Get Responsive — Colour tokens
   "Geel zet het licht aan, zwart geeft het kracht."
   Yellow + black are the leads; white is the breath. Gold (Lampgoud) and amber
   (Filament) are for DEPTH & GRADIENTS only — never as a flat fill.
   Rule of thumb: ~60 calm base / 30 opposite / 10 yellow accent.
   =========================================================================== */
:root {
  /* ---- Brand primaries ---- */
  --gr-yellow:      #FDF204;   /* GR Geel — the spark / primary accent */
  --gr-black:       #000000;   /* Diep zwart — logo, max contrast */

  /* ---- Lamp gradient accents (depth only, not flat fills) ---- */
  --gr-gold:        #FAD93C;   /* Lampgoud — warm gradient step */
  --gr-amber:       #E9A200;   /* Filament — depth / emphasis */
  --gr-yellow-deep: #C9C003;   /* Pressed-yellow — button drop shadow */

  /* ---- Neutrals ---- */
  --gr-ink:         #121210;   /* Inkt — on-screen black, slightly softer */
  --gr-ink-2:       #1D1C19;   /* Raised dark surface */
  --gr-ink-3:       #252420;   /* Dark chip / inset on dark */
  --gr-white:       #FFFFFF;
  --gr-paper:       #FAF9F4;   /* Warm white — page base */
  --gr-mist:        #F1F0EA;   /* Light panel */
  --gr-line:        #E4E2D8;   /* Hairline border on light */
  --gr-line-dark:   #2A2926;   /* Hairline border on dark */
  --gr-muted:       #6B6A63;   /* Captions on light */
  --gr-muted-dark:  #9C9A8E;   /* Captions on dark */
  --gr-gold-on-dark:#FAD93C;   /* Mono / tag text on dark */

  /* ---- Semantic aliases — light surfaces (print, docs, brochures) ---- */
  --accent:            var(--gr-yellow);
  --accent-deep:       var(--gr-amber);
  --text-strong:       var(--gr-black);
  --text-body:         #33322D;
  --text-muted:        var(--gr-muted);
  --surface-page:      var(--gr-paper);
  --surface-card:      var(--gr-white);
  --surface-panel:     var(--gr-mist);
  --border-default:    var(--gr-line);

  /* ---- Semantic aliases — dark surfaces (web default) ---- */
  --text-on-dark:        var(--gr-white);
  --text-muted-on-dark:  var(--gr-muted-dark);
  --surface-dark:        var(--gr-black);
  --surface-dark-2:      var(--gr-ink);
  --surface-dark-3:      var(--gr-ink-2);
  --border-on-dark:      var(--gr-line-dark);

  /* ---- Focus ---- */
  --focus-ring:        var(--gr-amber);
}