/* ==========================================================================
   Horizon Studio — Color tokens
   The brand is strictly monochrome: pure ink, pure paper, and a single
   neutral gray ramp between them. No chromatic accents — contrast is the
   entire palette. High-key (paper) and low-key (ink) surfaces both ship.
   ========================================================================== */

:root {
  /* ---- Base scale: ink → paper -------------------------------------- */
  --ink:        #000000;   /* pure black — primary brand color          */
  --ink-900:    #0a0a0a;   /* near-black surface (not pure)             */
  --ink-800:    #151515;
  --ink-700:    #1f1f1f;

  --gray-600:   #3a3a3a;
  --gray-500:   #5c5c5c;
  --gray-400:   #8a8a8a;   /* mid gray — disabled / tertiary            */
  --gray-300:   #b5b5b5;
  --gray-200:   #d8d6d2;   /* hairline on paper                         */
  --gray-100:   #ebe9e4;

  --paper-50:   #f4f2ed;   /* warm off-white — default light surface    */
  --paper:      #ffffff;   /* pure white — paper / max-contrast text on ink */

  /* ---- Alpha inks (for hairlines, hovers, scrims) ------------------- */
  --ink-a-04:   rgba(0,0,0,0.04);
  --ink-a-08:   rgba(0,0,0,0.08);
  --ink-a-12:   rgba(0,0,0,0.12);
  --ink-a-24:   rgba(0,0,0,0.24);
  --ink-a-60:   rgba(0,0,0,0.60);
  --paper-a-08: rgba(255,255,255,0.08);
  --paper-a-16: rgba(255,255,255,0.16);
  --paper-a-32: rgba(255,255,255,0.32);
  --paper-a-64: rgba(255,255,255,0.64);

  /* ======================================================================
     SEMANTIC ALIASES — light theme (paper surfaces) is the default.
     ====================================================================== */

  /* Surfaces */
  --surface-page:     var(--paper-50);  /* page background               */
  --surface-card:     var(--paper);     /* raised card / panel           */
  --surface-sunken:   var(--gray-100);  /* wells, inputs                 */
  --surface-inverse:  var(--ink);       /* black blocks on a light page  */

  /* Text */
  --text-strong:    var(--ink);         /* display + headings            */
  --text-body:      var(--ink-800);     /* paragraph copy                */
  --text-muted:     var(--gray-500);    /* captions, meta, labels        */
  --text-faint:     var(--gray-400);    /* placeholders, disabled        */
  --text-on-ink:    var(--paper);       /* text on black surfaces        */
  --text-on-ink-muted: var(--paper-a-64);

  /* Lines & borders */
  --border-hair:    var(--gray-200);    /* 1px structural rule on paper  */
  --border-strong:  var(--ink);         /* full-contrast frame           */
  --border-input:   var(--gray-300);
  --border-on-ink:  var(--paper-a-16);

  /* Interaction (monochrome states — see VISUAL FOUNDATIONS) */
  --action-fill:        var(--ink);     /* primary button bg             */
  --action-fill-hover:  var(--gray-600);
  --action-text:        var(--paper);
  --action-ghost-hover: var(--ink-a-08);
  --focus-ring:         var(--ink);

  /* Scrim / protection */
  --scrim-ink:   var(--ink-a-60);       /* darken imagery for white text */
}

/* ======================================================================
   Dark theme scope — apply [data-theme="ink"] to flip a region (or the
   whole page) to the low-key palette. The brand lives equally in both.
   ====================================================================== */
[data-theme="ink"] {
  --surface-page:     var(--ink);
  --surface-card:     var(--ink-900);
  --surface-sunken:   var(--ink-800);
  --surface-inverse:  var(--paper);

  --text-strong:    var(--paper);
  --text-body:      var(--paper-a-64);
  --text-muted:     var(--gray-400);
  --text-faint:     var(--gray-500);
  --text-on-ink:    var(--ink);
  --text-on-ink-muted: var(--ink-a-60);

  --border-hair:    var(--paper-a-16);
  --border-strong:  var(--paper);
  --border-input:   var(--paper-a-32);
  --border-on-ink:  var(--ink-a-12);

  --action-fill:        var(--paper);
  --action-fill-hover:  var(--gray-200);
  --action-text:        var(--ink);
  --action-ghost-hover: var(--paper-a-08);
  --focus-ring:         var(--paper);
}