/* ═══════════════════════════════════════════════════════════════
   Pevra — "Studio" theme
   Warm, editorial, light-first. Bone-paper canvas, espresso ink,
   a single confident ember accent. Solid colour, no glass, no gradients.

   Remaps the original "Signal" CSS custom properties onto the Studio
   palette. Loaded LAST so it wins the cascade — because every view
   consumes these variables, overriding them re-themes the whole app.

   A warm-espresso dark companion lives under [data-theme="dark"].
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Surface scale ── (canvas → raised; lighter = more elevated)
     The app's "--ink-N" names are a surface ramp, not text colour. */
  --ink-0: #EDE7DC;   /* deepest inset / page gutter / track */
  --ink-1: #F6F1E9;   /* app canvas — body, rail, sidebar */
  --ink-2: #FCFAF6;   /* cards, panels */
  --ink-3: #FFFFFF;   /* raised — popover, active card, input */
  --ink-4: #FFFFFF;   /* highest raised */
  --ink-5: #FFFFFF;

  /* ── Borders → warm hairlines on the ink channel ── */
  --line:   rgba(33,28,23,.07);
  --line-2: rgba(33,28,23,.12);
  --line-3: rgba(33,28,23,.20);
  --line-4: rgba(33,28,23,.32);

  /* ── Text → warm espresso ink ramp ── */
  --fg:   #211C17;
  --fg-2: #5A5149;
  --fg-3: #6F655B;
  --fg-4: #756B61;

  /* ── Accent → ember (solid) ── */
  --accent:      #C8431F;
  --accent-d:    #A93618;
  --accent-l:    #E5552F;
  --accent-wash: rgba(200,67,31,.10);
  --accent-glow: rgba(200,67,31,.22);
  --accent-ink:  #FFFFFF;

  /* ── Mode signal hues → warm-tuned, one per workspace ── */
  --c-chat:  #C8431F;   /* chat / general — accessible brand ember */
  --c-trade: #2F9E6B;   /* portfolio / trading — forest */
  --c-web:   #2D8FB0;   /* website manager — teal */
  --c-logs:  #7A6CC4;   /* work / logs — muted indigo */
  --c-conn:  #D98A2B;   /* integrations / connect — amber */

  /* ── Status ── */
  --pos:      #2F9E6B;
  --pos-wash: rgba(47,158,107,.12);
  --neg:      #D14545;
  --neg-wash: rgba(209,69,69,.12);
  --warn:     #D98A2B;

  /* ── Soft, friendly paper radii ── */
  --r:  10px;
  --r2: 16px;
  --r3: 24px;

  /* ── Typography → Bricolage display, Geist UI, Geist Mono for code only ── */
  --display: "Bricolage Grotesque", "Geist", ui-sans-serif, system-ui, sans-serif;
  --sans: "Instrument Sans", "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --code: "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* UI labels/timestamps/figures use the warm sans, not a code face */
  --mono: var(--sans);

  /* ── Frosted topbar / composer — the ONLY transparency in the UI ── */
  --glass-bg:   rgba(252,250,246,.72);
  --glass-bg-2: rgba(246,241,233,.80);
  --glass-line: rgba(33,28,23,.08);
  --glass-blur: 14px;

  /* ── Solid ember "gradient" — keeps gradient-text helpers ember-tinted ── */
  --grad-accent: linear-gradient(135deg, #C8431F 0%, #E5552F 100%);

  /* ── Elevation → warm, soft, low-spread (paper layers, never black) ── */
  --elev-1: 0 1px 2px rgba(40,30,20,.05), 0 1px 1px rgba(40,30,20,.04);
  --elev-2: 0 4px 16px -6px rgba(40,30,20,.12), 0 1px 3px rgba(40,30,20,.06);
  --elev-3: 0 18px 44px -16px rgba(40,30,20,.20), 0 4px 12px -6px rgba(40,30,20,.10);
  --elev-glow: 0 6px 22px -6px var(--accent-glow);
  --shadow: 0 8px 32px -12px rgba(40,30,20,.18);

  /* Hover surface fills toward the sunken gutter (warm), not white */
  --bg-hover: #EFE8DD;
}

