/* ============================================================================
   InboxAxe — "Concierge & Seal" opulent design system
   Boutique-hotel luxury × fine post office. Self-contained: no CDNs, no font
   or image URLs — seals, brass plates and textures are drawn with gradients.
   Theme-aware: honors OS preference AND a :root[data-theme] override both ways.
   soul: fable-ri-001
   ========================================================================== */

/* ---- 1. TOKENS ---------------------------------------------------------- */
:root{
  /* Light — "the day counter" */
  --vellum:#F3ECDA;            /* page bg, warm aged paper           */
  --vellum-raised:#FBF6EA;     /* cards / panels                     */
  --ink:#2B2420;               /* warm espresso text                 */
  --ink-soft:#7A6E5C;          /* secondary text                     */
  --oxblood:#6E1F2A;           /* primary accent / trust / CTA       */
  --oxblood-deep:#551520;      /* hover                              */
  --brass:#A97C3F;             /* precious accent — used SPARINGLY   */
  --brass-bright:#C6973F;
  --seal-wax:#8E2C2C;          /* the wax seal                       */
  --line:rgba(43,36,32,.14);   /* hairlines                          */

  /* derived, warm & disciplined */
  --focus:var(--brass-bright);
  --radius:10px;
  --radius-lg:14px;
  --tap:48px;
  --shadow-paper:0 1px 2px rgba(60,42,18,.06), 0 10px 30px rgba(60,42,18,.10);
  --shadow-raise:0 2px 4px rgba(60,42,18,.08), 0 18px 44px rgba(60,42,18,.14);
  --shadow-cta:0 2px 6px rgba(85,21,32,.28), 0 10px 22px rgba(85,21,32,.22);

  /* type */
  --font-display:"Hoefler Text","Baskerville","Palatino Linotype","Book Antiqua",Georgia,serif;
  --font-body:"Optima","Avenir Next","Segoe UI",ui-sans-serif,system-ui,sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}

@media (prefers-color-scheme:dark){
  :root{
    /* Dark — "the members' club at night" */
    --vellum:#1E1813;            /* deep leather                      */
    --vellum-raised:#2A231D;
    --ink:#ECE1CE;               /* warm ivory                        */
    --ink-soft:#A99B85;
    --oxblood:#B23A47;
    --oxblood-deep:#551520;
    --brass:#C9A04E;
    --brass-bright:#DDB86A;
    --seal-wax:#B4413F;
    --line:rgba(236,225,206,.14);
    --shadow-paper:0 1px 2px rgba(0,0,0,.4), 0 12px 34px rgba(0,0,0,.5);
    --shadow-raise:0 2px 4px rgba(0,0,0,.45), 0 20px 50px rgba(0,0,0,.6);
    --shadow-cta:0 2px 6px rgba(0,0,0,.5), 0 12px 26px rgba(120,26,34,.4);
  }
}
/* explicit overrides win in BOTH directions over the media query above */
:root[data-theme="light"]{
  --vellum:#F3ECDA; --vellum-raised:#FBF6EA; --ink:#2B2420; --ink-soft:#7A6E5C;
  --oxblood:#6E1F2A; --oxblood-deep:#551520; --brass:#A97C3F; --brass-bright:#C6973F;
  --seal-wax:#8E2C2C; --line:rgba(43,36,32,.14);
  --shadow-paper:0 1px 2px rgba(60,42,18,.06), 0 10px 30px rgba(60,42,18,.10);
  --shadow-raise:0 2px 4px rgba(60,42,18,.08), 0 18px 44px rgba(60,42,18,.14);
  --shadow-cta:0 2px 6px rgba(85,21,32,.28), 0 10px 22px rgba(85,21,32,.22);
}
:root[data-theme="dark"]{
  --vellum:#1E1813; --vellum-raised:#2A231D; --ink:#ECE1CE; --ink-soft:#A99B85;
  --oxblood:#B23A47; --oxblood-deep:#551520; --brass:#C9A04E; --brass-bright:#DDB86A;
  --seal-wax:#B4413F; --line:rgba(236,225,206,.14);
  --shadow-paper:0 1px 2px rgba(0,0,0,.4), 0 12px 34px rgba(0,0,0,.5);
  --shadow-raise:0 2px 4px rgba(0,0,0,.45), 0 20px 50px rgba(0,0,0,.6);
  --shadow-cta:0 2px 6px rgba(0,0,0,.5), 0 12px 26px rgba(120,26,34,.4);
}

