/* ===========================================================================
   KaPow Platform — design tokens
   ---------------------------------------------------------------------------
   The single source of truth for colour, type and radius. Every other
   stylesheet reads from here; nothing below this file should hard-code a hex.

   These deepen the ramp that already existed in pm-dashboard.html
   (--pm-bg #14171C etc.) toward true black, and replace its blue accent with
   the scarlet already used throughout budget.php.

   Ink is a warm off-white, never #fff — that is what keeps a near-black UI
   feeling premium rather than clinical.
   =========================================================================== */

:root {
  /* Tells the browser which palette to paint native UI with — scrollbars,
     select dropdowns, date pickers, form widgets. Without it a fully dark
     page still gets a light scrollbar down the right edge, which is the
     single most obvious tell that a dark theme was bolted on. Every page
     that loads this file is dark, so it belongs here rather than per-page. */
  color-scheme: dark;

  /* -- surfaces, darkest to lightest ------------------------------------- */
  --bg:            #08090B;   /* page */
  --surface:       #101216;   /* cards, panels */
  --surface-2:     #1A1D22;   /* raised: buttons, inputs on surface */
  --surface-3:     #23272E;   /* hover */
  --field:         #0F1114;   /* inset: text inputs */

  /* -- lines -------------------------------------------------------------- */
  --border:        #1D2026;   /* default hairline */
  --border-2:      #262A31;   /* on raised surfaces */
  --border-strong: #333944;   /* interactive outline */

  /* -- ink ---------------------------------------------------------------- */
  --ink:           #ECE8E1;   /* primary text (warm) */
  --ink-muted:     #9BA3AE;   /* secondary */
  --ink-faint:     #6B7280;   /* labels, meta */
  --ink-dim:       #4B5159;   /* disabled, footer */

  /* -- brand -------------------------------------------------------------- */
  --accent:        #dd1a32;   /* the one accent: primary action, active state */
  --accent-hover:  #f02b43;
  --accent-ink:    #F0566B;   /* scarlet as TEXT on dark — passes contrast */
  --accent-soft:   #2A1116;   /* tinted fill behind scarlet text */
  --accent-line:   #4A1520;   /* scarlet-tinted border */

  /* -- status (meaning preserved from the existing checklist) ------------- */
  --st-idle:       #6B7280;  --st-idle-soft:    #23262C;
  --st-wait:       #D9AE5F;  --st-wait-soft:    #332B1B;
  --st-sent:       #F0566B;  --st-sent-soft:    #2A1116;
  --st-city:       #7FBAAE;  --st-city-soft:    #1B2F2A;
  --st-done:       #9BC17E;  --st-done-soft:    #212E1B;
  --st-late:       #E08A5B;  --st-late-soft:    #2E1B12;

  /* -- type --------------------------------------------------------------- */
  --font:          "Archivo", "Segoe UI", Arial, sans-serif;
  --font-display:  "Archivo Narrow", "Archivo", "Segoe UI", sans-serif;

  /* -- radius (matches the 6/8/10 already in use) ------------------------- */
  --r-sm: 6px;
  --r:    8px;
  --r-md: 10px;
  --r-lg: 15px;

  /* -- elevation ---------------------------------------------------------- */
  --shadow:    0 1px 2px rgba(0,0,0,.3), 0 6px 24px rgba(0,0,0,.35);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.5);

  /* -- focus: one ring, used everywhere ----------------------------------- */
  --focus-ring: 0 0 0 3px rgba(221, 26, 50, .16);
}