/*
 * design-tokens-2026-06-17.css
 *
 * HRH portal redesign tokens, Phase 0.
 * Loads AFTER brand-tokens.css so new tokens take precedence where names overlap.
 * Existing custom-property names that are still referenced elsewhere in the
 * codebase are preserved (no breaking renames). New names are added.
 *
 * Source: working/design-2026-06-17/README.md
 */

:root,
[data-bs-theme="light"] {
  /* Brand palette */
  --hra-navy:         #291C56;
  --hra-purple:       #4B2E83;
  --hra-purple-dark:  #3A2268;
  --hra-purple-light: #6B4CA3;
  --hra-lavender:     #C9B8EC;
  --hra-lavender-bg:  #F8F5FF;

  /* Tile accents (used in logo mark + KPI icons) */
  --hra-tile-green:   #6BFBA3;
  --hra-tile-coral:   #F9637C;
  --hra-tile-yellow:  #FFE410;
  --hra-tile-blue:    #7AC0FF;

  /* Status colors + their tint backgrounds */
  --critical:         #B91C26;
  --critical-bg:      #FEE2E2;
  --warning:          #B45309;
  --warning-bg:       #FEF3C7;
  --success:          #15803D;
  --success-bg:       #DCFCE7;
  --info:             #1D4ED8;
  --info-bg:          #DBEAFE;

  /* Neutrals - text */
  --ink:              #14102A;   /* headings */
  --text:             #2B2440;   /* body */
  --muted:            #6A6580;
  --muted-2:          #8A86A0;

  /* Neutrals - structural */
  --border:           #E8E3F2;
  --border-2:         #F0ECF8;
  --surface:          #FFFFFF;
  --surface-2:        #FAF9FC;
  --bg:               #F6F4FB;   /* app background */

  /* Operational status pill colors (facility report-status) */
  --status-green:     #15803D;   /* fully operational */
  --status-green-bg:  #DCFCE7;
  --status-yellow:    #B45309;   /* limited operations */
  --status-yellow-bg: #FEF3C7;
  --status-red:       #B91C26;   /* temporarily closed */
  --status-red-bg:    #FEE2E2;
  --status-pink:      #BE185D;   /* evacuated */
  --status-pink-bg:   #FCE7F3;

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(20,16,42,0.04), 0 1px 1px rgba(20,16,42,0.03);
  --shadow-md: 0 4px 12px rgba(20,16,42,0.06), 0 1px 2px rgba(20,16,42,0.04);
  --shadow-lg: 0 12px 32px rgba(75,46,131,0.10), 0 2px 6px rgba(20,16,42,0.04);

  /* Layout constants */
  --topbar-h:         56px;
  --sidebar-w:        248px;
  --banner-inset-l:   268px;   /* sidebar + 20px gutter */
  --banner-inset-r:   20px;
  --banner-inset-b:   16px;
}

/* Dark-mode parity: keep brand purple readable on dark; lift surface tones. */
[data-bs-theme="dark"] {
  --hra-purple:       #a78bfa;   /* shifted lighter for contrast on dark */
  --hra-purple-dark:  #8b5cf6;
  --hra-purple-light: #c4b5fd;
  --hra-lavender:     #c4b5fd;
  --hra-lavender-bg:  rgba(75,46,131,0.18);

  --critical-bg:      rgba(185,28,38,0.18);
  --warning-bg:       rgba(180,83,9,0.18);
  --success-bg:       rgba(21,128,61,0.18);
  --info-bg:          rgba(29,78,216,0.18);

  --ink:              #f5f3ff;
  --text:             #e9e6f3;
  --muted:            #b8b3c7;
  --muted-2:          #8e8ba0;

  --border:           #322b4f;
  --border-2:         #25203c;
  --surface:          #1c1830;
  --surface-2:        #161329;
  --bg:               #0f0c1f;

  --status-green-bg:  rgba(21,128,61,0.20);
  --status-yellow-bg: rgba(180,83,9,0.20);
  --status-red-bg:    rgba(185,28,38,0.20);
  --status-pink-bg:   rgba(190,24,93,0.20);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.30);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.36), 0 1px 2px rgba(0,0,0,0.30);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.50), 0 2px 6px rgba(0,0,0,0.30);
}