/* ============================================================
   ZippyBunny · Color tokens
   A warm, monochrome "codex" palette: aged parchment paper,
   graphite/charcoal ink, sepia washes, and a single muted
   slate-blue accent. Status colors are drawn from natural
   Renaissance pigments (moss, ochre, sanguine, slate) so they
   never read as candy-bright UI chrome.
   ============================================================ */

:root {
  /* --- Paper / parchment (warm surfaces) --- */
  --paper-0: #F5EFE3; /* lightest — raised cards, page highlights */
  --paper-1: #ECE3D3; /* base parchment — default page background  */
  --paper-2: #E2D7C4; /* sunken wells, code blocks, insets         */
  --paper-3: #D6C9B2; /* deeper edge, dividers on paper            */
  --paper-4: #C7B79C; /* deepest paper edge, pressed wells         */

  /* --- Ink / graphite (text + line work, warm neutral) --- */
  --ink-900: #1C1A15; /* primary text, charcoal — near-black warm  */
  --ink-700: #3B362D; /* strong text, headings on dark             */
  --ink-500: #6B6254; /* secondary text                            */
  --ink-400: #8A8072; /* tertiary text, captions                   */
  --ink-300: #A99E8B; /* faint text, disabled, hairline on paper   */
  --ink-200: #C6BBA7; /* very faint construction lines             */
  --ink-100: #DAD0BD; /* whisper line on parchment                 */

  /* --- Sepia wash (illustration mid-tones, subtle fills) --- */
  --sepia-deep: #6E5D45;
  --sepia:      #9B8B73;
  --sepia-soft: #C4B59C;

  /* --- Accent · slate blue (the single cool note) --- */
  --slate-700: #38465A;
  --slate-600: #46566A;
  --slate-500: #5E6E82; /* primary accent, links                   */
  --slate-400: #7A8A9D;
  --slate-300: #9FACBC;
  --slate-100: #D7DDE4; /* accent tint surface                     */
  --slate-050: #EAEDF1;

  /* --- Gilt · lily-stamen gold (rare highlight only) --- */
  --gold-600: #876A35;
  --gold-500: #9C7C44; /* active dot, gilt mark, key underline      */
  --gold-200: #DECBA0;

  /* --- Nocturne (dark surfaces — warm ink, not cold black) --- */
  --night-900: #15130E;
  --night-800: #1F1B14;
  --night-700: #2A251C;
  --night-600: #3A332663;

  /* --- Cinematic cold (imagery overlays / photo tone only) --- */
  --cine-900: #20231C;
  --cine-600: #464D3E;
  --cine-300: #737767;

  /* --- Pigment status (natural-dye derived) --- */
  --moss:     #5C6B4C; /* success — sprout green                    */
  --moss-100: #DDE0CF;
  --ochre:    #9C7C44; /* warning — earth ochre / gold              */
  --ochre-100:#EADFC4;
  --sanguine: #A2543C; /* danger — red-chalk sanguine               */
  --sanguine-100:#EBD3C8;
  --slate-info:#5E6E82;/* info — slate                              */

  /* ============================================================
     Semantic aliases — reference these in components, not the
     raw scales above.
     ============================================================ */

  /* Surfaces */
  --bg-page:        var(--paper-1);
  --bg-page-alt:    var(--paper-2);
  --surface-card:   var(--paper-0);
  --surface-raised: var(--paper-0);
  --surface-sunken: var(--paper-2);
  --surface-well:   var(--paper-2);
  --surface-inverse:var(--night-900);
  --surface-accent: var(--slate-050);

  /* Text */
  --text-primary:   var(--ink-900);
  --text-secondary: var(--ink-500);
  --text-muted:     var(--ink-400);
  --text-faint:     var(--ink-300);
  --text-inverse:   var(--paper-1);
  --text-on-accent: var(--paper-0);
  --text-link:      var(--slate-500);
  --text-link-hover:var(--slate-700);

  /* Lines & borders */
  --border-whisper:   var(--ink-100);
  --border-hairline:  var(--ink-200);
  --border-default:   var(--ink-300);
  --border-strong:    var(--ink-700);
  --border-inverse:   #46412F;
  --rule-construction:var(--ink-300); /* dotted blueprint grid     */

  /* Interactive / accent */
  --accent:           var(--slate-500);
  --accent-hover:     var(--slate-600);
  --accent-press:     var(--slate-700);
  --accent-tint:      var(--slate-100);
  --mark:             var(--gold-500); /* gilt highlight            */
  --focus-ring:       var(--slate-500);
  --selection-bg:     var(--slate-100);

  /* Status */
  --success: var(--moss);
  --warning: var(--ochre);
  --danger:  var(--sanguine);
  --info:    var(--slate-500);
}