/* App canvas → barely-there warm radial aura on bone paper */
body {
  background:
    radial-gradient(1100px 700px at 88% -10%, rgba(229,85,47,.05), transparent 60%),
    radial-gradient(900px 800px at -8% 110%, rgba(217,138,43,.04), transparent 55%),
    var(--ink-1);
}

/* The original violet/glass background uses floating orbs with screen blend,
   which wash out on light paper. The aura above is enough — retire the orbs. */
.ambient { display: none !important; }

/* ── Headlines wear Bricolage Grotesque, solid ink (no gradient clip) ── */
.empty-state h1 {
  font-family: var(--display);
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--fg);
}
.empty-state h1 .accent-word {
  font-family: var(--display);
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--accent);
  animation: none;
}

/* Brand wordmarks wear Bricolage Grotesque */
.auth-title { font-family: var(--display); letter-spacing: -.025em; }

/* Accent buttons: white text on solid ember */
.btn-primary,
.send-btn,
.pf-btn-accent { color: var(--accent-ink); }

/* The brand logo loses its dark-only violet glow on paper */
.rail-logo svg,
.topbar-logo svg { filter: none; }

/* Dashboard hovers were tuned for a dark canvas — soften for paper */
.dash-card:hover { box-shadow: var(--elev-2); }
.dash-action-btn:hover { background: var(--bg-hover); }

/* ═══════════════════════════════════════════════════════════════
   DARK COMPANION — warm espresso
   Activate with <html data-theme="dark">. Same ember accent,
   inverted paper/ink. (Not enabled by default.)
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --ink-0: #100D0A;
  --ink-1: #181410;
  --ink-2: #211C17;
  --ink-3: #2A241E;
  --ink-4: #332C24;
  --ink-5: #3D352B;

  --line:   rgba(255,248,238,.07);
  --line-2: rgba(255,248,238,.13);
  --line-3: rgba(255,248,238,.22);
  --line-4: rgba(255,248,238,.32);

  --fg:   #F4EEE4;
  --fg-2: #C2B8AB;
  --fg-3: #8F857A;
  --fg-4: #635B51;

  --accent:      #F2693E;
  --accent-d:    #E5552F;
  --accent-l:    #FF8A63;
  --accent-wash: rgba(242,105,62,.12);
  --accent-glow: rgba(242,105,62,.30);
  --accent-ink:  #1A1410;

  --c-chat:  #F2693E;
  --c-trade: #43C088;
  --c-web:   #4FB3D4;
  --c-logs:  #9A8CE0;
  --c-conn:  #E8A648;

  --pos:      #43C088;
  --pos-wash: rgba(67,192,136,.14);
  --neg:      #E86A6A;
  --neg-wash: rgba(232,106,106,.14);
  --warn:     #E8A648;

  --glass-bg:   rgba(33,28,23,.72);
  --glass-bg-2: rgba(24,20,16,.80);
  --glass-line: rgba(255,248,238,.08);

  --elev-1: 0 1px 2px rgba(0,0,0,.4);
  --elev-2: 0 6px 22px -8px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4);
  --elev-3: 0 20px 48px -14px rgba(0,0,0,.65), 0 4px 12px -6px rgba(0,0,0,.5);
  --shadow: 0 4px 32px rgba(0,0,0,.5);

  --bg-hover: var(--ink-4);

  --grad-accent: linear-gradient(135deg, #F2693E 0%, #FF8A63 100%);
}

[data-theme="dark"] body {
  background:
    radial-gradient(1100px 700px at 88% -10%, rgba(242,105,62,.07), transparent 60%),
    radial-gradient(900px 800px at -8% 110%, rgba(232,166,72,.05), transparent 55%),
    var(--ink-1);
}