/* OtherAI color system.
   Core identity is black & white. Five vibrant accents — one per pillar:
   Signal Blue (high tech), Inclusion Magenta (inclusion), Equity Gold
   (education equity), Access Green (accessibility), Care Coral (charity). */
:root {
  /* ---- Core: ink & paper ---- */
  --ink: #0B0B0C;
  --paper: #FFFFFF;

  /* Neutral scale (warm-free, pure grays) */
  --gray-900: #0B0B0C;
  --gray-800: #232327;
  --gray-700: #3C3C42;
  --gray-600: #55555C;
  --gray-500: #75757E;
  --gray-400: #9B9BA3;
  --gray-300: #C6C6CC;
  --gray-200: #E4E4E8;
  --gray-100: #F2F2F4;
  --gray-050: #F8F8F9;

  /* ---- Pillar accents ---- */
  --blue: #2B5BF7;        /* Signal Blue — high tech */
  --blue-deep: #1B3FC4;
  --blue-tint: #E3EAFE;

  --magenta: #E0379B;     /* Inclusion Magenta — inclusion */
  --magenta-deep: #B02076;
  --magenta-tint: #FBE4F2;

  --gold: #FFB81C;        /* Equity Gold — education equity */
  --gold-deep: #B97900;
  --gold-tint: #FFF1D1;

  --green: #00A878;       /* Access Green — accessibility */
  --green-deep: #007D59;
  --green-tint: #DCF5EC;

  --coral: #FF5A3C;       /* Care Coral — charity & community care */
  --coral-deep: #D93A20;
  --coral-tint: #FFE5DF;

  /* ---- Semantic aliases ---- */
  --surface-page: var(--paper);
  --surface-card: var(--paper);
  --surface-sunken: var(--gray-050);
  --surface-inverse: var(--ink);

  --text-body: var(--ink);
  --text-muted: var(--gray-600);
  --text-faint: var(--gray-500);
  --text-inverse: var(--paper);
  --text-link: var(--blue-deep);

  --border-strong: var(--ink);
  --border-default: var(--gray-300);
  --border-subtle: var(--gray-200);

  --accent-primary: var(--ink);          /* primary actions are ink */
  --accent-interactive: var(--blue);     /* links, focus, selection */
  --focus-ring: var(--blue);

  --status-info: var(--blue);
  --status-success: var(--green-deep);
  --status-warning: var(--gold-deep);
  --status-danger: var(--coral-deep);
  --status-info-bg: var(--blue-tint);
  --status-success-bg: var(--green-tint);
  --status-warning-bg: var(--gold-tint);
  --status-danger-bg: var(--coral-tint);
}