/* SlickRez shared design tokens + chrome (owner design pass 2026-08-03).
   Direction: "the document is the brand" — paper surfaces, ink type, hairline
   rings, violet as the only brand accent; mint/coral/sun demoted to semantic
   ok/alert/warn as text and 6px dots (C0 restraint, extended). Dark mode is a
   token inversion: same hue, lightness only, borders over shadows. */

:root{
  --violet:#6a4df0; --violet-press:#5a3fe0; --violet-text:#5334e0;
  --ink:#1c1828; --ink-2:#4e4763; --ink-3:#7b7490;
  --line:rgba(28,24,40,.09); --line-2:rgba(28,24,40,.16);
  --paper:#f8f7fa; --surface:#ffffff; --inset:#f1eff5;
  --ok:#0f8f66; --warn:#a97722; --alert:#c04b45;
  --ring:0 0 0 1px var(--line), 0 1px 2px rgba(0,0,0,.04);
  --ring-lift:0 0 0 1px var(--line), 0 2px 6px rgba(0,0,0,.06), 0 10px 28px rgba(28,24,40,.09);
  --btn-ink:#fff;
  --spot:rgba(106,77,240,.07);
  --track:#e9e6f2;
  --r-xs:6px; --r-sm:8px; --r-md:10px; --r-lg:14px;
  --font-serif:Georgia,"Times New Roman",serif;
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI","Inter",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}
@media (prefers-color-scheme: dark){
  :root{
    --violet:#9d87ff; --violet-press:#8f77ff; --violet-text:#b0a0ff;
    --ink:#eceaf3; --ink-2:#aca4c0; --ink-3:#766f8b;
    --line:rgba(236,234,243,.09); --line-2:rgba(236,234,243,.17);
    --paper:#161320; --surface:#1e1a2a; --inset:#151221;
    --ok:#3ecf9a; --warn:#d9a453; --alert:#ef8b85;
    --ring:0 0 0 1px var(--line);
    --ring-lift:0 0 0 1px var(--line-2), 0 10px 28px rgba(0,0,0,.4);
    --btn-ink:#171320;
    --spot:rgba(157,135,255,.09);
    --track:#2a2438;
  }
}
:root[data-theme="dark"]{
  --violet:#9d87ff; --violet-press:#8f77ff; --violet-text:#b0a0ff;
  --ink:#eceaf3; --ink-2:#aca4c0; --ink-3:#766f8b;
  --line:rgba(236,234,243,.09); --line-2:rgba(236,234,243,.17);
  --paper:#161320; --surface:#1e1a2a; --inset:#151221;
  --ok:#3ecf9a; --warn:#d9a453; --alert:#ef8b85;
  --ring:0 0 0 1px var(--line);
  --ring-lift:0 0 0 1px var(--line-2), 0 10px 28px rgba(0,0,0,.4);
  --btn-ink:#171320;
  --spot:rgba(157,135,255,.09);
  --track:#2a2438;
}
:root[data-theme="light"]{
  --violet:#6a4df0; --violet-press:#5a3fe0; --violet-text:#5334e0;
  --ink:#1c1828; --ink-2:#4e4763; --ink-3:#7b7490;
  --line:rgba(28,24,40,.09); --line-2:rgba(28,24,40,.16);
  --paper:#f8f7fa; --surface:#ffffff; --inset:#f1eff5;
  --ok:#0f8f66; --warn:#a97722; --alert:#c04b45;
  --ring:0 0 0 1px var(--line), 0 1px 2px rgba(0,0,0,.04);
  --ring-lift:0 0 0 1px var(--line), 0 2px 6px rgba(0,0,0,.06), 0 10px 28px rgba(28,24,40,.09);
  --btn-ink:#fff;
  --spot:rgba(106,77,240,.07);
  --track:#e9e6f2;
}

*{margin:0; padding:0; box-sizing:border-box}
html{font-size:16px}
body{font-family:var(--font-body); color:var(--ink); background:var(--paper);
  min-height:100vh; -webkit-font-smoothing:antialiased}
button{font-family:inherit}

/* ---------- header / nav ---------- */
header{display:flex; align-items:center; gap:18px; padding:13px 26px;
  max-width:1180px; width:100%; margin:0 auto}
.topnav{display:flex; gap:2px; background:var(--inset); border:1px solid var(--line);
  padding:3px; border-radius:9px}
.nav-link{font-size:.82rem; font-weight:500; color:var(--ink-3); text-decoration:none;
  padding:6px 15px; border-radius:var(--r-xs); transition:color .12s}
.nav-link.active{background:var(--surface); color:var(--ink); font-weight:600; box-shadow:var(--ring)}
.nav-link:hover:not(.active){color:var(--ink)}
.nav-link:focus-visible{outline:2px solid var(--violet); outline-offset:2px}
.header-spacer{flex:1}
.streak{display:flex; align-items:baseline; gap:6px; font-size:.8rem; color:var(--ink-2)}
.streak .n{font-weight:700; font-size:1.05rem; color:var(--violet-text); font-variant-numeric:tabular-nums}
.avatar{width:32px; height:32px; border-radius:50%; background:var(--violet); color:var(--btn-ink);
  display:grid; place-items:center; font-weight:650; font-size:.78rem; cursor:pointer}
.avatar:focus-visible{outline:2px solid var(--violet); outline-offset:2px}

/* ---------- type ---------- */
.hello{font-family:var(--font-serif); font-size:clamp(1.3rem, 2.6vh, 1.7rem)}
.date{font-size:.7rem; color:var(--ink-3); letter-spacing:.12em; text-transform:uppercase}
.section-label{display:flex; align-items:center; gap:12px; font-size:.66rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.18em; color:var(--ink-3)}
.section-label::after{content:''; flex:1; border-top:1px solid var(--line)}
.r-label{font-size:.64rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); display:flex; align-items:center; gap:10px; width:100%}
.r-label::before,.r-label::after{content:''; flex:1; border-top:1px solid var(--line)}

