/* ============================================================
   Marginalia — Color tokens
   A warm, colored-pencil-on-cream palette. Everything sits on
   paper; ink is a soft warm near-black, never pure #000.
   Accents are slightly desaturated, like pressed pencil.
   ============================================================ */
:root {
  /* --- Paper (warm cream neutrals, lightest -> deepest) --- */
  --paper-0:  #FCFAF3;   /* page / app background */
  --paper-1:  #F6F0E2;   /* default surface (cards) */
  --paper-2:  #EEE6D3;   /* sunken / muted surface */
  --paper-3:  #E3D8C0;   /* hairline edges on cream */
  --paper-4:  #D4C6A8;   /* stronger edge / disabled fill */

  /* --- Ink (warm near-black -> faint) --- */
  --ink-900:  #2A2622;   /* primary text, drawn borders */
  --ink-700:  #4C453B;   /* secondary text */
  --ink-500:  #726857;   /* muted / captions */
  --ink-300:  #A89C87;   /* placeholder / disabled text */
  --ink-100:  #C9BDA4;   /* faintest ink wash */

  /* --- Colored-pencil accents (base swatches) --- */
  --pencil-ink-blue: #3F5F94;   /* ballpoint blue — primary */
  --pencil-sky:      #7BA0CC;   /* soft sky blue */
  --pencil-coral:    #C9624A;   /* terracotta coral — accent */
  --pencil-blush:    #E0A3AA;   /* soft pink */
  --pencil-ochre:    #D8A23E;   /* mustard / honey */
  --pencil-sage:     #7E9A5C;   /* leaf green */
  --pencil-forest:   #4F6B43;   /* deep green */
  --pencil-lilac:    #9A92C2;   /* periwinkle / lavender */
  --pencil-brown:    #8C5A38;   /* cocoa */

  /* --- Tints (for soft fills / wash backgrounds) --- */
  --tint-blue:   #E2E9F2;
  --tint-coral:  #F4E0D9;
  --tint-ochre:  #F6EBD0;
  --tint-sage:   #E7EDDB;
  --tint-lilac:  #EAE7F2;
  --tint-blush:  #F8E8EA;

  /* ===== Semantic aliases ===== */
  --bg-page:        var(--paper-0);
  --surface-card:   var(--paper-1);
  --surface-sunken: var(--paper-2);
  --surface-raised: #FFFDF7;

  --text-strong:    var(--ink-900);
  --text-body:      var(--ink-700);
  --text-muted:     var(--ink-500);
  --text-faint:     var(--ink-300);
  --text-on-ink:    var(--paper-0);
  --text-on-accent: #FCFAF3;

  --border-ink:     var(--ink-900);   /* the "drawn" outline */
  --border-soft:    var(--paper-3);   /* quiet hairline */
  --border-strong:  var(--paper-4);

  --brand-primary:  var(--pencil-ink-blue);
  --brand-primary-hover: #344F7C;
  --brand-accent:   var(--pencil-coral);
  --brand-accent-hover:  #B0513B;

  --color-success: var(--pencil-forest);
  --color-warning: var(--pencil-ochre);
  --color-danger:  var(--pencil-coral);
  --color-info:    var(--pencil-sky);

  --focus-ring:    var(--pencil-ink-blue);
}