/* Kana Studio — Color system.
   Editorial, film-led. Near-black grounds, a controlled gray ramp, a single
   warm "film" accent used sparingly. Minimal color by design. */

:root {
  /* ── Base ink ramp (near-black → white) ───────────────────────────── */
  --ink-000: #000000;   /* true black — deepest grounds */
  --ink-050: #0a0a0a;   /* primary page background */
  --ink-100: #121212;   /* raised surface */
  --ink-200: #1a1a1a;   /* card / panel */
  --ink-300: #262626;   /* hairline-heavy surface, inputs */
  --ink-400: #3a3a3a;   /* borders on dark */
  --ink-500: #5c5c5c;   /* disabled ink, faint captions */
  --ink-600: #8a8a8a;   /* muted / secondary text on dark */
  --ink-700: #b5b5b5;   /* tertiary headings, meta */
  --ink-800: #d9d9d9;   /* body on dark */
  --ink-900: #f2f2f2;   /* near-white */
  --paper:   #ffffff;   /* pure white — headlines, inverted grounds */

  /* ── Accent — a single warm film tone, used with restraint ────────── */
  --accent:        #c8452b;  /* muted cinema red-orange */
  --accent-soft:   #e0674e;
  --accent-ink:    #ffffff;  /* text on accent */

  /* ── Semantic aliases (dark-first, the brand's default) ───────────── */
  --bg-page:        var(--paper);
  --bg-elevated:    #f5f5f5;
  --surface-card:   #efefef;
  --surface-input:  #f3f3f3;

  --text-primary:   var(--ink-050);
  --text-body:      var(--ink-200);
  --text-muted:     var(--ink-500);
  --text-faint:     #9a9a9a;
  --text-inverse:   var(--paper);

  --border-hairline: rgba(0, 0, 0, 0.14);
  --border-strong:   rgba(0, 0, 0, 0.42);
  --border-on-light: rgba(0, 0, 0, 0.14);

  --focus-ring: var(--ink-050);

  /* ── Light / inverted scope (rare — press kits, docs) ─────────────── */
  --bg-light:        var(--paper);
  --text-on-light:   var(--ink-050);
  --muted-on-light:  var(--ink-500);
}

/* Dark surface — opt in with class="on-dark" for black-ground blocks.
   Remaps the full semantic set so components render correctly on near-black. */
.on-dark {
  --bg-page: var(--ink-050);
  --bg-elevated: var(--ink-100);
  --surface-card: var(--ink-200);
  --surface-input: var(--ink-300);
  --text-primary: var(--paper);
  --text-body: var(--ink-800);
  --text-muted: var(--ink-600);
  --text-faint: var(--ink-500);
  --text-inverse: var(--ink-050);
  --border-hairline: var(--ink-400);
  --border-strong: var(--ink-600);
  --focus-ring: var(--paper);
  color: var(--text-body);
  background: var(--bg-page);
}

/* Legacy alias — `.on-light` now matches the default ground (kept as no-op). */
.on-light {
  color: var(--text-body);
  background: var(--bg-page);
}