/* ============================================================================
   PALOPAY — DESIGN TOKENS  (redesign 2026)
   ----------------------------------------------------------------------------
   One brand ramp + 6 neutrals + 4 semantic ramps. Mirrors the Palopay Design
   System token values, authored as PLAIN CSS so it drops straight into the
   vanilla JS/HTML/CSS app — no framework, no build step.

   • Font: ARIAL ONLY (web + PDF parity). Figures use Arial + tabular-nums,
     NOT a monospace face (fixes the recon-viewer SF Mono policy violation).
   • Brand built from THREE constants — claret / off-black / bone. Every other
     colour is mixed from them, so no foreign hue enters the system.
   ============================================================================ */

:root {
  /* ---- Brand constants (the only three source hexes) -------------------- */
  --claret:      #5C051A;   /* primary / brand                       */
  --claret-700:  #4A0414;   /* pressed wells, gradient mid           */
  --claret-300:  #8a3144;   /* lightened claret on dark              */
  --off-black:   #1F0E0E;   /* ink / dark canvas / gradient end      */
  --bone:        #EDEAD6;   /* warm light accent / text on dark      */
  --bone-card:   #F4F1E4;   /* warm raised panel                     */

  /* Brand gradient identity (app bar, primary CTA, PDF wordmark band) */
  --grad-brand:  linear-gradient(135deg, #5C051A 0%, #1F0E0E 100%);

  /* ---- Neutrals (6) — warm-tinted so they sit with claret, not cold slate */
  --bg:          #F6F5F1;   /* page canvas                           */
  --surface:     #FFFFFF;   /* cards                                 */
  --surface-2:   #FAF9F4;   /* zebra / subtle panel / table strip    */
  --ink:         #1F0E0E;   /* body text  (= off-black)              */
  --muted:       color-mix(in srgb, var(--off-black) 52%, var(--bone)); /* labels, secondary */
  --faint:       color-mix(in srgb, var(--off-black) 38%, var(--bone)); /* placeholders, meta */

  /* Hairlines — alpha mixes, warm, sit on any surface */
  --line:        color-mix(in srgb, var(--off-black) 13%, transparent);
  --line-strong: color-mix(in srgb, var(--off-black) 22%, transparent);

  /* ---- Semantic ramps (4) — base / tint bg / text ----------------------- */
  --success:     #1E7A47;  --success-bg: #EAF4EE;  --success-tx: #135C34;
  --danger:      #B42318;  --danger-bg:  #FBECEA;  --danger-tx:  #8A1C13;
  --warning:     #B5740C;  --warning-bg: #FBF3E2;  --warning-tx: #7A4E07;  /* staging amber */
  --info:        #2C5AA0;  --info-bg:    #EAF0F8;  --info-tx:    #1E3F73;

  /* ---- Spacing scale (px) ---------------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-12: 48px;

  /* ---- Radii ----------------------------------------------------------- */
  --r-sm: 6px;     /* inputs, chips        */
  --r-md: 10px;    /* cards, buttons       */
  --r-lg: 16px;    /* large panels, app bar */
  --r-pill: 999px; /* pills, nav, CTAs     */

  /* ---- Shadows — warm (claret/off-black tinted), never neutral grey ----- */
  --shadow-card: 0 1px 2px rgba(31,14,14,.05), 0 1px 3px rgba(31,14,14,.07);
  --shadow-pop:  0 8px 24px rgba(31,14,14,.12), 0 2px 6px rgba(31,14,14,.08);
  --shadow-lift: 0 12px 36px rgba(31,14,14,.12);

  /* ---- Type — Arial only ----------------------------------------------- */
  --font: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --num:  Arial, "Helvetica Neue", Helvetica, sans-serif;  /* figures: + tabular-nums */

  --fs-display: 26px;  /* grand totals, big money       */
  --fs-h1:      20px;  /* app bar title                 */
  --fs-h2:      15px;  /* card / section titles         */
  --fs-base:    13px;  /* body, inputs, table cells     */
  --fs-sm:      12px;  /* field labels, secondary       */
  --fs-xs:      11px;  /* column headers, pills, meta    */
  --fs-2xs:     10px;  /* micro pills, code chips        */

  --lh-tight: 1.2;
  --lh-base:  1.5;

  /* ---- Layout ---------------------------------------------------------- */
  --maxw: 1440px;       /* desktop-first internal tool   */
  --maxw-narrow: 1100px;
  --bar-h: 56px;        /* app bar height                */
  --sticky-h: 60px;     /* sticky totals bar height      */

  /* Z-index ladder (replaces the 2..999999 chaos) */
  --z-base: 1; --z-sticky: 50; --z-dropdown: 200; --z-popover: 400;
  --z-banner: 600; --z-modal: 800; --z-toast: 1000;

  /* ---- Dashboard v5 stage ramp (Palopay mode) — dot / fg / bg -----------
     The runtime source of truth is the two-mode ramp in dash-v4-select.js
     (sc()); these mirror the Palopay default for any CSS-driven surface. */
  --stage-pre-dot: rgba(31,14,14,.38);   --stage-pre-fg: rgba(31,14,14,.6);  --stage-pre-bg: #EFEDE4;
  --stage-basic-dot: #B5740C;            --stage-basic-fg: #7A4E07;          --stage-basic-bg: #FBF3E2;
  --stage-people-dot: #C2410C;           --stage-people-fg: #B4400C;         --stage-people-bg: #FBE7D8;
  --stage-siso-dot: #5FA777;             --stage-siso-fg: #2F6B47;           --stage-siso-bg: #E7F2EA;
  --stage-payment-dot: #1E7A47;          --stage-payment-fg: #135C34;        --stage-payment-bg: #DFEEE5;
  --stage-closed-dot: #1F0E0E;           --stage-closed-fg: #3A2A2A;         --stage-closed-bg: #E9E6DA;
  --stage-dcheck-dot: #2C5AA0;           --stage-dcheck-fg: #1E3F73;         --stage-dcheck-bg: #EAF0F8;
}

/* Figures: tabular Arial numerals everywhere money/codes appear */
.num, .mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }