/* =========================================================
   ANGARA OS — LIGHT MODE  (v79-aligned)
   Register: warm linen / paper-and-ink.
   Silk renders in warm linen (#c4aa78) at 0.15 opacity.
   Glass cards use a frosted-warm look over the silk.
   ========================================================= */

body.light {
  /* ── Primitive overrides ─────────────────────────────── */
  --coal:   var(--bone);      /* page bg → #fdfbf6            */
  --coal-2: #f5ede0;          /* lifted card surface          */
  --coal-3: #fdf8ef;          /* modal bg                     */

  /* Re-resolve the surface indirection layer. These aliases are declared in
     :root as var(--coal*), so they computed against the DARK coal values at
     :root scope and inherited down unchanged — overriding --coal alone never
     reached them. Re-declaring here rebinds them to the light coal values. */
  --void:      var(--coal);
  --void-2:    var(--coal-2);
  --void-3:    var(--coal-3);
  --surface-1: var(--void);
  --surface-2: var(--void-2);

  --hl-1: rgba(26,20,16,0.08);
  --hl-2: rgba(26,20,16,0.16);

  /* Glass layers flip — translucent warm-white over linen silk */
  --glass-1:             rgba(255,255,255,0.45);
  --glass-2:             rgba(255,255,255,0.65);
  --glass-3:             rgba(255,255,255,0.82);
  --glass-border:        var(--hl-1);
  --glass-border-bright: var(--hl-2);
  --hairline:            var(--hl-1);
  --hairline-strong:     var(--hl-2);

  /* Text → ink */
  --text:   #1a1410;
  --text-1: #1a1410;
  --text-2: rgba(26,20,16,0.72);
  --text-3: rgba(26,20,16,0.52);
  --text-4: rgba(26,20,16,0.32);

  /* Ember in light — slightly deeper, still warm gold */
  --ember:      #995838;
  --ember-2:    #6e3d22;
  --ember-3:    #b06640;
  --ember-soft: rgba(153,88,56,0.10);
  --ember-glass:rgba(153,88,56,0.06);

  /* Money colours — denser for ink-on-paper legibility */
  --bay:     #446b54;
  --cinder:  #8a3e2d;
  --saffron: #7a5e22;

  /* Re-map semantic aliases */
  --accent:        var(--ember);
  --accent-2:      var(--ember-2);
  --accent-3:      var(--ember-3);
  --accent-soft:   var(--ember-soft);
  --accent-strong: rgba(153,88,56,0.20);
  --accent-glow:   rgba(153,88,56,0.40);
  --on-accent:     var(--bone);

  --green:  var(--bay);     --green-glass:  rgba(68,107,84,0.12);
  --red:    var(--cinder);  --red-glass:    rgba(138,62,45,0.12);
  --yellow: var(--saffron); --yellow-glass: rgba(122,94,34,0.10);
  --blue:   var(--ember);   --blue-glass:   var(--ember-soft);
  --purple: var(--ember);   --purple-glass: var(--ember-soft);
  --rouge:  var(--cinder);  --rouge-glass:  rgba(138,62,45,0.12);
}

/* Vignette: softer, warm-tinted — silk shows through the centre,
   cream deepens toward the edges. */
body.light::before {
  background:
    radial-gradient(
      140% 120% at 50% 10%,
      transparent 25%,
      rgba(253,251,246,0.35) 55%,
      rgba(253,251,246,0.75) 100%
    ),
    radial-gradient(
      ellipse 120% 70% at 15% -15%,
      rgba(153,88,56,0.10) 0%,
      transparent 52%
    );
}

/* Paper grain — fine fibrous texture, multiply blend over the
   warm linen silk so both read as the same material. */
body.light::after {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.36 0 0 0 0 0.27 0 0 0 0 0.16 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.6'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  opacity: 0.80;
  mix-blend-mode: multiply;
}

/* ── Silk canvas opacity handled by silk.js updateSilkTheme() ── */

/* ── Topbar ─────────────────────────────────────────────── */
body.light .topbar {
  background: rgba(253,251,246,0.88);
  border-bottom-color: rgba(26,20,16,0.14);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
}
body.light .tab:hover { background: rgba(26,20,16,0.05); color: var(--text); }
body.light .tab.active { color: var(--accent); }
body.light .tab.active::after { background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }

/* ── Cards: frosted warm-white over linen silk ──────────── */
body.light .card {
  background: var(--glass-1);
  border-color: rgba(26,20,16,0.10);
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
}
body.light .card:hover { border-color: rgba(26,20,16,0.20); }
body.light .card::before {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7) 40%, rgba(255,255,255,0.7) 60%, transparent);
}