/* ---- 2. BASE ELEMENTS --------------------------------------------------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--vellum);
  /* faint warm light falling from the top corners of the counter */
  background-image:
    radial-gradient(1100px 460px at 12% -12%, rgba(169,124,63,.10), transparent 55%),
    radial-gradient(900px 420px at 92% -6%, rgba(169,124,63,.07), transparent 55%);
  background-attachment:fixed;
  min-height:100vh;
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,.display{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:.2px;
  line-height:1.22;
  color:var(--ink);
}
h1{font-size:1.85rem;margin:0}
h2{font-size:1.4rem;margin:0}

.mono,.ledger{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* the letterspaced uppercase eyebrow — a small brass caption */
.eyebrow{
  font-family:var(--font-body);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.7rem;
  font-weight:600;
  color:var(--brass);
}

a{color:var(--oxblood)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}

/* ---- 3. CARDS / PANELS -------------------------------------------------- */
/* warm vellum-raised paper with a fine hairline and a low warm shadow */
.op-card,.panel{
  background:var(--vellum-raised);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-raise);
}

/* ---- 4. LETTERPRESS RULE — brass double hairline ------------------------ */
.letterpress-rule{
  border:0;
  height:3px;
  width:100%;
  background:
    linear-gradient(var(--brass),var(--brass)) top/100% 1px no-repeat,
    linear-gradient(var(--brass),var(--brass)) bottom/100% 1px no-repeat;
  opacity:.55;
  margin:22px 0;
}

/* ---- 5. BUTTONS --------------------------------------------------------- */
.btn{
  appearance:none;border:none;cursor:pointer;
  font-family:var(--font-body);font-size:1rem;font-weight:600;
  border-radius:var(--radius);min-height:var(--tap);padding:0 22px;
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  letter-spacing:.2px;
  transition:background .18s ease, box-shadow .18s ease, transform .12s ease, border-color .18s ease;
}
/* primary = oxblood, soft warm shadow; hover deepens + a faint brass edge */
.btn.primary{
  background:var(--oxblood);
  color:#FBF6EA;
  box-shadow:var(--shadow-cta);
}
.btn.primary:hover:not(:disabled){
  background:var(--oxblood-deep);
  box-shadow:0 0 0 1px var(--brass), var(--shadow-cta);
}
.btn.primary:active:not(:disabled){transform:translateY(1px)}
.btn.primary:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}

/* quiet secondary — an outlined vellum chit */
.btn.ghost{
  background:transparent;
  border:1.5px solid var(--line);
  color:var(--ink);
}
.btn.ghost:hover{border-color:var(--brass);color:var(--ink)}

