/*
  RCC design tokens — shared across every evaluation module.
  Contrast ratios verified against WCAG 2.2 AA (4.5:1 text, 3:1 large text/UI).
  cyan / cyan-light / teal / yellow fail AA as text on white — they are
  restricted to backgrounds/accents only (see usage notes below). Do not
  add a new *-text token without checking contrast first.
*/
:root {
  /* Brand palette (backgrounds, accents, large/bold UI, icons) */
  --navy-dark: #0A2647;
  --navy: #0E3668;
  --navy-mid: #155694;
  --blue: #1976D2;
  --cyan: #2BB5C4;
  --cyan-light: #3ADFEE;
  --teal: #2AACBE;
  --red: #C0392B;
  --yellow: #D4A017;
  --green: #1B8A50;
  --coral: #E87F54; /* Brand "Success" accent (Elementor → Global Colors) — decorative use only (borders/accents), not verified as text-safe */

  /* Text-safe variants — passes 4.5:1 on white, use for body/label text */
  --text-navy: var(--navy-dark);      /* 15.2:1 on white */
  --text-navy-mid: var(--navy-mid);   /* 7.5:1 on white */
  --text-blue: var(--blue);           /* 4.6:1 on white */
  --text-muted: #64748B;              /* 4.76:1 on white */
  --text-red: var(--red);             /* 5.44:1 on white */
  --text-green: #0F7A42;              /* 5.41:1 on white — darker than --green, text-safe */
  --text-amber: #8A5A00;              /* 5.93:1 on white — darker than --yellow, text-safe */

  /* On-accent text — use when text sits on cyan/cyan-light/teal/yellow */
  --on-accent-text: var(--navy-dark); /* >=6.1:1 on all four accents */

  --bg: #F7F9FC;
  --card: #FFFFFF;
  --text: var(--text-navy);
  --muted: var(--text-muted);
  --border: #E2E8F0;
  --focus-ring: #1976D2;

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

  /* Type scale */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: Georgia, "Times New Roman", serif;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 36px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-card: 0 4px 20px rgba(10, 38, 71, 0.08);
  --transition-fast: 0.15s ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0B1220;
    --card: #101A2C;
    --border: #223049;
    --text: #E7EDF6;
    --muted: #93A2B8;
    --text-navy: #9DC5F2;     /* 9.7:1 on dark --card #101A2C */
    --text-navy-mid: #7FA8D9; /* 7.05:1 on dark --card #101A2C */
  }
}