/* ═══════════════════════════════════════════════════════════
   Theme: Mano (unified)
   Used by: all screens — chat, editorial, directory, canvas
   Aesthetic: warm paper · SF Pro body · MSerif display · sage bubble
   Requires: tokens.css loaded first

   Context overrides:
     [data-view="chat"]     — bubble vars active, action = blue
     [data-view="editorial"] — display font active on h1/h2, action = ink
   ═══════════════════════════════════════════════════════════ */

:root {

  /* ── Surfaces ──────────────────────────────────────────── */
  --theme-bg:           var(--palette-warm-50);    /* #F7F6F3 — warm paper */
  --theme-surface:      var(--palette-white);
  --theme-surface-rgb:  255, 255, 255;             /* for glass rgba() usage */
  --theme-surface-soft: var(--palette-warm-100);   /* #F0EFEC — recessed, hover, icon bg */
  --theme-surface-tab:  var(--palette-warm-100);
  --theme-surface-code: #FAFAF8;

  /* ── Text ──────────────────────────────────────────────── */
  --theme-text:         var(--palette-warm-900);   /* #1A1A1A */
  --theme-text-muted:   var(--palette-warm-500);   /* #8A8580 */
  --theme-text-faint:   var(--palette-warm-600);   /* #6B6762 */
  --theme-text-sep:     var(--palette-warm-400);   /* #BFBCB7 */
  --theme-text-snippet: var(--palette-warm-700);   /* #555555 */
  --theme-text-on-dark: var(--palette-warm-50);

  /* ── Border ────────────────────────────────────────────── */
  --theme-border:       var(--palette-warm-300);   /* #E8E6E1 */

  /* ── Action ────────────────────────────────────────────── */
  --theme-action:       var(--palette-warm-900);   /* #1A1A1A — near-black default */
  --theme-action-fg:    var(--palette-warm-50);

  /* ── Chat bubbles ──────────────────────────────────────── */
  --theme-bubble-incoming:     var(--palette-white);
  --theme-bubble-outgoing:     var(--palette-green-sage);      /* #C8DFC8 */
  --theme-bubble-text-out:     var(--palette-green-sage-dark); /* #4A7A5A */
  --theme-radius-bubble-out:   18px 18px 4px 18px;
  --theme-radius-bubble-in:    18px 18px 18px 4px;

  /* ── Semantic ──────────────────────────────────────────── */
  --theme-highlight:    var(--palette-yellow);
  --theme-success:      var(--palette-green);
  --theme-danger:       var(--palette-red);
  --theme-star:         var(--palette-amber);
  --theme-star-bg:      var(--palette-amber-soft);
  --theme-code-bg:      var(--palette-ink);

  /* ── Typography ────────────────────────────────────────── */
  --theme-font-body:    var(--font-system);        /* SF Pro on Apple, system elsewhere */
  --theme-font-display: var(--font-serif);         /* MSerif — h1, h2 in editorial views */
  --theme-font-mono:    var(--font-mono);
  --theme-font-size:    var(--text-lg);            /* 15px base */
  --theme-line-height:  var(--leading-normal);     /* 1.45 */

  /* ── Glass morphism ────────────────────────────────────── */
  --glass-bg:          rgba(255, 255, 255, 0.38);
  --glass-border:      rgba(255, 255, 255, 0.75);
  --glass-filter:      blur(40px) saturate(2.2) brightness(1.08);
  --glass-shadow:
    0 2px 16px rgba(0,0,0,0.08),
    0 1px 3px rgba(0,0,0,0.05),
    inset 0 1px 0 rgba(255,255,255,0.6);

  /* ── Dark pill (ink-on-light surfaces) ─────────────────── */
  --pill-dark-bg:      var(--palette-ink);
  --pill-dark-border:  rgba(255, 255, 255, 0.1);
  --pill-dark-shadow:  0 2px 12px rgba(0,0,0,0.25), 0 1px 3px rgba(0,0,0,0.12);

  /* ── Overlay backgrounds ────────────────────────────────── */
  --overlay-dim:       rgba(0, 0, 0, 0.25);   /* context menu scrim */
  --overlay-panel:     rgba(0, 0, 0, 0.35);   /* panel overlay */
  --overlay-drawer:    rgba(0, 0, 0, 0.40);   /* drawer backdrop */

  /* ── Inline bubble glass (reply quotes, waveform) ──────── */
  --bubble-glass-bg:       rgba(255, 255, 255, 0.15);
  --bubble-glass-border:   rgba(255, 255, 255, 0.70);
  --bubble-glass-bar:      rgba(255, 255, 255, 0.70);
  --bubble-glass-text:     rgba(255, 255, 255, 0.85);

  /* ── Misc surface rgba ──────────────────────────────────── */
  --overlay-reaction-out:  rgba(0, 0, 0, 0.15);   /* outgoing bubble reaction chip */
  --overlay-reaction-in:   rgba(0, 0, 0, 0.08);   /* incoming bubble reaction chip */
  --overlay-scrollbar:     rgba(0, 0, 0, 0.20);   /* scrollbar thumb */
  --overlay-separator:     rgba(0, 0, 0, 0.08);   /* hairline separators */

  /* ── Context menu card ──────────────────────────────────── */
  --ctx-menu-bg:       rgba(255, 255, 255, 0.97);
  --ctx-menu-filter:   blur(20px);

  /* ── Canvas panel shadow ────────────────────────────────── */
  --canvas-panel-shadow: -8px 0 40px rgba(0,0,0,0.22), -2px 0 8px rgba(0,0,0,0.10);

  /* ── Shadows ───────────────────────────────────────────── */
  --theme-shadow:       var(--shadow-xs);
  --theme-shadow-raise: var(--shadow-md);

  /* ── Radii ─────────────────────────────────────────────── */
  --theme-radius-card:  var(--radius-xl);    /* 12px */
  --theme-radius-item:  var(--radius-lg);    /* 10px */
  --theme-radius-input: var(--radius-lg);    /* 10px */
  --theme-radius-btn:   var(--radius-full);  /* pill */
}