/* =====================================================================
   Cloudpaw Vet Dashboard — themes.css
   All colour + surface tokens live here. Nothing else hardcodes a hex.
   Theme: "sky blue" — clinical, calm, trustworthy.
   ===================================================================== */

:root {
  /* Sky ramp */
  --sky-50:  #f0f9ff;
  --sky-100: #e0f2fe;
  --sky-200: #bae6fd;
  --sky-300: #7dd3fc;
  --sky-400: #38bdf8;
  --sky-500: #0ea5e9;
  --sky-600: #0284c7;
  --sky-700: #0369a1;
  --sky-800: #075985;
  --sky-900: #0c4a6e;

  /* Neutrals */
  --ink:        #0f172a;
  --slate-700:  #334155;
  --slate-500:  #64748b;
  --slate-400:  #94a3b8;
  --slate-300:  #cbd5e1;

  /* Signal colours — used sparingly so they actually signal */
  --urgent:      #f43f5e;  --urgent-soft:  #fff1f2;
  --warn:        #d97706;  --warn-soft:    #fffbeb;
  --ok:          #059669;  --ok-soft:      #ecfdf5;

  /* Semantic surfaces — dimmed light theme, easy on the eyes */
  --bg:          #d9e2ee;
  --card:        #f6f9fc;
  --border:      #cad5e2;
  --border-strong: #b6c3d4;
  --accent:      var(--sky-600);
  --accent-deep: var(--sky-800);
  --accent-soft: #e9f1f8;
  --text:        var(--ink);
  --text-muted:  var(--slate-500);
  --text-faint:  var(--slate-400);
  /* Deep navy sidebar reads more professional than a bright gradient */
  --sidebar-from: #12263a;
  --sidebar-to:   #0c1c2e;

  /* Shape + depth — tighter corners, quieter shadows */
  --r-sm: 7px;
  --r-md: 9px;
  --r-lg: 12px;
  --r-full: 999px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 2px 10px rgba(15, 23, 42, 0.06);
  --shadow-pop: 0 12px 32px rgba(15, 23, 42, 0.20);

  /* Type */
  --font: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}