/* ===========================================
   INDEX.CSS - Design Token Variables
   =========================================== */

/* -----------------------------------------
   CSS Custom Properties (Color Palette)
   ----------------------------------------- */
:root {
  /* Primary palette from brand */
  --im-primary-100: #d4eaf7;
  --im-primary-200: #b6ccd8;
  --im-primary-300: #3b3c3d;  /* Charcoal */

  /* Accent colors */
  --im-accent-100: #71c4ef;
  --im-accent-200: #00668c;  /* Primary dark blue */
  --im-accent-200-dark: #005270; /* Darker accent for hover states */

  /* Text colors */
  --im-text-100: #1d1c1c;    /* Dark black */
  --im-text-200: #313d44;    /* Dark gray */

  /* Background colors */
  --im-bg-100: #fffefb;      /* Off-white */
  --im-bg-200: #f5f4f1;      /* Nice gray */
  --im-bg-300: #cccbc8;      /* Medium gray */

  /* Theme colors (from theme.css) */
  --im-green: #448c74;       /* Primary green */
  --im-green-rgb: 68, 140, 116;  /* RGB values for rgba() */
  --im-green-light: rgba(68, 140, 116, 0.1);
  --im-blue-light: rgba(0, 102, 140, 0.1);

  /* Accent RGB for rgba() usage */
  --im-accent-200-rgb: 0, 102, 140;

  /* Dark Professional Tones — section backgrounds, borders, outlines, text emphasis */
  --im-dark-navy: #0a1628;     /* Hero & dark section backgrounds, emphasis outlines */
  --im-charcoal: #1e1e2e;      /* Alternating dark sections, card borders on hover */
  --im-near-black: #121519;    /* Deepest dark text, high-contrast borders */

  /* Bright accent for dark backgrounds (WCAG AA vs #0a1628) */
  --im-accent-bright: #1a9fd4;
  --im-border-dark: rgba(255,255,255,0.1);
  --im-border-dark-hover: rgba(255,255,255,0.2);

  /* Light-bg border tokens — subtle dark navy borders for cards on light backgrounds */
  --im-border-accent: rgba(10, 22, 40, 0.12);
  --im-border-accent-hover: rgba(10, 22, 40, 0.25);
}