/* "Luxe" variant: ivory paper, ink text, champagne-gold hairlines, deep jewel-tone app panels.
   Loaded after style.css, so it only overrides. */
:root{
  --bg:#f6f1e7; --surface:#fffdf8; --text:#1d1b18; --muted:#6f665a; --line:#e4d9c6; --ink:#1d1b18;
  --gold:#b08d57; --gold-2:#d8bd8a; --gold-soft:rgba(176,141,87,.14);
  --shadow:0 22px 50px rgba(40,30,15,.16);
  /* jewel tones per app */
  --lunar-j1:#5a161c; --lunar-j2:#7a2229;
  --spending-j1:#0f3a2f; --spending-j2:#1a5242;
  --reminder-j1:#141b37; --reminder-j2:#25315d;
  --tarot-j1:#1b1226; --tarot-j2:#33204a;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#100e0b; --surface:#1a1713; --text:#f2ebdd; --muted:#b3a893; --line:#2f2a22; --ink:#f2ebdd; --shadow:0 22px 50px rgba(0,0,0,.5)}
}

/* outer background: ivory paper with a faint gold grid and soft champagne light */
body{background:
  radial-gradient(1100px 700px at 50% -10%,rgba(216,189,138,.28),transparent 65%),
  radial-gradient(900px 700px at 100% 55%,rgba(216,189,138,.12),transparent 60%),
  radial-gradient(900px 700px at 0% 85%,rgba(176,141,87,.10),transparent 60%),
  linear-gradient(rgba(176,141,87,.05) 1px,transparent 1px) 0 0/64px 64px,
  linear-gradient(90deg,rgba(176,141,87,.05) 1px,transparent 1px) 0 0/64px 64px,
  var(--bg)}
@media (prefers-color-scheme:dark){
  body{background:
    radial-gradient(1100px 700px at 50% -10%,rgba(176,141,87,.18),transparent 65%),
    linear-gradient(rgba(216,189,138,.04) 1px,transparent 1px) 0 0/64px 64px,
    linear-gradient(90deg,rgba(216,189,138,.04) 1px,transparent 1px) 0 0/64px 64px,var(--bg)}
}

/* typography */
.hero h1,.app:not(.app-tarot) h2,.fb-head h2{font-family:"Playfair Display",Georgia,"Times New Roman",serif;font-weight:700;letter-spacing:-.01em}
.hero h1{font-size:clamp(40px,6.6vw,72px);line-height:1.08}
.kicker{color:var(--gold);letter-spacing:.24em}
.kicker::before,.kicker::after{content:"";display:inline-block;width:36px;height:1px;background:var(--gold);vertical-align:middle;margin:0 14px;opacity:.7}

/* header */
.top{background:color-mix(in srgb,var(--bg) 82%,transparent);border-bottom:1px solid var(--line)}
/* logo: keep the default multicolour "M" mark from style.css */
.nav .lang{box-shadow:inset 0 0 0 1px var(--gold);color:#7d5f33}
@media (prefers-color-scheme:dark){.nav .lang{color:var(--gold-2)}}

/* hero */
.hero::before{opacity:1;filter:blur(40px);background:radial-gradient(420px 260px at 50% 30%,rgba(216,189,138,.35),transparent 70%)}
.hero::after{background-image:radial-gradient(circle at 1px 1px,rgba(176,141,87,.28) 1px,transparent 0)}
.btn:not(.btn-ghost):not(.btn-light){background:#1d1b18;color:#f6efe0;box-shadow:inset 0 0 0 1px rgba(216,189,138,.45)}
.btn:not(.btn-ghost):not(.btn-light):hover,.btn:not(.btn-ghost):not(.btn-light):focus-visible{background:#3a3226;color:#fbf5e8}
.btn-ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--gold)}
.btn-ghost:hover,.btn-ghost:focus-visible{background:var(--gold-soft);color:var(--text)}
.btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
@media (prefers-color-scheme:dark){
  .btn:not(.btn-ghost):not(.btn-light){background:var(--gold-2);color:#1d1b18}
  .btn:not(.btn-ghost):not(.btn-light):hover,.btn:not(.btn-ghost):not(.btn-light):focus-visible{background:#ecd6ab;color:#1d1b18}
  .btn-ghost:hover,.btn-ghost:focus-visible{background:rgba(216,189,138,.16);color:var(--text)}
}
.pills li::before{color:var(--gold)}
.tile{background:color-mix(in srgb,var(--surface) 80%,transparent);border-color:var(--line)}
.tile:hover{border-color:var(--gold);box-shadow:0 14px 30px rgba(40,30,15,.12)}

/* app panels: jewel tones with gold hairlines */
/* .app-tarot keeps the default (v1) purple starfield panel from style.css */
.app-lunar{--j1:var(--lunar-j1);--j2:var(--lunar-j2)}
.app-spending{--j1:var(--spending-j1);--j2:var(--spending-j2)}
.app-reminder{--j1:var(--reminder-j1);--j2:var(--reminder-j2)}
.app:not(.app-tarot){--accent:var(--gold-2);color:#f4ecdc}
.app:not(.app-tarot) .app-in{
  background:
    radial-gradient(560px 420px at var(--gx,85%) var(--gy,10%),rgba(216,189,138,.20),transparent 70%),
    linear-gradient(150deg,var(--j2),var(--j1));
  box-shadow:inset 0 0 0 1px rgba(216,189,138,.35),var(--shadow)}
.app:not(.app-tarot) .app-in::before{border-color:rgba(216,189,138,.35);box-shadow:0 0 0 46px rgba(216,189,138,.04),0 0 0 92px rgba(216,189,138,.025)}
.app:not(.app-tarot) .app-in::after{background-image:radial-gradient(circle at 1px 1px,rgba(216,189,138,.22) 1px,transparent 0);opacity:.8}
.app:not(.app-tarot) :is(.app-tag,.points,.free){color:rgba(244,236,220,.74)}
.app:not(.app-tarot) .app-name{color:#fbf5e8}
.app:not(.app-tarot) .app-id img{box-shadow:0 0 0 1px rgba(216,189,138,.5),0 8px 18px rgba(0,0,0,.3)}
.app:not(.app-tarot) .points li::before{background:var(--gold-2);opacity:.2}
.app:not(.app-tarot) .points li::after{border-color:var(--gold-2)}
.app:not(.app-tarot) .pill{color:var(--gold-2);background:transparent;box-shadow:inset 0 0 0 1px rgba(216,189,138,.55)}
.today-chip{background:rgba(255,255,255,.06);border-color:rgba(216,189,138,.35);color:#f4ecdc}
.today-chip b{color:var(--gold-2)}
.app:not(.app-tarot) .shot{box-shadow:0 0 0 1px rgba(216,189,138,.25),0 24px 50px rgba(0,0,0,.35)}

/* feedback band + footer */
/* feedback band keeps the default (v1) look from style.css */
.btn-light:hover,.btn-light:focus-visible{background:#f1ede4;color:#111827}
.foot{border-top:1px solid var(--line)}
.foot b{font-family:"Playfair Display",serif;font-weight:600}

/* dialog + back-to-top */
.fb{background:var(--surface);box-shadow:0 0 0 1px var(--line),0 30px 80px rgba(0,0,0,.35)}
.fb select:focus,.fb textarea:focus,.fb input:focus{border-color:var(--gold)}
.to-top{background:#1d1b18;color:var(--gold-2);box-shadow:inset 0 0 0 1px rgba(216,189,138,.5),0 10px 24px rgba(0,0,0,.25)}
.to-top:hover{background:#2c2820}
.to-top:focus-visible{outline-color:var(--gold)}