/* StoryPresto design tokens — the single source of truth for color, type and
   radius. Linked FIRST by every page (index.html, auth.html, share.html); no
   other file may declare a :root block. When you need a colour, a font size or
   a corner, take one from here rather than inventing a neighbouring value —
   that drift is what this file exists to stop. */
:root{
  /* ---- Ground & ink -------------------------------------------------------
     Warm paper neutrals, named by the job they do rather than by shade, so a
     new panel picks a role instead of inventing another off-white. */
  --bg:#eceae2;        /* app background */
  --panel:#ffffff;     /* cards, modals, inputs — the surface above --bg */
  --raised:#f4f2ec;    /* sidebar, inset fields */
  --sunken:#e2ded4;    /* segmented-control track, step markers */
  --hover:#e7e3d9;     /* row + ghost-button hover */
  --border:#e0dcd2;
  --border2:#cfc9bb;   /* stronger rule: control outlines, hover borders */
  --text:#131217;
  --text2:#5f5c56;
  /* --text3 is muted meta (uppercase labels, hints, placeholders) at 11–12px,
     so it still has to be readable: this lands ~4:1 on --bg. The old value was
     2.3:1, which looked "subtle" and was actually just hard to read. */
  --text3:#78756d;

  /* ---- Accent -------------------------------------------------------------
     Vivid indigo-violet. 6.5:1 on white, so it is legible as body-sized text
     and as a fill with white on top. */
  --accent:#4b3bf5;
  --accent-bg:#e7e4ff;      /* selected row / soft fill */
  --accent-text:#3325c9;    /* accent used as readable text */
  --accent-hover:#3a2ec9;   /* primary button hover */

  /* ---- Semantic ---------------------------------------------------------- */
  --green:#0f6e56; --green-bg:#e1f5ee;
  --danger:#a3352f; --danger-bg:#fdecec; --danger-border:#f3c9c9;
  --star:#e09b2d; --star-hover:#b57b1c;
  --comment-ring:#f5d4b8;   /* ring on a slide dot that has comments */

  /* ---- Present mode: its own dark stage ---------------------------------- */
  --present-bg:#0b0b14;
  --present-accent:#8d7cff;   /* the accent, lifted to read on the dark stage */
  --present-scrim:rgba(10,10,18,.75);
  --present-chip:rgba(10,10,18,.45);
  --present-border:#444;    /* control outline on the dark stage */
  --live:#7ee2bd;

  /* ---- Type scale: six steps, no half-pixels ------------------------------
     Body stays at 13px — the density is right for a workspace tool; the fix is
     removing the sizes that sat half a pixel away from it. */
  --fs-micro:11px;   /* uppercase labels, meta */
  --fs-small:12px;   /* captions, hints, secondary rows */
  --fs-body:13px;    /* default UI text */
  --fs-lead:15px;    /* emphasis, brand name, icon glyphs */
  --fs-title:18px;   /* modal + section headings */

  /* ---- Radius scale ------------------------------------------------------ */
  --r-xs:4px;        /* bars, tails, inline inputs */
  --r-sm:6px;        /* buttons, inputs, chips, list rows */
  --r-md:10px;       /* cards, panels */
  --r-lg:16px;       /* modals, trays */
  --r-pill:999px;    /* badges, status pills, toasts */

  /* ---- Elevation --------------------------------------------------------- */
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow-pop:0 8px 24px rgba(0,0,0,.14);
  --shadow-float:0 10px 30px rgba(0,0,0,.16);

  /* ---- Families ---------------------------------------------------------- */
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  font-size:15px;
}