/* ───────────────────────────────────────────────────────────────
   COLORS — Luca Como Design System
   A warm, paper-and-ink editorial palette. Near-black on warm
   off-white, with a single electric-purple accent reserved for
   case-study moments (stats, links, highlights).
   ─────────────────────────────────────────────────────────────── */

:root {
  /* ── Base neutrals (paper → ink) ── */
  --paper:        #f8f7f4;  /* warm off-white — the canvas */
  --card:         #ffffff;  /* pure white — raised surfaces */
  --ink:          #111111;  /* near-black — primary text */
  --ink-soft:     #333333;  /* prose body text */
  --ink-softer:   #444444;  /* secondary prose */
  --muted:        #888888;  /* captions, eyebrows, meta */
  --border:       #e0ddd8;  /* warm hairline border */
  --border-dash:  #e0ddd8;  /* dashed dividers (same hue) */

  /* ── Accent — a THEMEABLE role ──────────────────────────────────
     The neutral paper/ink chassis is constant across the whole brand;
     each case study re-themes a single accent over it. Purple is the
     portfolio's signature default. Override --accent (and optionally
     --accent-strong) at a page/section scope to retheme.            */
  --accent:        #a855f7;  /* signature electric purple (default) */
  --accent-strong: #6d28d9;  /* deep purple — gradients, hovers */
  --accent-pink:   #ec4899;  /* secondary glow */

  /* ── Per-project accents (observed across the case studies) ──
     Drop one of these into --accent to retheme a surface.          */
  --accent-purple:     #a855f7;  /* Love Is Human (signature) */
  --accent-red:        #e63946;  /* Zia Pizza */
  --accent-terracotta: #c0392b;  /* Il Mondo Travel */
  --accent-green:      #1abc54;  /* AR Door Lock */
  --accent-amber:      #f3c11b;  /* Battery House */

  /* ── Semantic ── */
  --danger:        #c0392b;  /* frustrations, errors */

  /* ── Dark stage (feature panels / mockup frames) ── */
  --stage-bg:      #0a0a0e;  /* near-black panel base */
  --stage-bg-2:    #1a0a2e;  /* purple-black gradient stop */
  --stage-chrome:  #16161c;  /* browser chrome bar */
  --stage-line:    #2a2a35;  /* dark panel hairline */
  --stage-fg:      #ffffff;
  --stage-fg-dim:  rgba(255,255,255,0.6);

  /* ── Traffic-light dots (browser frames) ── */
  --tl-red:    #ff5f57;
  --tl-yellow: #ffbd2e;
  --tl-green:  #28c840;

  /* ── Semantic surface aliases ── */
  --surface-page:   var(--paper);
  --surface-card:   var(--card);
  --surface-stage:  var(--stage-bg);

  --text-strong:    var(--ink);
  --text-body:      var(--ink-soft);
  --text-muted:     var(--muted);
  --text-accent:    var(--accent);
  --text-on-stage:  var(--stage-fg);

  --border-default: var(--border);
}