/* ==========================================================================
   CareEco Brand Design Tokens — single source of truth
   Primary (Brand Blue #196EE6) and Secondary (Teal-Green, from the logo
   mark). Every page/app in this project links this file first, then maps
   its own local variable names onto these tokens.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------- *
   * PRIMARY — Brand Blue
   * Base: #196EE6
   * ---------------------------------------------------------------------- */
  --brand-primary-50:  #F4F8FE;
  --brand-primary-100: #E8F0FC;
  --brand-primary-200: #CCDFFA;
  --brand-primary-300: #A3C5F5;
  --brand-primary-400: #6AA1EF;
  --brand-primary-500: #357FE9;
  --brand-primary-600: #196EE6; /* brand anchor */
  --brand-primary-700: #155EC4;
  --brand-primary-800: #124DA1;
  --brand-primary-900: #0E3C7E;

  /* ---------------------------------------------------------------------- *
   * SECONDARY — Brand Navy
   * Base: #1A154C. Very dark, so 600-900 all pass AA on white (16.7:1+).
   * ---------------------------------------------------------------------- */
  --brand-secondary-50:  #F4F3F6;
  --brand-secondary-100: #E8E8ED;
  --brand-secondary-200: #CDCCD8;
  --brand-secondary-300: #A3A1B7;
  --brand-secondary-400: #6A678B;
  --brand-secondary-500: #353161;
  --brand-secondary-600: #1A154C; /* brand anchor */
  --brand-secondary-700: #161241;
  --brand-secondary-800: #120F35;
  --brand-secondary-900: #0E0C2A;

  /* ---------------------------------------------------------------------- *
   * NEUTRAL — cool slate scale, harmonizes with the indigo primary
   * ---------------------------------------------------------------------- */
  --brand-neutral-50:  #F8FAFC;
  --brand-neutral-100: #F1F5F9;
  --brand-neutral-200: #E2E8F0;
  --brand-neutral-300: #CBD5E1;
  --brand-neutral-400: #94A3B8;
  --brand-neutral-500: #64748B;
  --brand-neutral-600: #475569;
  --brand-neutral-700: #334155;
  --brand-neutral-800: #1E293B;
  --brand-neutral-900: #0F172A;

  /* ---------------------------------------------------------------------- *
   * SEMANTIC — standard status colors (the one allowed exception to the
   * logo-only palette rule). "-fg" tones are contrast-verified >= 4.5:1 on
   * white; "-bg" tones are light tints for badges/alerts/banners.
   * ---------------------------------------------------------------------- */
  --brand-success-bg:     #DCFCE7;
  --brand-success-border: #86EFAC;
  --brand-success-fg:     #15803D;

  --brand-warning-bg:     #FEF3C7;
  --brand-warning-border: #FCD34D;
  --brand-warning-fg:     #B45309;

  --brand-error-bg:      #FEE2E2;
  --brand-error-border:  #FCA5A5;
  --brand-error-fg:      #B91C1C;

  --brand-info-bg:      #DBEAFE;
  --brand-info-border:  #93C5FD;
  --brand-info-fg:      #1D4ED8;

  /* ---------------------------------------------------------------------- *
   * ICON GRADIENTS — the standard four-color rotation for icon chips,
   * avatars, and badges across the whole site. Icon glyphs on top of these
   * are always white (#FFFFFF).
   * ---------------------------------------------------------------------- */
  --icon-grad-teal:   linear-gradient(135deg, #00A5A8 0%, #008587 100%);
  --icon-grad-green:  linear-gradient(135deg, #10B981 0%, #059669 100%);
  --icon-grad-orange: linear-gradient(135deg, #F7941D 0%, #E07D0A 100%);
  --icon-grad-indigo: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);

  /* ---------------------------------------------------------------------- *
   * Shared shape / elevation / spacing primitives
   * ---------------------------------------------------------------------- */
  --brand-radius-sm: 6px;
  --brand-radius-md: 10px;
  --brand-radius-lg: 16px;
  --brand-radius-xl: 22px;
  --brand-radius-pill: 999px;

  --brand-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.06);
  --brand-shadow-md: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.06);
  --brand-shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.06);

  --brand-space-xs: 0.5rem;
  --brand-space-sm: 1rem;
  --brand-space-md: 1.5rem;
  --brand-space-lg: 2.5rem;
  --brand-space-xl: 4rem;
}