/* Mailer webmail — Vellum skin. The default template's "dress": palette, fonts
   and decoration layered over base.css's structure. Aesthetic: warm
   correspondence — email as letters on cream paper, Fraunces serif for human
   content, Hanken Grotesk for chrome, oxblood wax-seal accent, letterpress
   hairlines, candlelight dark mode. Self-hosted fonts (zero phone-home).

   The decoration below is projected onto base.css's REAL production hooks
   (.card/.brand/.sub, .topbar .brand, .folder.active, .avatar, .reader/
   .msubject/.mmeta/.mbody, .compose-btn) — pseudo-elements stand in where the
   markup has no dedicated node (wax seal, deckle keyline, paper grain). */

/* ---------- self-hosted variable fonts ---------- */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/fraunces-full-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/fraunces-full-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/hanken-grotesk-normal.woff2") format("woff2");
}

/* ---------- design tokens: light (parchment) ---------- */
:root {
  color-scheme: light dark;

  --bg: #f1e9d8;          /* paper canvas */
  --card: #fbf6eb;        /* raised paper (topbar, cards, surfaces) */
  --sidebar: #ece2cf;     /* sunk paper (rails, wells) */
  --fg: #2a2520;          /* ink */
  --muted: #6a6051;       /* ink, softened */
  --border: #e2d7c1;      /* letterpress rule */
  --rule-strong: #cfc1a4; /* heavier rule */

  --primary: #7e2d27;     /* oxblood (wax seal) */
  --primary-fg: #fbf6eb;  /* cream on oxblood */
  --accent: #e7dbc0;      /* warm parchment highlight (active/selected) */
  --danger: #b23a2e;      /* brick alert (distinct from oxblood) */
  --hover: #e6dbc6;       /* warm hover wash */

  --star: #a6791f;        /* gold */
  --ok: #3f7a34;          /* leaf green (status) */
  --ok-wash: color-mix(in srgb, #3f7a34 15%, transparent);
  --sel: #e7dbc0;         /* text selection */
  --avatar-fg: #fbf6eb;   /* cream on ink-toned avatars */

  --radius: 0.5rem;
  --topbar-h: 3.25rem;
  --sidebar-w: 16rem;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* avatar hues — warm, ink-like, all carry cream text */
  --av0: #7e2d27; --av1: #a6791f; --av2: #5e6b33; --av3: #2f6b66;
  --av4: #3d4a7a; --av5: #73345a; --av6: #9a5524; --av7: #4a5560;

  /* wax-seal disc (shared by topbar + login) */
  --seal: radial-gradient(circle at 35% 30%,
            color-mix(in srgb, var(--primary) 78%, #fff 22%),
            var(--primary) 70%);
  --seal-emboss: inset 0 1px 1px rgba(255,255,255,0.25),
                 inset 0 -2px 3px rgba(0,0,0,0.25),
                 0 1px 2px rgba(0,0,0,0.12);
}

/* ---------- design tokens: dark (candlelight) ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1613;
    --card: #221c18;
    --sidebar: #15110e;
    --fg: #efe5d4;
    --muted: #b4a892;
    --border: #342b23;
    --rule-strong: #463a2f;

    --primary: #c8705c;     /* terracotta — oxblood lifted for candlelight */
    --primary-fg: #1a1613;
    --accent: #322a22;
    --danger: #e08070;
    --hover: #2a221c;

    --star: #d8a53e;
    --ok: #7fa86a;
    --ok-wash: color-mix(in srgb, #7fa86a 18%, transparent);
    --sel: #3a2f22;
    --avatar-fg: #1a1613;   /* dark ink on the lifted avatar hues */

    --av0: #c8705c; --av1: #d8a53e; --av2: #93a05c; --av3: #5ba39b;
    --av4: #7e8ac0; --av5: #b86a95; --av6: #cf8a55; --av7: #8a95a2;
  }
}

/* let Fraunces' optical-size axis track the rendered size */
html { font-optical-sizing: auto; }
::selection { background: var(--sel); color: var(--fg); }

/* paper grain — a very faint fibre tooth over everything (atmosphere, not
   structure, so it needs no markup hook). Sits above content but inert. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.022; mix-blend-mode: multiply;
}
@media (prefers-color-scheme: dark) {
  body::before { opacity: 0.05; mix-blend-mode: overlay; }
}

/* ---------- avatar palette + wax-stamp emboss ---------- */
.avatar.c0 { background: var(--av0); } .avatar.c1 { background: var(--av1); }
.avatar.c2 { background: var(--av2); } .avatar.c3 { background: var(--av3); }
.avatar.c4 { background: var(--av4); } .avatar.c5 { background: var(--av5); }
.avatar.c6 { background: var(--av6); } .avatar.c7 { background: var(--av7); }
.avatar {
  font-family: var(--serif); font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12), inset 0 -2px 4px rgba(0,0,0,0.16);
}

/* ---------- serif on human-facing text (the "letters") ---------- */
.card .brand,
.topbar .brand,
.msubject,
.ctitle, .catitle, .stitle, .cform .stitle, .modal-head h2,
.mbody, .rte,
.composehead, .field.subj input,
.mailrow .from, .tfrom, .convfrom, .cname {
  font-family: var(--serif);
}
.topbar .brand { font-weight: 600; font-size: 1.3rem; letter-spacing: 0.005em;
  font-variation-settings: "SOFT" 30, "opsz" 40; }
/* sender reads as the correspondent's name (serif); subject stays sans for
   contrast — the two lines must not blur into one typeface. */
