/* I-9 Complete by UC Alternative — Design Tokens v1.0 */
:root {
  /* ── Brand ── */
  --red:              #F05E4E;  /* Primary CTAs, active nav, UC lettermark */
  --red-dark:         #C94434;  /* Hover on red buttons, danger text */
  --red-light:        #FEF0EE;  /* Alert backgrounds, danger card fill */
  --navy:             #304151;  /* Sidebar, table headers, primary text */
  --navy-mid:         #3d5268;  /* Sidebar hover state */
  --navy-light:       #4A6070;  /* Secondary text on navy surfaces */
  --navy-pale:        #EEF2F5;  /* Info badges, neutral card backgrounds */

  /* ── Semantic ── */
  --green:            #2E7D5E;  /* Complete, authorized, passed */
  --green-light:      #EDF7F3;  /* Success badge bg */
  --amber:            #B45309;  /* Warnings, decision points */
  --amber-light:      #FEF3C7;  /* Warning badge bg */

  /* ── Reverification urgency (critical: between danger and warning) ── */
  --critical-bg:      #FAECE7;
  --critical-text:    #993C1D;
  --critical-border:  #F5C4B3;

  /* ── Neutrals ── */
  --white:            #FFFFFF;
  --gray-50:          #F8F9FA;  /* Page background */
  --gray-100:         #F1F3F5;  /* Subtle hover */
  --gray-200:         #E9ECEF;  /* Borders, dividers */
  --gray-400:         #ADB5BD;  /* Muted labels, captions */
  --gray-600:         #6C757D;  /* Secondary text */
  --gray-800:         #343A40;  /* Dark text (rare) */

  /* ── Typography ── */
  --font-sans:        'Inter', system-ui, sans-serif;
  --font-mono:        'JetBrains Mono', 'Fira Code', monospace;

  /* ── Shape ── */
  --radius:           8px;    /* Cards, buttons, inputs */
  --radius-lg:        12px;   /* Panels, larger containers */
  --radius-full:      9999px; /* Badges and urgency pills ONLY */

  /* ── Sidebar ── */
  --sidebar-width:    192px;  /* Agent + client. Staff: 210px */
  --sidebar-bg:       #304151;
  --sidebar-active:   #F05E4E;
  --sidebar-hover:    rgba(255,255,255,0.08);

  /* ── Table ── */
  --table-header-bg:  #304151; /* Always navy — never use another color */
  --table-row-hover:  #F8F9FA;

  /* ── Pipeline column group accent colors ── */
  --col-sec1:         #378ADD; /* Section 1 */
  --col-video:        #EF9F27; /* Video verification */
  --col-sec2:         #2E7D5E; /* Section 2 */
  --col-ev:           #F05E4E; /* E-Verify */
}

/* Component tints used by the design system's component CSS (sections 3, 4, 6, 8, 9)
 * that section 11 does not name. Values are copied from that CSS unchanged so that
 * app.css contains no literal color at all. Not part of the copied :root block above. */
:root {
  /* ── Sidebar text and surfaces on navy (section 3) ── */
  --sidebar-text:           rgba(255,255,255,0.65);
  --sidebar-text-muted:     rgba(255,255,255,0.35);
  --sidebar-section-label:  rgba(255,255,255,0.3);
  --sidebar-divider:        rgba(255,255,255,0.1);
  --sidebar-badge-info-bg:  rgba(255,255,255,0.15);

  /* ── Text on navy headers (sections 8 and 9) ── */
  --table-header-text:      rgba(255,255,255,0.8);
  --card-header-text:       rgba(255,255,255,0.65);

  /* ── Badge, pill, alert and button borders (sections 4, 5, 6) ── */
  --success-border:         #b8ddd0;
  --danger-border:          #f5c0b8;
  --warning-border:         #fcd34d;
  --accent-border:          #c5d3dc;
  --pending-border:         #ced4da;

  /* ── Column group header text tints (section 9) ── */
  --col-sec1-text:          #B5D4F4;
  --col-video-text:         #FAC775;
  --col-sec2-text:          #C0DD97;
  --col-ev-text:            #F7C1C1;

  /* ── Soft shadow under the auth card (the same value as the design system's .badge code) ── */
  --shadow-soft:            rgba(0,0,0,0.08);
}