/* =====================================================================
   ZeeHIS — Brand Theme Tokens
   Hospital Information System · by ZeeTechCompany
   Version 1.0
   ===================================================================== */

:root {
  /* Brand colors */
  --zee-teal:        #0F7C7B;  /* Primary — clinical trust */
  --zee-petrol:      #074E64;  /* Deep surfaces, headers   */
  --zee-orange:      #F78E26;  /* Signal accent, pulse     */
  --zee-ink:         #1A2A2E;  /* Body text                */
  --zee-cloud:       #FAFCFC;  /* App background           */

  /* Tints & states */
  --zee-teal-600:    #0C6968;
  --zee-teal-100:    #E4F3F2;
  --zee-orange-600:  #E07A14;
  --zee-orange-100:  #FDEFE0;

  /* Functional */
  --zee-success:     #2EAA78;
  --zee-warning:     #F2A93B;
  --zee-danger:      #CD4646;
  --zee-border:      #E1E8E8;
  --zee-muted:       #6E7E82;

  /* Gradient (icon background) */
  --zee-gradient: linear-gradient(135deg, #128C88 0%, #074E64 100%);

  /* Typography */
  --zee-font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --zee-radius: 14px;
  --zee-radius-lg: 22px;

  /* Elevation */
  --zee-shadow-sm: 0 1px 3px rgba(7,78,100,.12);
  --zee-shadow-md: 0 6px 18px rgba(7,78,100,.16);
}

/* Base */
body {
  font-family: var(--zee-font);
  color: var(--zee-ink);
  background: var(--zee-cloud);
}

/* Buttons */
.zee-btn {
  font-family: var(--zee-font);
  font-weight: 600;
  border: none;
  border-radius: var(--zee-radius);
  padding: 12px 22px;
  cursor: pointer;
  transition: background .15s ease, transform .05s ease;
}
.zee-btn-primary { background: var(--zee-teal);   color: #fff; }
.zee-btn-primary:hover { background: var(--zee-teal-600); }
.zee-btn-accent  { background: var(--zee-orange); color: #fff; }
.zee-btn-accent:hover { background: var(--zee-orange-600); }
.zee-btn:active { transform: translateY(1px); }

/* Header bar */
.zee-appbar {
  background: var(--zee-gradient);
  color: #fff;
  padding: 16px 24px;
  box-shadow: var(--zee-shadow-md);
}

/* Cards */
.zee-card {
  background: #fff;
  border: 1px solid var(--zee-border);
  border-radius: var(--zee-radius-lg);
  box-shadow: var(--zee-shadow-sm);
  padding: 20px;
}

/* Links */
a { color: var(--zee-teal); }
a:hover { color: var(--zee-orange); }
