/* ============================================================
   CfA Design Tokens — Benefits Access Portal
   Source of truth: .claude/skills/design-system/tokens.css
   ============================================================
   To activate the redesign, add to <head> in index.html:
     <link rel="stylesheet" href="tokens.css">
     <link rel="stylesheet" href="style.css">
   Then remove the inline <style> block.
   ============================================================ */

:root {
  /* Code for America Brand Colors — Dark Blue (Primary) */
  --cfa-dark-blue-base:  #2B1A78;
  --cfa-dark-blue-light: #5650BE;
  --cfa-dark-blue-pale:  #C2C0E8;

  /* Rich Red */
  --cfa-red-base:  #AF121D;
  --cfa-red-light: #EF6C75;
  --cfa-red-pale:  #F9C8CB;

  /* Light Blue */
  --cfa-light-blue-base:  #A1B4EA;
  --cfa-light-blue-light: #C9D4F3;
  --cfa-light-blue-pale:  #E6EBF9;

  /* Warm Yellow */
  --cfa-yellow-base:  #FFB446;
  --cfa-yellow-light: #FFD699;
  --cfa-yellow-pale:  #FFF3E0;

  /* Deep Green */
  --cfa-green-base:  #006152;
  --cfa-green-light: #00AD93;
  --cfa-green-pale:  #E2F9F6;

  /* Sand */
  --cfa-sand-base:  #E9CCBE;
  --cfa-sand-light: #F7EDE8;
  --cfa-sand-pale:  #F5F0ED;

  /* Black / Grays */
  --cfa-black:      #000000;
  --cfa-gray-light: #F3F3F3;
  --cfa-white:      #FFFFFF;

  /* Semantic surfaces */
  --color-bg:      var(--cfa-sand-pale);
  --color-surface: var(--cfa-white);
  --color-border:  var(--cfa-sand-base);

  /* Ink */
  --color-ink:       var(--cfa-black);
  --color-ink-muted: #5A5650; /* ≥4.5:1 on --color-bg */

  /* Brand / actions */
  --color-primary:       var(--cfa-dark-blue-base);
  --color-primary-hover: var(--cfa-dark-blue-light);
  --color-primary-ink:   var(--cfa-white);
  --color-accent:        var(--cfa-light-blue-base);

  /* Chat bubbles */
  --color-bot-bubble:      var(--cfa-sand-light);
  --color-user-bubble:     var(--cfa-dark-blue-base);
  --color-user-bubble-ink: var(--cfa-white);

  /* Status */
  --color-error:   var(--cfa-red-base);
  --color-success: var(--cfa-green-base);
  --color-warning: var(--cfa-yellow-base);

  /* Spacing scale (4 px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;

  /* Shape */
  --radius:    6px;
  --radius-lg: 12px;

  /* Touch */
  --tap-min: 44px;

  /* Typography */
  --font-sans:        system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size-body:   17px;
  --font-size-sm:     14px;
  --font-size-xs:     13px;
  --line-height-body: 1.55;
}

/* Base reset */
html { font-size: 100%; box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

/* Universal focus ring */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Screen-reader-only utility */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
