/* ============================================================
   COLORS — H.J × r.k "PEEPHOLE"
   Two absolutes and a generative accent.
   White is a LID, ink is what's underneath. Accent hues are
   NOT fixed: set --hue per visit (JS: random 0–360) and the
   whole palette rotates. Chroma/lightness are the brand;
   hue is serendipity.
   ============================================================ */

:root {
  /* --- Absolutes --- */
  --paper: #ffffff;   /* the lid — default page background        */
  --ink:   #0b0b0e;   /* underneath — text, borders, dark surface */

  /* --- Generative accent system --- */
  /* set per visit: doc.style.setProperty('--hue', Math.random()*360) */
  --hue:    20;       /* @kind other */
  --chroma: 0.19;     /* @kind other */
  --accent-1: oklch(0.72 var(--chroma) var(--hue));           /* primary   */
  --accent-2: oklch(0.72 var(--chroma) calc(var(--hue) + 55));  /* neighbour */
  --accent-3: oklch(0.72 var(--chroma) calc(var(--hue) + 110)); /* stranger  */
  --accent-bright: oklch(0.80 0.16 var(--hue));               /* on ink bg */
  --accent-deep:   oklch(0.55 var(--chroma) var(--hue));      /* pressed   */

  /* --- Ink opacities (the only "grays") --- */
  --ink-80: rgba(11, 11, 14, 0.80);   /* body text        */
  --ink-60: rgba(11, 11, 14, 0.60);   /* meta, captions   */
  --ink-40: rgba(11, 11, 14, 0.40);   /* placeholder      */
  --ink-15: rgba(11, 11, 14, 0.15);   /* faint rules      */
  --paper-85: rgba(255, 255, 255, 0.85);
  --paper-60: rgba(255, 255, 255, 0.60);

  /* --- Functional (used rarely; forms only) --- */
  --danger:  oklch(0.58 0.21 25);
  --success: oklch(0.60 0.15 155);

  /* ===== Semantic aliases ===== */
  --text-strong:   var(--ink);
  --text-body:     var(--ink-80);
  --text-muted:    var(--ink-60);
  --text-inverse:  #ffffff;

  --surface-page:    var(--paper);
  --surface-inverse: var(--ink);

  --border-ink:   var(--ink);       /* structural 1.5px lines     */
  --border-faint: var(--ink-15);    /* only inside dense UI       */

  --accent:          var(--accent-1);
  --accent-contrast: #ffffff;

  --focus-ring: color-mix(in srgb, var(--accent-1) 55%, transparent);
  --selection-bg: var(--accent-1);
  --selection-fg: #ffffff;
}