/* ============================================================
   HipocratIA — Design Tokens (Single Source of Truth)
   Load BEFORE app.css and all other stylesheets.

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

   Breakpoints (not valid as CSS custom properties — use as reference):
     --bp-mobile:  768px   (phones — hamburger, stack layouts)
     --bp-tablet:  1024px  (tablets — mid-width adjustments)
     --bp-desktop: 1280px  (full desktop layouts)
   ============================================================ */

:root {
  /* ── Brand: Navy ────────────────────────────────────────── */
  --navy:   #0a1628;
  --navy-2: #0f2044;
  --navy-3: #162847;
  --navy-4: #1e3460;

  /* ── Brand: Teal ────────────────────────────────────────── */
  --teal:        #00b8a0;
  --teal-d:      #009e8a;
  --teal-dd:     #007a6b;
  --teal-pale:   #e6f9f7;
  --teal-pale-2: #c8f4ef;

  /* ── Neutrals ───────────────────────────────────────────── */
  --white:    #ffffff;
  --light:    #f8fafc;
  --light-2:  #f1f5f9;
  --light-3:  #e9eff6;
  --border:   #e2e8f0;
  --border-2: #cbd5e1;

  /* ── Text ───────────────────────────────────────────────── */
  --text:   #0a1628;
  --text-2: #334155;
  --text-3: #64748b;
  --text-4: #94a3b8;

  /* ── Legacy aliases (backward compat — prefer --text-*) ── */
  --gray:   #64748b;
  --gray-2: #94a3b8;

  /* ── Semantic colors ────────────────────────────────────── */
  --color-primary: #00b8a0;   /* alias for --teal */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error:   #ef4444;   /* alias for --danger */
  --color-info:    #3b82f6;

  --success:      #10b981;
  --success-pale: #d1fae5;
  --warning:      #f59e0b;
  --warning-pale: #fef3c7;
  --danger:       #ef4444;
  --danger-pale:  #fee2e2;
  --info:         #3b82f6;
  --info-pale:    #dbeafe;

  /* --error kept as separate token (auth forms use #e53e3e, not --danger) */
  --error: #e53e3e;

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-xs:   0 1px 2px rgba(0,0,0,.05);
  --shadow-sm:   0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --shadow-md:   0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.05);
  --shadow-lg:   0 10px 15px rgba(0,0,0,.07), 0 4px 6px rgba(0,0,0,.05);
  --shadow-xl:   0 20px 25px rgba(0,0,0,.08), 0 10px 10px rgba(0,0,0,.04);
  --shadow-teal: 0 4px 16px rgba(0,184,160,.25);

  /* ── Typography ─────────────────────────────────────────── */
  --font-sans:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif:   'Fraunces', Georgia, serif;
  --font-ui:      'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: var(--font-serif);   /* semantic alias */
  --font-body:    var(--font-sans);    /* semantic alias */

  /* ── Text sizes ─────────────────────────────────────────── */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-lg:   16px;
  --text-xl:   18px;

  /* ── Border radius ──────────────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* Legacy aliases (backward compat — prefer --radius-*) */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-2xl:  24px;
  --r-full: 9999px;

  /* ── Spacing scale (8px base) ───────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Legacy aliases (backward compat — prefer --space-*) */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;

  /* ── Transitions ────────────────────────────────────────── */
  --t-fast: .12s ease;
  --t-base: .18s ease;
  --t-slow: .3s ease;

  /* ── Layout ─────────────────────────────────────────────── */
  --max-w:    1200px;
  --max-w-sm: 680px;

  /* ── Navbar ─────────────────────────────────────────────── */
  --nb-h:      64px;
  --nb-bg:     #070f1f;
  --nb-border: rgba(255,255,255,.07);
  --ann-nb-h:  0px;

  /* ── Admin sidebar ──────────────────────────────────────── */
  --sb-w:      256px;
  --sb-w-col:  64px;
  --sb-bg:     #060e1a;
  --sb-border: rgba(255,255,255,.05);
  --sb-hover:  rgba(255,255,255,.055);
  --sb-active: rgba(0,184,160,.12);
}

/* ── Dark mode overrides ─────────────────────────────────── */
[data-theme="dark"] {
  --white:    #0f172a;
  --light:    #1a2740;
  --light-2:  #1e2f4a;
  --light-3:  #243654;
  --border:   rgba(255,255,255,.08);
  --border-2: rgba(255,255,255,.13);

  /* Flip navy so color:var(--navy) is readable on dark backgrounds */
  --navy:   #dde4f0;
  --navy-2: #c8d3e8;
  --navy-3: #b8c6de;
  --navy-4: #a4b3ce;

  --text:   #e2e8f0;
  --text-2: #cbd5e1;
  --text-3: #94a3b8;
  --text-4: #64748b;

  --gray:   #94a3b8;
  --gray-2: #64748b;

  --teal-pale:   rgba(0,184,160,.13);
  --teal-pale-2: rgba(0,184,160,.2);

  --success-pale: rgba(16,185,129,.13);
  --warning-pale: rgba(245,158,11,.13);
  --danger-pale:  rgba(239,68,68,.13);
  --info-pale:    rgba(59,130,246,.13);

  --shadow-xs: 0 1px 2px rgba(0,0,0,.25);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.22);
  --shadow-md: 0 4px 6px rgba(0,0,0,.28), 0 2px 4px rgba(0,0,0,.22);
  --shadow-lg: 0 10px 15px rgba(0,0,0,.3), 0 4px 6px rgba(0,0,0,.22);
  --shadow-xl: 0 20px 25px rgba(0,0,0,.32), 0 10px 10px rgba(0,0,0,.22);
}