/* ── Hero ───────────────────────────────────────────────── */
body.light .hero-cash {
  border-bottom-color: rgba(26,20,16,0.10);
}
body.light .hero-tile {
  background: var(--glass-1);
  border-color: rgba(26,20,16,0.12);
}
body.light .hero-tile:hover { border-color: rgba(26,20,16,0.22); }
body.light .hero-tile.cash {
  background: linear-gradient(135deg, rgba(153,88,56,0.14) 0%, rgba(255,255,255,0.55) 65%);
  border-color: rgba(153,88,56,0.26);
}
body.light .hero-tile.expenses {
  background: linear-gradient(135deg, rgba(138,62,45,0.07) 0%, rgba(255,255,255,0.55) 65%);
  border-color: rgba(138,62,45,0.16);
}
body.light .hero-tile.pipeline {
  background: linear-gradient(135deg, rgba(122,94,34,0.07) 0%, rgba(255,255,255,0.55) 65%);
  border-color: rgba(122,94,34,0.16);
}

/* ── Journal groups ─────────────────────────────────────── */
body.light .journal-group { background: var(--glass-1); border-color: rgba(26,20,16,0.10); }
body.light .journal-group:hover { border-color: rgba(26,20,16,0.20); }
body.light .journal-group.open { border-color: rgba(153,88,56,0.30); }
body.light .journal-header { background: transparent; }
body.light .journal-header:hover { background: rgba(26,20,16,0.04); }
body.light .je-line { border-bottom-color: rgba(26,20,16,0.08); }
body.light .je-line:hover { background: rgba(153,88,56,0.05); }
body.light .journal-footer { background: rgba(26,20,16,0.04); }
body.light .ledger-drawer  { background: rgba(153,88,56,0.06); }
body.light .line-ledger    { background: rgba(26,20,16,0.04); }

