/* ============================================================
   Sides demo set, design tokens (single source of truth)
   ------------------------------------------------------------
   Palette, type, and spacing for every canned demo flow.

   PALETTE SWAP POINT
   ------------------
   The crimson system below is the June 2026 style guide direction
   and matches the live sides.actor landing page. Color is flagged
   "not final"; an earlier brand direction used cyan-into-magenta.
   To re-skin the ENTIRE demo set, edit ONLY the brand color block
   in :root below. Every flow reads these variables; nothing else
   hard-codes a hex value.
   ============================================================ */

:root {
  /* ---- Brand palette (June 2026 style guide / live landing) ---- */
  --curtain-crimson: #8c2732;   /* primary brand crimson, primary action  */
  --archive-ink:     #101724;   /* deep blue-black, atmosphere top stop    */
  --playbill-cream:  #f2ebd5;   /* light foreground / on-dark text         */
  --theatrical:      #c44153;   /* bright accent, hover, live status       */
  --theatre-red:     #5c1a1f;   /* dark red gradient stop                  */
  --velvet-end:      #2e0f10;   /* near-black maroon terminal stop         */
  --wordmark-black:  #0a0a0a;   /* mark on light surfaces                  */

  /* ---- Surface system (dark theatre) ---- */
  --bg:            #0c0a0d;                    /* page background           */
  --surface-1:     rgba(242, 235, 213, 0.030); /* raised panel             */
  --surface-2:     rgba(242, 235, 213, 0.055); /* card / input fill        */
  --surface-3:     rgba(242, 235, 213, 0.085); /* hover / active fill      */
  --surface-inset: rgba(10, 8, 11, 0.45);      /* recessed wells           */

  /* ---- Ink (text on dark) ---- */
  --ink:       var(--playbill-cream);
  --ink-dim:   rgba(242, 235, 213, 0.62);
  --ink-faint: rgba(242, 235, 213, 0.36);
  --ink-ghost: rgba(242, 235, 213, 0.20);

  /* ---- Lines ---- */
  --hairline:       rgba(242, 235, 213, 0.14);
  --hairline-soft:  rgba(242, 235, 213, 0.08);
  --hairline-loud:  rgba(242, 235, 213, 0.30);

  /* ---- Crimson tints for fills / status ---- */
  --crimson-12: rgba(140, 39, 50, 0.12);
  --crimson-20: rgba(140, 39, 50, 0.20);
  --crimson-35: rgba(140, 39, 50, 0.35);
  --theatrical-12: rgba(196, 65, 83, 0.12);
  --theatrical-20: rgba(196, 65, 83, 0.20);

  /* ---- Status accents (pipeline + live/canned) ---- */
  --status-submitted: #c9b89a;  /* warm neutral, in pipeline               */
  --status-requested: #6ea2c4;  /* cool blue, action requested             */
  --status-callback:  #d8a44a;  /* amber, advancing                        */
  --status-booked:    #5fae7e;  /* green, won                              */
  --status-passed:    #9a6a6f;  /* muted maroon, closed                    */
  --live:    #5fae7e;           /* "Live" capability tag                   */
  --canned:  #c9b89a;           /* "Prototype / canned" tag                */
  --vision:  #6ea2c4;           /* "Vision" tag                            */

  /* ---- Typography ---- */
  --font: "Helvetica Now Text", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Display scale (style guide §4.3: 64 / 48 / 36 / 24) */
  --fs-d1: clamp(2.6rem, 5.4vw, 4rem);     /* 64 */
  --fs-d2: clamp(2rem, 3.8vw, 3rem);       /* 48 */
  --fs-d3: clamp(1.55rem, 2.6vw, 2.25rem); /* 36 */
  --fs-d4: clamp(1.25rem, 1.8vw, 1.5rem);  /* 24 */
  /* Text scale (defined here; the guide does not specify body sizes) */
  --fs-lg:      1.125rem;   /* 18 */
  --fs-base:    1rem;       /* 16 */
  --fs-sm:      0.875rem;   /* 14 */
  --fs-xs:      0.78rem;    /* 12.5 */
  --fs-eyebrow: 0.7rem;     /* uppercase tracked label */

  --lh-tight: 1.08;
  --lh-snug:  1.32;
  --lh-body:  1.55;
  --tracking-eyebrow: 0.32em;
  --tracking-caps:    0.12em;

  /* ---- Spacing scale (4px base) ---- */
  --s-1: 0.25rem;  --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;  --s-9: 6rem;
  --gutter: clamp(1.5rem, 5vw, 5.5rem);

  /* ---- Radii (editorial: small, crisp) ---- */
  --r-xs: 2px; --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-xl: 22px;
  --r-device: 38px;
  --r-pill: 999px;

  /* ---- Elevation (dark-appropriate) ---- */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-3: 0 24px 60px rgba(0,0,0,0.55);
  --shadow-device: 0 40px 90px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,0,0,0.5);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.16, 0.84, 0.32, 1);
  --t-fast: 0.16s; --t-mid: 0.28s; --t-slow: 0.6s;

  /* ---- Layout ---- */
  --topbar-h: 64px;
  --maxw: 1480px;
  --z-gate: 90; --z-topbar: 40; --z-toast: 80; --z-overlay: 60;
}