/* ---- 6. BRASS NAMEPLATE — engraved plate for the assistant's name ------- */
.brass-nameplate{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:210px;min-height:56px;padding:12px 26px;
  border-radius:7px;
  /* rolled brass: bright crown, warm belly, dark foot */
  background:
    linear-gradient(180deg,
      #F4DFAE 0%, var(--brass-bright) 26%, var(--brass) 60%, #7C5A2C 100%);
  /* raised bevel + soft drop */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -2px 3px rgba(60,38,10,.55),
    inset 0 0 0 1px rgba(124,90,44,.5),
    0 6px 16px rgba(60,42,18,.32);
  position:relative;
}
.brass-nameplate .plate-name{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.5rem;
  letter-spacing:.6px;
  color:#4A360F;
  /* engraving: dark bite above, light catch below */
  text-shadow:0 1px 0 rgba(255,247,224,.6), 0 -1px 1px rgba(40,24,4,.45);
  white-space:nowrap;
}
.brass-nameplate .plate-name.placeholder{opacity:.55;font-style:italic}
/* four engraved corner screw-heads */
.brass-nameplate .screw{
  position:absolute;width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #F4DFAE, #7C5A2C 75%);
  box-shadow:inset 0 0 0 .5px rgba(40,24,4,.5);
}
.brass-nameplate .screw.tl{top:7px;left:9px}
.brass-nameplate .screw.tr{top:7px;right:9px}
.brass-nameplate .screw.bl{bottom:7px;left:9px}
.brass-nameplate .screw.br{bottom:7px;right:9px}

/* ---- 7. WAX SEAL — the one bold signature: the "governed/approved" mark -- */
.wax-seal{
  --seal-size:96px;
  position:relative;
  width:var(--seal-size);height:var(--seal-size);
  display:grid;place-items:center;
  /* domed wax: lit from upper-left, deepening to the rim */
  background:
    radial-gradient(circle at 38% 32%,
      color-mix(in srgb, var(--seal-wax) 68%, #fff) 0%,
      var(--seal-wax) 40%,
      color-mix(in srgb, var(--seal-wax) 72%, #000) 100%);
  /* slightly irregular pressed-wax edge */
  border-radius:47% 53% 52% 48% / 50% 47% 53% 50%;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.28),
    inset 0 -5px 10px rgba(40,6,6,.5),
    0 4px 12px rgba(60,10,10,.4);
  color:color-mix(in srgb, var(--seal-wax) 60%, #000);
}
/* the embossed inner ring */
.wax-seal::before{
  content:"";position:absolute;inset:9px;border-radius:50%;
  box-shadow:
    inset 0 1px 2px rgba(40,6,6,.55),
    inset 0 -1px 1px rgba(255,255,255,.22);
  border:1px dashed color-mix(in srgb, var(--seal-wax) 45%, #000);
  opacity:.5;
}
/* the pressed monogram / initial (set via .wax-seal > .seal-mark text) */
.wax-seal .seal-mark{
  position:relative;z-index:1;
  font-family:var(--font-display);font-weight:700;
  font-size:calc(var(--seal-size) * .42);
  line-height:1;
  color:color-mix(in srgb, var(--seal-wax) 58%, #100);
  /* stamped-into-wax engraving */
  text-shadow:
    0 1px 0 color-mix(in srgb, var(--seal-wax) 80%, #fff),
    0 -1px 1px rgba(30,4,4,.6);
}
.wax-seal.sm{--seal-size:40px}
.wax-seal.lg{--seal-size:120px}

/* press micro-interaction: stamp lands, settles */
@keyframes seal-press{
  0%{transform:scale(.4) rotate(-8deg);opacity:0}
  55%{transform:scale(1.08) rotate(1.5deg);opacity:1}
  75%{transform:scale(.97) rotate(-.5deg)}
  100%{transform:scale(1) rotate(0);opacity:1}
}
.wax-seal.stamp{animation:seal-press .6s cubic-bezier(.2,.9,.3,1.2) both}
@media (prefers-reduced-motion:reduce){
  .wax-seal.stamp{animation:none}
}

/* ---- 8. STATUS / DOTS / SPINNER (shared with onboarding + counter) ------ */
.dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;display:inline-block}
.dot.ok{background:#3F7A4E}
.dot.bad{background:var(--oxblood)}
.dot.wait{background:var(--brass)}
.spin{
  width:15px;height:15px;border:2px solid var(--line);border-top-color:var(--brass);
  border-radius:50%;display:inline-block;animation:op-spin .7s linear infinite
}
@keyframes op-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:1.4s}}