/* Drømmemail — shared visual language
   Fonts: Sora (geometric sans, UI/display) + JetBrains Mono (codes, metadata)
   Three themes share one set of variables so the glass utilities work everywhere. */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

* { box-sizing: border-box; }

/* ── Screen base ───────────────────────────────────────────── */
.screen {
  font-family: 'Sora', system-ui, sans-serif;
  position: relative;
  overflow: hidden;
  color: var(--fg);
  background: var(--bg);
  width: 100%;
  height: 100%;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}
.screen ::selection { background: var(--accent); color: var(--bg); }
.mono { font-family: 'JetBrains Mono', monospace; letter-spacing: 0; }
.screen *::-webkit-scrollbar { display: none; }
.screen * { scrollbar-width: none; }

/* ── Themes ────────────────────────────────────────────────── */
.theme-dark {
  --bg: #060607;
  --bg-soft: #0c0c0e;
  --fg: #f3f1ef;
  --muted: rgba(243,241,239,0.56);
  --faint: rgba(243,241,239,0.34);
  --ghost: rgba(243,241,239,0.16);
  --line: rgba(255,255,255,0.07);
  --line-strong: rgba(255,255,255,0.13);
  --accent: #ff7d54;
  --accent-soft: rgba(255,125,84,0.14);
  --glass: rgba(255,255,255,0.045);
  --glass-2: rgba(255,255,255,0.07);
  --glass-brd: rgba(255,255,255,0.10);
  --shadow: 0 24px 70px rgba(0,0,0,0.55);
}
.theme-paper {
  --bg: #f3f2ee;
  --bg-soft: #eceae4;
  --fg: #15140f;
  --muted: rgba(21,20,15,0.56);
  --faint: rgba(21,20,15,0.40);
  --ghost: rgba(21,20,15,0.13);
  --line: rgba(21,20,15,0.09);
  --line-strong: rgba(21,20,15,0.16);
  --accent: #15140f;
  --accent-soft: rgba(21,20,15,0.06);
  --glass: rgba(255,255,255,0.55);
  --glass-2: rgba(255,255,255,0.75);
  --glass-brd: rgba(255,255,255,0.9);
  --shadow: 0 20px 50px rgba(40,36,28,0.10);
}
.theme-flux {
  --bg: #07080f;
  --bg-soft: #0c0e1a;
  --fg: #eef1fb;
  --muted: rgba(238,241,251,0.58);
  --faint: rgba(238,241,251,0.34);
  --ghost: rgba(238,241,251,0.15);
  --line: rgba(150,170,255,0.09);
  --line-strong: rgba(150,170,255,0.16);
  --accent: #7be0ff;
  --accent-2: #b69cff;
  --accent-soft: rgba(123,224,255,0.12);
  --glass: rgba(120,140,220,0.06);
  --glass-2: rgba(120,140,220,0.10);
  --glass-brd: rgba(150,170,255,0.14);
  --shadow: 0 24px 70px rgba(0,0,0,0.5);
}

/* ── Ambient backgrounds (frosted glass needs something to blur) ─ */
.amb { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.amb-dark {
  background:
    radial-gradient(60% 50% at 78% 8%, rgba(255,125,84,0.13), transparent 70%),
    radial-gradient(50% 40% at 12% 92%, rgba(255,125,84,0.06), transparent 70%),
    radial-gradient(40% 30% at 50% 50%, rgba(120,130,150,0.05), transparent 70%);
}
.amb-paper {
  background:
    radial-gradient(70% 60% at 85% 0%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(50% 50% at 0% 100%, rgba(0,0,0,0.025), transparent 60%);
}
.amb-flux {
  background:
    radial-gradient(55% 45% at 82% 6%, rgba(123,224,255,0.16), transparent 70%),
    radial-gradient(50% 45% at 10% 96%, rgba(182,156,255,0.14), transparent 70%),
    radial-gradient(40% 30% at 50% 40%, rgba(123,224,255,0.05), transparent 70%);
}
.grain { position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E"); }

/* ── Glass utilities ───────────────────────────────────────── */
.glass {
  background: var(--glass);
  backdrop-filter: blur(34px) saturate(1.5);
  -webkit-backdrop-filter: blur(34px) saturate(1.5);
  border: 1px solid var(--glass-brd);
}
.glass-2 {
  background: var(--glass-2);
  backdrop-filter: blur(40px) saturate(1.6);
  -webkit-backdrop-filter: blur(40px) saturate(1.6);
  border: 1px solid var(--glass-brd);
}

/* ── Small shared atoms ────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 500;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  white-space: nowrap;
}
.chip-accent { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 45%, transparent); background: var(--accent-soft); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.kbd { font-family:'JetBrains Mono',monospace; font-size:11px; padding:2px 6px; border-radius:5px; border:1px solid var(--line-strong); color:var(--faint); }

/* avatars: flat monogram tiles, no photos */
.ava { display:flex; align-items:center; justify-content:center; flex:none;
  font-weight:600; border-radius:50%; letter-spacing:0; }

.hairline { height:1px; background: var(--line); border:0; margin:0; }
.tnum { font-variant-numeric: tabular-nums; }