/* 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`.

   Two themes, one stylesheet. Every colour below is a custom property:
   - Pink Luxe Light, the default: warm white, near-black type, hot pink accent, soft pink glows, white cards
     with a hairline and a faint chrome top edge. Made to film on a laptop: high contrast, nothing glary.
   - Dark (black / red), the original look: <html data-theme="dark">, ?theme=dark, the toggle in the controls or T.
   Colours with an alpha use rgb(var(--acc) / .3): --acc is the solid accent, --glow the softer light it gives off. */
:root,[data-theme="light"]{
  color-scheme:light;
  --bg:#fffcfb; --bg2:#fff7f8; --ink:#161214; --ink-hi:#161214; --muted:#6e6168; --faint:#8f8189;
  --acc:230 0 126; --glow:255 122 184;
  --red:#e6007e; --red-hover:#f0158d; --red-text:#e6007e; --soft:#ff7ab8; --blush:#ffe3ef;
  --red-soft:rgba(230,0,126,.10); --red-glow:rgba(255,122,184,.42);
  --line:#efe3e8; --line-hi:#e4d3db; --hair:#efe3e8;
  --glass:#ffffff; --glass-hi:#ffffff; --surface:rgba(255,255,255,.97); --surface-2:#fff8fa;
  --scrim:rgba(46,22,36,.22); --chip:rgba(22,18,20,.035); --chip-on:#161214; --chip-on-ink:#ffffff;
  --hi:inset 0 1px 0 #ffffff;
  --chrome:linear-gradient(90deg, rgba(255,255,255,0) 4%, #d9d7dd 22%, #ffffff 46%, #b9b6bf 66%, #eceaef 84%, rgba(255,255,255,0) 96%);
  --lift:0 1px 2px rgba(60,20,40,.04), 0 10px 28px -16px rgba(120,30,80,.20);
  --lift-hi:0 2px 4px rgba(60,20,40,.05), 0 30px 70px -30px rgba(120,30,80,.30);
  --tile-ring:0 0 0 2px #ffffff, 0 6px 14px -5px rgba(90,30,60,.35);
  --tile-bg:#f6eef1;
  --vignette:none;
  --body-bg:var(--bg);
  --btn-bg:#ffffff; --btn-bg-hover:#fff6f9; --btn-border:#e4d3db;
}
[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0a0909; --bg2:#141212; --ink:#f6f2f0; --ink-hi:#ffffff; --muted:rgba(246,242,240,.56); --faint:rgba(246,242,240,.34);
  --acc:224 38 27; --glow:224 38 27;
  --red:#e0261b; --red-hover:#ec3226; --red-text:#ff6a5f; --soft:#ff6a5f; --blush:rgba(224,38,27,.16);
  --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); --hair:rgba(255,255,255,.08);
  --glass:rgba(22,19,19,.62); --glass-hi:rgba(34,29,29,.72); --surface:rgba(22,19,19,.96); --surface-2:rgba(40,18,16,.7);
  --scrim:rgba(5,4,4,.6); --chip:rgba(255,255,255,.035); --chip-on:rgba(255,255,255,.1); --chip-on-ink:#f6f2f0;
  --hi:inset 0 1px 0 rgba(255,255,255,.05);
  --chrome:none;
  --lift:inset 0 1px 0 rgba(255,255,255,.04);
  --lift-hi:0 40px 90px -30px rgba(0,0,0,.9);
  --tile-ring:0 0 0 1px rgba(255,255,255,.22), 0 6px 14px -4px rgba(0,0,0,.8);
  --tile-bg:#221d1c;
  --vignette:radial-gradient(ellipse at center, transparent 58%, rgba(0,0,0,.55) 100%);
  --body-bg:var(--bg);
  --btn-bg:rgba(255,255,255,.04); --btn-bg-hover:rgba(255,255,255,.08); --btn-border:rgba(255,255,255,.16);
}
:root{
  --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:var(--btn-bg);
  border:1px solid var(--btn-border);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:var(--btn-bg-hover);transform:translateY(-1px)}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--red);border-color:rgb(var(--acc) / .5);color:#fff;padding:13px 22px;font-size:16px;font-weight:600;
  box-shadow:0 0 0 1px rgb(var(--acc) / .3), 0 10px 36px -8px var(--red-glow)}
.btn.primary:hover{background:var(--red-hover);box-shadow:0 0 0 1px rgb(var(--acc) / .4), 0 12px 44px -6px rgb(var(--glow) / .6)}
[data-theme="light"] .btn.primary,:root:not([data-theme]) .btn.primary{
  background:linear-gradient(180deg, #f2238f 0%, var(--red) 55%, #d60075 100%);border-color:#d60075;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 0 0 1px rgba(214,0,117,.25), 0 12px 30px -10px rgba(230,0,126,.55), 0 0 40px -14px rgb(var(--glow) / .7)}
.btn[disabled]{opacity:.5;cursor:default;transform:none}

/* the serif italic accent word: dark theme white with a red glow, light theme hot-to-soft pink with a soft pink glow */
.accent{font-family:var(--serif);font-weight:400;font-style:italic;color:var(--ink-hi);letter-spacing:-.01em;font-size:1.1em;padding:0 .05em;
  text-shadow:0 0 28px rgb(var(--glow) / .65), 0 0 2px rgb(var(--glow) / .4);
  background:linear-gradient(90deg, transparent, rgb(var(--acc) / .85) 20%, rgb(var(--acc) / .85) 80%, transparent) no-repeat 0 92% / 100% 2px}
[data-theme="light"] .accent,:root:not([data-theme]) .accent{color:var(--red);text-shadow:0 0 26px rgb(var(--glow) / .45), 0 0 1px rgb(var(--glow) / .3);
  background:linear-gradient(90deg, transparent, rgb(var(--glow) / .95) 20%, rgb(var(--glow) / .95) 80%, transparent) no-repeat 0 92% / 100% 2px}
[hidden]{display:none!important}