/* =========================================================
   desk colour theme — "Electric Blue + Aqua" (2026-09-25)
   Navy structure, blue interaction, aqua accents, white cards on an ice-blue page.
   Every colour is defined once here; pages use var(--token). Loaded before
   index.html's own <style> and assets/payshield.css.
   Contrast (WCAG): normal text 4.5:1, large text / UI boundaries / focus 3:1.
   ========================================================= */
:root {
  /* Brand */
  --brand-navy: #102A56;
  --brand-blue: #2478F2;          /* borders, focus, accents -- never a background under small white text (4.2:1) */
  --brand-blue-hover: #1D65D8;
  --brand-blue-active: #174EA6;
  --brand-blue-button: #1769E0;   /* any blue background carrying white text (5.1:1) */
  --brand-aqua: #19C6C2;
  --brand-aqua-hover: #12AAA8;
  --brand-aqua-active: #3FD3CF;
  --brand-sky: #DCEBFF;

  /* Surfaces */
  --page-bg: #EFF6FF;
  --surface: #FFFFFF;
  --surface-hover: #F4F8FF;
  --surface-selected: #DCEBFF;
  --table-header-bg: #EAF2FF;
  --table-divider: #E2EAF5;

  /* Borders */
  --border: #D5E3F5;
  --border-strong: #A9C5EA;
  --input-border: #6E90C0;        /* inputs, selects, textareas only: 3.3:1 on white */
  --focus-ring: #2478F2;
  --focus-ring-soft: rgba(36, 120, 242, 0.25);

  /* Text */
  --text-primary: #172B4D;
  --text-secondary: #526783;
  --text-muted: var(--text-secondary); /* #64748B fails on the page, row-hover and table-header backgrounds */
  --text-on-dark: #FFFFFF;
  --text-on-blue: #FFFFFF;
  --text-on-aqua: #083344;        /* dark text on aqua in every state, never white */
  --text-link: #174EA6;

  /* Sidebar */
  --sidebar-bg: #102A56;
  --sidebar-text: #E7F0FF;
  --sidebar-icon: #B8D5FF;
  --sidebar-heading: #A9C5EA;
  --sidebar-hover: #174578;
  --sidebar-active-bg: #174578;
  --sidebar-active-indicator: #19C6C2;
  --sidebar-active-icon: #FFFFFF;
  --sidebar-divider: #29466E;

  /* Header */
  --header-bg: #102A56;
  --header-title: #FFFFFF;
  --header-subtitle: #D1E4FF;
  --header-border: #29466E;

  /* Disabled */
  --disabled-bg: #F1F5F9;
  --disabled-text: #94A3B8;
  --disabled-border: #E2E8F0;

  /* Status: -bg background, -text text, the plain name is an accent (stripes, borders, icons) and never text */
  --success-bg: #DCFCE7; --success-text: #166534; --success: #16A34A;
  --success-button: #15803D;      /* green buttons with white text (5.0:1) */
  --warning-bg: #FEF3C7; --warning-text: #92400E; --warning: #D97706;
  --error-bg: #FEE2E2;   --error-text: #991B1B;   --error: #DC2626;
  --info-bg: #DBEAFE;    --info-text: #1E40AF;    --info: #2563EB;
  --ai-bg: #E0F2FE;      --ai-text: #075985;      --ai: #0EA5E9;
  --neutral-bg: #F1F5F9; --neutral-text: #475569; --neutral: #64748B;
  --error-border: #FCA5A5; --warning-border: #FCD34D; /* light edges of tinted notice boxes (decorative) */

  /* Celebration confetti and balloons (birthday / work anniversary, Home tab).
     Decorative only, never text. The palette's blues and aqua plus bright accents. */
  --celebrate-1: var(--brand-blue);
  --celebrate-2: var(--brand-aqua);
  --celebrate-3: #FACC15;         /* sunshine yellow */
  --celebrate-4: #EC4899;         /* pink */
  --celebrate-5: #8B5CF6;         /* violet */
  --celebrate-6: var(--success);
  --celebrate-7: #F97316;         /* orange */
  --celebrate-8: var(--brand-sky);

  /* Shape and motion */
  --radius-control: 8px;
  --radius-card: 12px;
  --transition-fast: 150ms ease;
  --shadow-float: 0 8px 24px rgba(16, 42, 86, 0.12); /* dropdowns, modals, popovers only */
  --overlay: rgba(16, 42, 86, 0.5);                   /* behind a modal */
}

/* Scrollbar colours only: widths stay the browser's own (layouts were measured with them). */
html { scrollbar-color: var(--border-strong) transparent; }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* The sign-in screen is left exactly as it was in this pass. */
.login-shell :focus-visible { outline: revert; outline-offset: revert; }