/* =========================================================
   Datawijs met Thijs — Design Tokens (canvas)
   Bijgewerkte huisstijl: Saira (display) + IBM Plex Sans/Mono,
   warme cream/slate. Fonts worden via <link> in canvas.html geladen.
   ========================================================= */

:root {
  /* ---------- Brand palette ---------- */
  --dmt-amber:      #F2B969;
  --dmt-ink:        #1D0C0C;
  --dmt-cream:      #FAF7F1;
  --dmt-slate:      #76716C;
  --dmt-white:      #FFFFFF;

  /* amber scale */
  --dmt-amber-50:   #FBEBC9;
  --dmt-amber-100:  #F8DDA8;
  --dmt-amber-200:  #F5CD87;
  --dmt-amber-300:  #F2B969;
  --dmt-amber-400:  #E5A34B;
  --dmt-amber-500:  #C98634;
  --dmt-amber-600:  #9E6621;
  --dmt-amber-700:  #6E4614;

  /* ink scale */
  --dmt-ink-900:    #1D0C0C;
  --dmt-ink-700:    #3A2726;
  --dmt-ink-600:    #4A4644;
  --dmt-ink-500:    #76716C;
  --dmt-ink-300:    #B8B0AC;
  --dmt-ink-100:    #E8E1D8;
  --dmt-ink-50:     #F3ECE0;

  /* semantic surfaces */
  --bg-page:        var(--dmt-cream);
  --bg-card:        var(--dmt-white);
  --bg-inverse:     var(--dmt-ink);
  --bg-accent:      var(--dmt-amber);
  --bg-subtle:      var(--dmt-ink-50);

  /* foreground */
  --fg-1:           var(--dmt-ink);
  --fg-2:           var(--dmt-slate);
  --fg-3:           var(--dmt-ink-300);
  --fg-on-accent:   var(--dmt-ink);
  --fg-on-inverse:  var(--dmt-cream);
  --fg-link:        var(--dmt-ink);
  --fg-link-hover:  var(--dmt-amber-500);

  /* borders */
  --border-subtle:  #EDE4D3;
  --border-default: #DCD1BC;
  --border-strong:  var(--dmt-ink);

  /* signals */
  --signal-positive: #3F7D4E;
  --signal-warning:  #C98634;
  --signal-negative: #A2382B;
  --signal-info:     #3A6B85;

  /* typography */
  --font-display: 'Saira', 'Arial Narrow', sans-serif;
  --font-sans:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-pill: 999px;
}