/* Lorica design tokens: the one place every color, shadow, radius and font is set. The app page and the server
   pages both load this file. Values follow ChatGPT's own interface (measured on chatgpt.com, 2026-10-07), because
   most of our players already know how ChatGPT looks and feels. See reports/ChatGPT UI reference.md. */
:root{
  --bg:#ffffff;--bg2:#f3f3f3;--surface:#ffffff;--raised:#ffffff;--line:rgba(0,0,0,.1);--line2:rgba(0,0,0,.2);--track:rgba(0,0,0,.2);--edge:rgba(0,0,0,.1);
  --text:#0d0d0d;--muted:#5d5d5d;--faint:#8f8f8f;
  --accent:#0d0d0d;--accentHi:#2f2f2f;--accentInk:#ffffff;--accentSoft:#f3f3f3;
  --rose:#e0245e;--roseSoft:#fdebf0;--teal:#10a37f;--tealSoft:#e6f6f1;--violet:#3566f0;
  --you:#0d0d0d;--youSoft:#f3f3f3;--speech:#0d0d0d;
  --scrim:rgba(0,0,0,.32);--sheetScrim:rgba(0,0,0,.32);
  --sh1:0 4px 16px rgba(0,0,0,.05);
  --sh2:0 4px 24px rgba(0,0,0,.1);
  --glass:#0d0d0d;--glassLine:#2f2f2f;
  --field:#ffffff;--knob:#ffffff;--knobSh:0 1px 3px rgba(0,0,0,.25);
  --onMedia:#ffffff;--onMedia2:rgba(255,255,255,.78);--onMediaFaint:rgba(255,255,255,.28);--mediaGlass:rgba(0,0,0,.42);--mediaScrim:rgba(0,0,0,.6);--mediaTextSh:0 1px 2px rgba(0,0,0,.45);--mediaBg:#171717;--mediaFaceSh:0 10px 40px rgba(0,0,0,.35);
  --cardText:#ececec;--cardText2:#cdcdcd;--cardText3:#8f8f8f;--cardStrong:#ffffff;--cardBtn:#2f2f2f;--cardBtnHi:#414141;--cardCheck:#2f2f2f;
  --ch1:#3fc1a5;--ch2:#ff5c8a;--ch3:#ffb347;--cardUp:#7ef0c8;--cardDn:#ff9db4;   /* story cards: chapter ticks by chapter, a closer or cooler friendship */
  --endGrad:linear-gradient(100deg,#7fe0c4,#ffd27a 45%,#ff9cba);--endGradPlain:linear-gradient(100deg,#9aa3c4,#cfd4ea);   /* an ending's name; the as-written ending is quieter */
  --tod0:rgba(255,200,140,.10);--tod1:rgba(255,240,210,.05);--tod2:rgba(255,255,255,0);--tod3:rgba(255,190,110,.08);--tod4:rgba(255,120,80,.14);--tod5:rgba(30,40,120,.22);--tod6:rgba(150,140,220,.12);--tod7:rgba(255,255,255,0);   /* the scene's light by time of day */
  --spillA1:#3fc1a5;--spillA2:#ff5c8a;--spillA3:#ffb347;--spillA4:#a99bff;--spillA5:#fff0b8;--spillB1:#ffb347;--spillB2:#ffd9a0;--spillB3:#ff9e7a;   /* the light that spills at an ending: the best one, then the others */
  --dotRing:0 0 0 2px var(--surface);--flashRing:0 0 0 3px var(--teal);--ri:12px;
  --art1:#2b2350;--art2:#6b3a62;   /* a story or character with no colors of its own: its banner and initials tile (both looks) */
  /* the color pairs a creator picks from in Create (Plum, Night, Forest, Ember, Ocean, Rose, Gold, Slate); the pick is saved in the record */
  --mood1a:#2b2350;--mood1b:#6b3a62;--mood2a:#141a33;--mood2b:#4b3a7a;--mood3a:#121a17;--mood3b:#3e5a3a;--mood4a:#2a1410;--mood4b:#8a3a22;
  --mood5a:#0f2233;--mood5b:#2f6b80;--mood6a:#2e1424;--mood6b:#9a3a5e;--mood7a:#1f1a33;--mood7b:#6b4a1f;--mood8a:#16191f;--mood8b:#46505e;
  --sans:-apple-system-body,ui-sans-serif,-apple-system,system-ui,"Segoe UI",Helvetica,"Apple Color Emoji",Arial,sans-serif;
  --serif:var(--sans);
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s7:32px;--s8:40px;
  --rk:6px;--ra:28%;--r1:10px;--r2:16px;--rb:18px;--r3:24px;--rc:28px;--rp:999px;
  --e-out:cubic-bezier(.2,.8,.2,1);--e-spring:cubic-bezier(.3,1.45,.5,1);--e-in:cubic-bezier(.5,0,.75,0);
  --d1:120ms;--d2:220ms;--d3:320ms;--d4:480ms;   /* motion: press and color, small moves, things arriving, big moments */
  --focus:0 0 0 4px rgba(0,0,0,.06);
  --hdrCtl:40px;   /* every button and pill in a header: one size, site and app, phone and desktop */
  --vvh:100dvh;--banner:clamp(132px,24dvh,300px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#000000;--bg2:#2f2f2f;--surface:#212121;--raised:#2f2f2f;--line:rgba(255,255,255,.12);--line2:rgba(255,255,255,.2);--track:rgba(255,255,255,.2);--edge:transparent;
  --text:#ffffff;--muted:#b4b4b4;--faint:#8f8f8f;
  --accent:#ffffff;--accentHi:#e8e8e8;--accentInk:#0d0d0d;--accentSoft:#2f2f2f;
  --rose:#ff5c8a;--roseSoft:#3a1220;--teal:#3ecf9e;--tealSoft:#0e2a21;--violet:#7ea2ff;
  --you:#ffffff;--youSoft:#2f2f2f;--field:#2f2f2f;--speech:#ffffff;
  --scrim:rgba(0,0,0,.6);--sheetScrim:rgba(0,0,0,.6);
  --sh1:0 4px 16px rgba(0,0,0,.3);--sh2:0 4px 24px rgba(0,0,0,.5);--focus:0 0 0 4px rgba(255,255,255,.09);
  --ch1:#3fc1a5;--ch2:#ff5c8a;--ch3:#ffb347;--cardUp:#7ef0c8;--cardDn:#ff9db4;
  --endGrad:linear-gradient(100deg,#7fe0c4,#ffd27a 45%,#ff9cba);--endGradPlain:linear-gradient(100deg,#9aa3c4,#cfd4ea);
  --tod0:rgba(255,200,140,.10);--tod1:rgba(255,240,210,.05);--tod2:rgba(255,255,255,0);--tod3:rgba(255,190,110,.08);--tod4:rgba(255,120,80,.14);--tod5:rgba(30,40,120,.22);--tod6:rgba(150,140,220,.12);--tod7:rgba(255,255,255,0);
  --spillA1:#3fc1a5;--spillA2:#ff5c8a;--spillA3:#ffb347;--spillA4:#a99bff;--spillA5:#fff0b8;--spillB1:#ffb347;--spillB2:#ffd9a0;--spillB3:#ff9e7a;
  --dotRing:0 0 0 2px var(--surface);--flashRing:0 0 0 3px var(--teal);--ri:12px;
}}
:root[data-theme="dark"]{
  --bg:#000000;--bg2:#2f2f2f;--surface:#212121;--raised:#2f2f2f;--line:rgba(255,255,255,.12);--line2:rgba(255,255,255,.2);--track:rgba(255,255,255,.2);--edge:transparent;
  --text:#ffffff;--muted:#b4b4b4;--faint:#8f8f8f;
  --accent:#ffffff;--accentHi:#e8e8e8;--accentInk:#0d0d0d;--accentSoft:#2f2f2f;
  --rose:#ff5c8a;--roseSoft:#3a1220;--teal:#3ecf9e;--tealSoft:#0e2a21;--violet:#7ea2ff;
  --you:#ffffff;--youSoft:#2f2f2f;--field:#2f2f2f;--speech:#ffffff;
  --scrim:rgba(0,0,0,.6);--sheetScrim:rgba(0,0,0,.6);
  --sh1:0 4px 16px rgba(0,0,0,.3);--sh2:0 4px 24px rgba(0,0,0,.5);--focus:0 0 0 4px rgba(255,255,255,.09);
  --ch1:#3fc1a5;--ch2:#ff5c8a;--ch3:#ffb347;--cardUp:#7ef0c8;--cardDn:#ff9db4;
  --endGrad:linear-gradient(100deg,#7fe0c4,#ffd27a 45%,#ff9cba);--endGradPlain:linear-gradient(100deg,#9aa3c4,#cfd4ea);
  --tod0:rgba(255,200,140,.10);--tod1:rgba(255,240,210,.05);--tod2:rgba(255,255,255,0);--tod3:rgba(255,190,110,.08);--tod4:rgba(255,120,80,.14);--tod5:rgba(30,40,120,.22);--tod6:rgba(150,140,220,.12);--tod7:rgba(255,255,255,0);
  --spillA1:#3fc1a5;--spillA2:#ff5c8a;--spillA3:#ffb347;--spillA4:#a99bff;--spillA5:#fff0b8;--spillB1:#ffb347;--spillB2:#ffd9a0;--spillB3:#ff9e7a;
  --dotRing:0 0 0 2px var(--surface);--flashRing:0 0 0 3px var(--teal);--ri:12px;
}