/* ============================================================
   RIIMS — Color Tokens
   Deep medical blue · kidney/health green · warm cream accents
   ============================================================ */

:root {
  /* ---- Base neutrals ---- */
  --white: #ffffff;
  --black: #0a1722;

  --neutral-25:  #fbfcfd;
  --neutral-50:  #f5f7f9;
  --neutral-100: #eaeef2;
  --neutral-200: #d9e0e7;
  --neutral-300: #bcc7d1;
  --neutral-400: #94a3b1;
  --neutral-500: #6c7c8b;
  --neutral-600: #50606e;
  --neutral-700: #3a4854;
  --neutral-800: #27323c;
  --neutral-900: #16212b;

  /* ---- Primary · Deep Medical Blue ---- */
  --blue-50:  #eaf2fb;
  --blue-100: #cfe1f5;
  --blue-200: #a3c5ea;
  --blue-300: #6fa2db;
  --blue-400: #3f7dc6;
  --blue-500: #1f63ad;   /* brand mid */
  --blue-600: #114e8f;   /* brand primary */
  --blue-700: #0c3d72;
  --blue-800: #0a2f59;
  --blue-900: #082545;   /* deepest — headers, footer */

  /* ---- Secondary · Kidney / Health Green ---- */
  --green-50:  #e8f7ef;
  --green-100: #c8ecd9;
  --green-200: #97dbb8;
  --green-300: #5fc492;
  --green-400: #2faa71;
  --green-500: #14905b;  /* brand green */
  --green-600: #0d764a;
  --green-700: #0a5d3b;
  --green-800: #08482e;

  /* ---- Primary accent · Apollo-style Teal / Petrol ---- */
  --teal-50:  #e6f3f4;
  --teal-100: #c3e2e4;
  --teal-200: #8fc7cb;
  --teal-300: #57a8af;
  --teal-400: #2c8b93;
  --teal-500: #0f757d;  /* mid */
  --teal-600: #0a6168;  /* brand primary (Apollo teal) */
  --teal-700: #084e54;
  --teal-800: #063b40;
  --teal-900: #042d31;  /* deepest — header bar, footer */

  /* ---- Accent · Warm Cream / Beige ---- */
  --cream-50:  #fdfbf6;
  --cream-100: #f8f2e6;
  --cream-200: #efe4cd;
  --cream-300: #e4d3ad;
  --sand-400:  #cbb27e;
  --sand-500:  #a98c52;

  /* ---- WhatsApp / brand utility ---- */
  --whatsapp: #25d366;
  --whatsapp-dark: #1da851;

  /* ---- Semantic status ---- */
  --success: #14905b;
  --success-soft: #e8f7ef;
  --warning: #c98a14;
  --warning-soft: #fbf2dd;
  --danger:  #c0392b;
  --danger-soft: #fbeae7;
  --info:    #1f63ad;
  --info-soft: #eaf2fb;

  /* ============================================================
     SEMANTIC ALIASES — reference these in components/UI
     ============================================================ */

  /* Brand — Apollo-inspired teal primary, RIIMS green secondary */
  --brand-primary: var(--teal-600);
  --brand-primary-hover: var(--teal-700);
  --brand-primary-press: var(--teal-800);
  --brand-secondary: var(--green-500);
  --brand-secondary-hover: var(--green-600);
  --brand-accent: var(--cream-200);

  /* Surfaces / backgrounds */
  --surface-page: var(--white);
  --surface-subtle: var(--neutral-25);
  --surface-muted: var(--neutral-50);
  --surface-card: var(--white);
  --surface-cream: var(--cream-100);
  --surface-cream-deep: var(--cream-200);
  --surface-blue-soft: var(--teal-50);
  --surface-green-soft: var(--green-50);
  --surface-inverse: var(--teal-900);
  --surface-overlay: rgba(4, 45, 49, 0.55);

  /* Text */
  --text-strong: var(--neutral-900);
  --text-body: var(--neutral-700);
  --text-muted: var(--neutral-500);
  --text-faint: var(--neutral-400);
  --text-on-brand: var(--white);
  --text-on-cream: var(--teal-800);
  --text-link: var(--teal-600);
  --text-brand: var(--teal-700);
  --text-accent: var(--green-600);

  /* Borders */
  --border-subtle: var(--neutral-100);
  --border-default: var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-brand: var(--teal-200);
  --border-focus: var(--teal-500);

  /* Icon */
  --icon-default: var(--neutral-600);
  --icon-brand: var(--teal-600);
  --icon-accent: var(--green-500);
}