.mailrow .from { font-size: 1rem; }
.mailrow .r2 { color: var(--muted); }

/* ---------- topbar: wax seal beside the wordmark + pressed rule ---------- */
.topbar { box-shadow: 0 1px 0 color-mix(in srgb, var(--rule-strong) 45%, transparent); }
.topbar .brand { display: inline-flex; align-items: center; gap: 0.55rem; }
.topbar .brand::before {
  content: ""; flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--seal); box-shadow: var(--seal-emboss);
}

/* ---------- top nav: active tab = oxblood underline, not a pill ---------- */
.navitem { position: relative; }
.navitem.active { background: transparent; }
.navitem.active::after {
  content: ""; position: absolute; left: 0.7rem; right: 0.7rem; bottom: 0.18rem; height: 2px;
  background: var(--primary); border-radius: 2px;
}

/* ---------- login: letterhead — candle wash, wax seal, deckle keyline ---------- */
body.auth {
  background:
    radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--primary) 7%, transparent), transparent 60%),
    var(--sidebar);
}
.card {
  position: relative;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 0.875rem;
  box-shadow: 0 10px 34px color-mix(in srgb, #000 14%, transparent);
}
/* deckle inner keyline — a second hairline a few px inside the edge */
.card::after {
  content: ""; position: absolute; inset: 7px; pointer-events: none;
  border: 1px solid var(--border); border-radius: 0.6rem;
}
/* wax seal stamped above the wordmark */
.card .brand::before {
  content: ""; display: block; width: 3rem; height: 3rem; margin: 0 auto 0.9rem;
  border-radius: 50%; background: var(--seal); box-shadow: var(--seal-emboss);
}
.card .brand { font-weight: 600; font-size: 1.9rem; letter-spacing: 0.005em; line-height: 1.06;
  font-variation-settings: "SOFT" 32, "opsz" 90; }
/* the welcome line reads as an engraved tagline */
.card .sub {
  font-family: var(--serif); font-style: italic; color: var(--muted);
  font-size: 0.98rem; margin: 0.25rem 0 1.6rem;
}
.loginform { text-align: left; }

/* ---------- folder rail: active gets an oxblood ribbon ---------- */
.folder { position: relative; }
.folder.active::before {
  content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px;
  background: var(--primary); border-radius: 0 3px 3px 0;
}
/* folder glyphs: quiet ink, the active one lit oxblood like its ribbon */
.folder .fic { color: var(--muted); }
.folder.active .fic { color: var(--primary); }

/* rail divider: a pressed hairline + a small engraved section caption between
   the system mailboxes and the user's own folders */
.railsep {
  height: 1px; margin: 0.6rem 0.55rem 0.2rem;
  background: var(--rule-strong);
  box-shadow: 0 1px 0 var(--card);
}
.railhead {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted); padding: 0.15rem 0.6rem 0.35rem;
}

/* ---------- mail list: unread = wax bead (active bar lives in base.css) ------ */
/* the unread marker is a tiny pressed wax bead, not a vertical bar — the left
   bar now means "open/active" (base.css), which fixes the old unread/active mix-up. */
.mailrow.unread .wax {
  background: var(--seal); box-shadow: var(--seal-emboss),
    0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}

/* ---------- reader = the opened letter ---------- */
.reader {
  max-width: 46rem; margin: 0 auto; padding: 2rem 2.4rem 3rem;
  animation: vellum-rise 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.msubject {
  font-weight: 600; font-size: 1.85rem; line-height: 1.18; letter-spacing: -0.005em;
  font-variation-settings: "SOFT" 28, "opsz" 80; margin-bottom: 1.1rem;
}
/* letterpress double-rule under the header (a hairline + its faint shadow) */
.reader .mmeta {
  border-bottom: 1px solid var(--rule-strong);
  box-shadow: 0 3px 0 -2px var(--border);
}
/* plain-text mail becomes the letter body: serif, airy, a faint margin rule.
   (HTML mail renders in its own sandboxed iframe and keeps the sender's look.) */
pre.mbody {
  font-size: 1.08rem; line-height: 1.75; padding-left: 1.3rem;
  border-left: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
}

@keyframes vellum-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .reader { animation: none; } }

/* ---------- compose: the new-letter sheet, dressed as correspondence ---------- */
.compose-btn { font-family: var(--serif); font-size: 1rem; letter-spacing: 0.005em; }
/* heading is the letter's title; subject + B/I/U glyphs render in the display
   face so the letterforms carry character, not a generic toolbar look */
.composehead { font-variation-settings: "SOFT" 30, "opsz" 60; letter-spacing: 0.005em; }
.field.subj input { letter-spacing: 0.005em; }
.fmtbtn { font-family: var(--serif); }
.btn-primary { font-family: var(--serif); letter-spacing: 0.005em; }
/* field + bar rules become pressed hairlines to match the reader's letterpress */
.compose .field { border-bottom-color: var(--rule-strong); }
.compose .composebar { border-top-color: var(--rule-strong); }

/* ---------- calendar: event chips get an oxblood spine ---------- */
.cachip, .caadchip { border-left: 2px solid var(--primary); }

/* ---------- buttons read like stamped wax: top highlight + grounding shadow ---------- */
button, .compose-btn, .mbtn.primary {
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent),
              0 1px 1px color-mix(in srgb, #000 8%, transparent);
}
.logout button, .iconbtn, .linkbtn, .cancel, .fact, .rowact,
.fmtbtn, .btn-ghost { box-shadow: none; }