/* ============================================================
   J&M Media / We Do Livestreaming — design tokens
   SINGLE SOURCE OF TRUTH for color and typography.
   Never hardcode a hex value in page CSS. Add it here instead.
   Prose guidance: docs/style-guide.md
   ============================================================ */

:root{
  /* --- Surfaces (darkest -> lightest) --- */
  --bg:            #0e0b16;  /* page background */
  --bg-panel:      #1a1526;  /* cards, panels */
  --bg-raised:     #241d36;  /* inputs, raised rows */
  --bg-raised-2:   #2e2544;  /* selected / hover rows */

  /* --- Borders --- */
  --border:        #362c4d;  /* default hairline */
  --border-bright: #4d3f6b;  /* hover / focus / emphasis */

  /* --- Text --- */
  --text:          #f3eefc;  /* headings, primary copy */
  --text-muted:    #b3a7cf;  /* secondary copy */
  --text-dim:      #7d71a0;  /* labels, captions, disabled */

  /* --- Brand: purple = structure, orange = action --- */
  --purple:        #8b6cf0;
  --purple-dim:    #3a2d5c;
  --orange:        #ff7a29;  /* CTAs and primary emphasis only */
  --orange-dim:    #6b3416;
  --orange-glow:   rgba(255,122,41,0.35);

  /* --- Status (rate sheet / estimator) --- */
  --green:         #34d399;  /* included, confirmed, savings */
  --red:           #ff5d6c;  /* removed, over budget, errors */

  /* --- Third-party platform marks — NOT the J&M palette ---------------------
     These are the platforms' own brand colours, used only for the "streams to"
     logos. Never reuse them for site UI: purple still means structure and
     orange still means action. Instagram's mark is a gradient, not a flat
     colour, so it carries three stops rather than one value. */
  --pf-twitch:     #9146FF;
  --pf-kick:       #53FC18;
  --pf-youtube:    #FF0000;
  --pf-facebook:   #1877F2;
  --pf-ig-warm:    #FEDA75;
  --pf-ig-pink:    #D62976;
  --pf-ig-violet:  #4F5BD5;
  /* TikTok's flat mark is black, which is invisible here. Its own reversed
     treatment is a white mark, so the brand cyan drives the glow instead. */
  --pf-tiktok:     #25F4EE;

  /* --- Three-font system --- */
  --font-display:  'Oswald', sans-serif;              /* headings, section titles, nav */
  --font-body:     'Inter', -apple-system, sans-serif; /* all running copy and UI */
  --font-mono:     'JetBrains Mono', monospace;        /* prices, quantities, quote refs */
}