/* GCMD Library — Color tokens
 *
 * Source of truth for all colors. Never hardcode hex values in components
 * or pages — always reference these variables. See DESIGN_SYSTEM_PLAN.md §3.
 *
 * Why indigo over the legacy blue (#0066CC): medical sites overuse blue,
 * and indigo gives GCMD its own lane while staying professional. Pairs
 * with warm stone neutrals instead of the cold blue-grays elsewhere.
 */

:root {
  /* ── Primary ─────────────────────────────────────────────── */
  --color-primary:        #4F46E5;   /* Indigo 600 — brand, CTAs, active states */
  --color-primary-hover:  #4338CA;   /* Indigo 700 */
  --color-primary-light:  #EEF2FF;   /* Indigo 50 — subtle backgrounds */
  --color-primary-100:    #E0E7FF;   /* Indigo 100 — tag bgs */
  --color-primary-200:    #C7D2FE;   /* Indigo 200 — borders on active items */

  /* ── Secondary ──────────────────────────────────────────── */
  --color-secondary:        #0EA5E9; /* Sky 500 — links, secondary actions */
  --color-secondary-hover:  #0284C7; /* Sky 600 */
  --color-secondary-light:  #F0F9FF; /* Sky 50 */

  /* ── Accent ─────────────────────────────────────────────── */
  --color-accent:        #F59E0B;    /* Amber 500 — highlights, badges */
  --color-accent-light:  #FFFBEB;    /* Amber 50 */

  /* ── Semantic ───────────────────────────────────────────── */
  --color-success:        #10B981;
  --color-success-light:  #ECFDF5;
  --color-warning:        #F59E0B;
  --color-warning-light:  #FFFBEB;
  --color-error:          #EF4444;
  --color-error-light:    #FEF2F2;

  /* ── Neutrals (stone scale) ─────────────────────────────── */
  --color-gray-950:  #0C0A09;   /* Near-black — primary headings */
  --color-gray-900:  #1C1917;   /* Body text */
  --color-gray-800:  #292524;   /* Strong body text (between 900 and 700) */
  --color-gray-700:  #44403C;   /* Secondary text */
  --color-gray-600:  #57534E;   /* Slightly lighter secondary */
  --color-gray-500:  #78716C;   /* Tertiary, placeholders */
  --color-gray-400:  #A8A29E;   /* Disabled text, timestamps */
  --color-gray-300:  #D6D3D1;   /* Borders */
  --color-gray-200:  #E7E5E4;   /* Dividers */
  --color-gray-100:  #F5F5F4;   /* Card backgrounds */
  --color-gray-50:   #FAFAF9;   /* Page background */
  --color-white:     #FFFFFF;

  /* ── Surface ────────────────────────────────────────────── */
  --color-surface:         #FFFFFF;
  --color-surface-raised:  #FAFAF9;
  --color-surface-sunken:  #F5F5F4;
  --color-backdrop:        rgba(0, 0, 0, 0.5);

  /* ── Content type colors (cards, tags) ──────────────────── */
  --color-type-video:        #EF4444;   /* Red */
  --color-type-podcast:      #8B5CF6;   /* Violet */
  --color-type-article:      #3B82F6;   /* Blue */
  --color-type-infographic:  #10B981;   /* Emerald */
  --color-type-guideline:    #F59E0B;   /* Amber */
  --color-type-playbook:     #EC4899;   /* Pink */

  /* ── Space accent fallback ──────────────────────────────── */
  /* Per-space accent is set inline via [data-space-theme]; this is
     the default so components don't 500 when no space context exists. */
  --space-accent:        var(--color-primary);
  --space-accent-hover:  var(--color-primary-hover);
  --space-accent-light:  var(--color-primary-light);
  --space-accent-rgb:    79, 70, 229;
}