/* Cristina's Sorter · design tokens and buttons.
   Shared by the real tool (sorter/web/index.html), the film-mode demo and the sales page (site/).
   Change a colour or a button here and all three change after `python3 tools/build_site.py`. */
:root{
  --bg:#0a0909; --bg2:#141212; --ink:#f6f2f0; --muted:rgba(246,242,240,.56); --faint:rgba(246,242,240,.34);
  --red:#e0261b; --red-soft:rgba(224,38,27,.16); --red-glow:rgba(224,38,27,.42);
  --line:rgba(255,255,255,.08); --line-hi:rgba(255,255,255,.16);
  --glass:rgba(22,19,19,.62); --glass-hi:rgba(34,29,29,.72);
  --serif:"Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans:Geist, -apple-system, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --gap:clamp(8px,0.85vw,14px);
  --spring:cubic-bezier(.2,1.5,.35,1);
}
*{box-sizing:border-box;margin:0;padding:0}

.btn{appearance:none;cursor:pointer;font:500 15px/1 var(--sans);color:var(--ink);background:rgba(255,255,255,.04);
  border:1px solid var(--line-hi);padding:12px 16px;border-radius:999px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;
  transition:transform .2s var(--spring), background .2s, box-shadow .3s, border-color .3s}
.btn:hover{background:rgba(255,255,255,.08);transform:translateY(-1px)}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--red);border-color:rgba(255,120,110,.5);color:#fff;padding:13px 22px;font-size:16px;font-weight:600;
  box-shadow:0 0 0 1px rgba(224,38,27,.3), 0 10px 36px -8px var(--red-glow)}
.btn.primary:hover{background:#ec3226;box-shadow:0 0 0 1px rgba(224,38,27,.4), 0 12px 44px -6px rgba(224,38,27,.6)}
.btn[disabled]{opacity:.5;cursor:default;transform:none}

/* the serif italic accent word with the red glow and underline */
.accent{font-family:var(--serif);font-weight:400;font-style:italic;color:#fff;letter-spacing:-.01em;font-size:1.1em;padding:0 .05em;
  text-shadow:0 0 28px rgba(224,38,27,.65), 0 0 2px rgba(224,38,27,.4);
  background:linear-gradient(90deg, transparent, rgba(224,38,27,.85) 20%, rgba(224,38,27,.85) 80%, transparent) no-repeat 0 92% / 100% 2px}
[hidden]{display:none!important}