/* ── Badges ─────────────────────────────────────────────── */
body.light .badge-green  { background: rgba(68,107,84,0.14);  color: #2a5540; border-color: rgba(68,107,84,0.22); }
body.light .badge-red    { background: rgba(138,62,45,0.14);  color: #6a2810; border-color: rgba(138,62,45,0.22); }
body.light .badge-yellow { background: rgba(122,94,34,0.14);  color: #4a3800; border-color: rgba(122,94,34,0.20); }
body.light .badge-blue   { background: rgba(153,88,56,0.12);  color: #6e3d22; border-color: rgba(153,88,56,0.20); }
body.light .badge-rouge  { background: rgba(138,62,45,0.14);  color: #6a2810; border-color: rgba(138,62,45,0.22); }
body.light .badge-purple { background: rgba(153,88,56,0.12);  color: #6e3d22; border-color: rgba(153,88,56,0.20); }
body.light .badge-accent { background: rgba(153,88,56,0.12);  color: #6e3d22; border-color: rgba(153,88,56,0.22); }

/* ── JID tag ────────────────────────────────────────────── */
body.light .jid-tag  { border-color: rgba(153,88,56,0.28); color: var(--ember-2); background: var(--ember-glass); }
body.light .jid-tag:hover { background: var(--ember-soft); border-color: var(--accent); }
body.light .jh-id    { color: var(--accent); background: var(--ember-soft); border-color: rgba(153,88,56,0.22); }

/* ── Tables ─────────────────────────────────────────────── */
body.light th  { color: var(--text-3); }
body.light td  { border-bottom-color: rgba(26,20,16,0.08); }
body.light tr:hover td { background: rgba(153,88,56,0.05); }
body.light thead tr { border-bottom-color: rgba(26,20,16,0.14); }

/* ── Warning banner ─────────────────────────────────────── */
body.light .data-warn {
  background: rgba(122,94,34,0.10);
  border-color: rgba(122,94,34,0.26);
  color: var(--saffron);
}

/* ── Modals ─────────────────────────────────────────────── */
body.light .modal-overlay { background: rgba(26,20,16,0.45); }
body.light .modal {
  background: #fdf8ef;
  border-color: rgba(26,20,16,0.16);
  box-shadow: 0 24px 80px rgba(26,20,16,0.20);
}
body.light .modal-actions {
  background: #fdf8ef;
  border-top-color: rgba(26,20,16,0.10);
}
body.light #undoBanner {
  background: rgba(253,248,239,0.96);
  border-color: rgba(26,20,16,0.18);
  box-shadow: 0 12px 36px rgba(26,20,16,0.18);
  color: var(--text);
}
body.light #undoBanner button { background: var(--accent); }

/* ── Forms ──────────────────────────────────────────────── */
body.light .search-input { background: rgba(255,255,255,0.65); border-color: rgba(26,20,16,0.12); }
body.light .search-input:focus { background: rgba(255,255,255,0.95); }
body.light .form-group input,
body.light .form-group select,
body.light .form-group textarea { background: rgba(255,255,255,0.60); border-color: rgba(26,20,16,0.12); }
body.light .form-group input:focus,
body.light .form-group select:focus,
body.light .form-group textarea:focus { background: rgba(255,255,255,0.95); }
body.light .form-group select option { background: #fdf8ef; color: var(--text); }
body.light .fg input, body.light .fg select, body.light .fg textarea {
  background: rgba(255,255,255,0.55); border-color: rgba(26,20,16,0.12);
}

/* ── Chat ───────────────────────────────────────────────── */
body.light .chat-wrap { background: var(--glass-1); border-color: rgba(26,20,16,0.12); }
body.light .chat-footer { background: rgba(255,255,255,0.55); border-top-color: rgba(26,20,16,0.10); }
body.light .chat-footer textarea { background: rgba(255,255,255,0.65); border-color: rgba(26,20,16,0.12); }
body.light .chat-footer textarea:focus { background: rgba(255,255,255,0.95); }
body.light .cmsg.ai .cmsg-bubble { background: rgba(255,255,255,0.70); border-color: rgba(26,20,16,0.10); }
body.light .cmsg.user .cmsg-bubble {
  background: linear-gradient(135deg, var(--ember-soft) 0%, rgba(153,88,56,0.13) 100%);
  border-color: rgba(153,88,56,0.28);
}

/* ── Bottom nav ─────────────────────────────────────────── */
body.light .bottom-nav {
  background: rgba(253,251,246,0.94);
  border-top-color: rgba(26,20,16,0.14);
}

/* ── Buttons ────────────────────────────────────────────── */
body.light .btn-ghost {
  background: rgba(255,255,255,0.55);
  border-color: rgba(26,20,16,0.14);
}
body.light .btn-ghost:hover {
  background: var(--ember-soft);
  border-color: var(--accent);
  color: var(--accent);
}
body.light .btn-primary { color: var(--on-accent); }
body.light .btn-primary:hover { background: var(--ember-2); }

/* ── Icon buttons ───────────────────────────────────────── */
body.light .icon-btn { background: rgba(255,255,255,0.60); border-color: rgba(26,20,16,0.14); color: var(--text-2); }
body.light .icon-btn:hover { background: var(--ember-soft); border-color: var(--accent); color: var(--accent); }

/* ── Month / filter selects ─────────────────────────────── */
body.light #globalMonth { background: rgba(255,255,255,0.65); border-color: rgba(26,20,16,0.14); }
body.light #recordsFilter { background: rgba(255,255,255,0.65); border-color: rgba(26,20,16,0.14); color: var(--text); }

/* ── Scrollbar ──────────────────────────────────────────── */
body.light ::-webkit-scrollbar-thumb       { background: rgba(26,20,16,0.18); }
body.light ::-webkit-scrollbar-thumb:hover { background: rgba(26,20,16,0.30); }

/* ── Search results ─────────────────────────────────────── */
body.light #searchResults {
  background: #fdf8ef;
  border-color: rgba(26,20,16,0.18);
  box-shadow: 0 16px 40px rgba(26,20,16,0.18);
}
body.light .search-result-item { border-bottom-color: rgba(26,20,16,0.08); }
body.light .search-result-item:hover { background: rgba(153,88,56,0.07); }

/* ── Toast / sync ───────────────────────────────────────── */
body.light #toast {
  background: rgba(253,248,239,0.98);
  border-color: rgba(26,20,16,0.18);
  border-left-color: var(--text-3);
  color: var(--text);
  box-shadow: 0 12px 28px rgba(26,20,16,0.16);
  backdrop-filter: none;
}
body.light #toast.ok   { border-left-color: var(--green); color: var(--green); }
body.light #toast.err  { border-left-color: var(--red);   color: var(--red);   }
body.light #toast.warn { border-left-color: var(--yellow); color: var(--yellow); }
body.light #sync-pill  {
  background: rgba(255,255,255,0.80);
  border-color: rgba(26,20,16,0.14);
  color: var(--text-3);
  box-shadow: 0 4px 12px rgba(26,20,16,0.08);
  backdrop-filter: none;
}

/* ── Lock screen ────────────────────────────────────────── */
body.light .lock-card { background: rgba(255,255,255,0.70); border-color: rgba(26,20,16,0.14); backdrop-filter: blur(24px) saturate(130%); }
body.light .lock-input { background: rgba(255,255,255,0.65); border-color: rgba(26,20,16,0.14); }
body.light .lock-input:focus { background: rgba(255,255,255,0.95); }
body.light .lock-btn { color: var(--on-accent); }

/* ── Template cards ─────────────────────────────────────── */
body.light .template-card { background: rgba(255,255,255,0.55); }
body.light .template-card:hover { background: var(--ember-soft); border-color: var(--accent); }

/* ── Floating menu / palette ────────────────────────────── */
body.light .menu-pop { background: #fdf8ef; border-color: rgba(26,20,16,0.18); box-shadow: 0 12px 32px rgba(26,20,16,0.18); }
body.light .menu-item:hover { background: rgba(153,88,56,0.08); color: var(--accent); }
body.light .cmd-pal { background: #fdf8ef; border-color: rgba(26,20,16,0.18); box-shadow: 0 32px 80px rgba(26,20,16,0.22); }
body.light .cmd-pal-overlay { background: rgba(26,20,16,0.38); }
body.light .kbd { background: rgba(255,255,255,0.80); border-color: rgba(26,20,16,0.18); box-shadow: 0 1px 0 rgba(255,255,255,0.9); color: var(--text); }
body.light .kbd-row { border-bottom-color: rgba(26,20,16,0.07); }

/* ── SVG icon theme swap (CSS handles it) ───────────────── */
body.light .icon-btn .ico-moon { display: inline; }
body.light .icon-btn .ico-sun  { display: none; }
.icon-btn .ico-moon { display: none; }
.icon-btn .ico-sun  { display: inline; }