/* ---------- surfaces ---------- */
.card{background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--ring)}
.card-hover{transition:transform .15s var(--ease-out), box-shadow .2s var(--ease-out)}
.card-hover:hover{box-shadow:var(--ring-lift)}

/* ---------- buttons (legacy aliases kept for verbatim-copy markup) ---------- */
.btn, .duo-btn, .t-act{font-weight:650; font-size:.84rem; color:var(--btn-ink); background:var(--violet);
  border:none; border-radius:var(--r-sm); padding:10px 18px; cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 2px 5px rgba(0,0,0,.15);
  transition:transform .12s var(--ease-out), background .12s}
.btn:hover, .duo-btn:hover, .t-act:hover{background:var(--violet-press); transform:translateY(-1px)}
.btn:active, .duo-btn:active, .t-act:active{transform:scale(.96)}
.btn:focus-visible, .duo-btn:focus-visible, .t-act:focus-visible{outline:2px solid var(--violet); outline-offset:2px}
.ghost-btn{font-weight:550; font-size:.84rem; color:var(--ink-2); background:var(--surface);
  border:1px solid var(--line-2); border-radius:var(--r-sm); padding:10px 16px; cursor:pointer;
  transition:border-color .12s, color .12s}
.ghost-btn:hover{border-color:var(--violet); color:var(--violet-text)}
.ghost-btn:focus-visible{outline:2px solid var(--violet); outline-offset:2px}
.link-act{font-size:.82rem; font-weight:550; color:var(--ink-3); background:none; border:none; cursor:pointer;
  text-decoration:underline; text-decoration-color:transparent; text-underline-offset:3px;
  transition:color .12s, text-decoration-color .12s; padding:4px 2px}
.link-act:hover{color:var(--violet-text); text-decoration-color:currentColor}
.link-act:focus-visible{outline:2px solid var(--violet); outline-offset:2px}

/* ---------- status text (C0: color as text + 6px dots, never fills) ---------- */
.status{font-size:.62rem; font-weight:650; letter-spacing:.12em; text-transform:uppercase}
.status.ok{color:var(--ok)} .status.warn{color:var(--warn)}
.status.alert{color:var(--alert)} .status.quiet{color:var(--ink-3)}

/* ---------- modal (welcome / confirms) ---------- */
.modal-backdrop{position:fixed; inset:0; background:rgba(22,19,32,.5); display:grid; place-items:center; z-index:70}
.modal{background:var(--surface); width:min(520px, calc(100vw - 32px)); border-radius:var(--r-lg);
  padding:28px; box-shadow:var(--ring-lift); animation:modal-in 200ms var(--ease-out); position:relative}
@keyframes modal-in{from{opacity:0; transform:translateY(8px)}}
.modal h2{font-family:var(--font-serif); font-size:1.3rem; margin-bottom:8px}
.modal p{font-size:.92rem; color:var(--ink-2); line-height:1.55; margin-bottom:18px}
.modal footer{display:flex; gap:10px; justify-content:flex-end}
.modal-x{position:absolute; top:14px; right:16px; border:none; background:transparent; font-size:1.3rem;
  color:var(--ink-3); cursor:pointer; padding:4px 8px; border-radius:var(--r-xs)}
.modal-x:hover{background:var(--inset)}
.modal-x:focus-visible{outline:2px solid var(--violet)}

/* ---------- toasts ---------- */
.toast-region{position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:60;
  display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none}
.toast{display:flex; align-items:center; gap:10px; background:var(--surface); color:var(--ink);
  border-radius:var(--r-md); box-shadow:var(--ring-lift); padding:12px 20px; font-size:.88rem; font-weight:550;
  max-width:480px; animation:toast-in .45s var(--ease-spring)}
.toast .t-mark{color:var(--violet-text); font-size:1rem}
.toast.leaving{animation:toast-out .25s var(--ease-out) forwards}
@keyframes toast-in{from{opacity:0; transform:translateY(16px) scale(.9)}}
@keyframes toast-out{to{opacity:0; transform:translateY(8px) scale(.95)}}

/* ---------- flare ---------- */
.confetti-bit{position:fixed; width:7px; height:7px; border-radius:2px; pointer-events:none; z-index:80}
.rise{opacity:0; transform:translateY(10px); animation:rise .5s var(--ease-out) forwards}
.rise.d1{animation-delay:.05s} .rise.d2{animation-delay:.12s}
.rise.d3{animation-delay:.19s} .rise.d4{animation-delay:.26s}
@keyframes rise{to{opacity:1; transform:none}}

.hidden{display:none}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
  .rise{opacity:1; transform:none}
}