/* ============================================================================
   Tech6Sense Admin v3 — design tokens
   Light theme only (by design — no dark mode). Every other stylesheet only
   references these variables, never a raw color, so a future palette change
   is a one-file edit.
============================================================================ */

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

:root {
  /* Page & surfaces */
  --bg-primary:      #f5f6f8;
  --bg-secondary:    #eef0f3;
  --bg-card:         #ffffff;

  /* Sidebar — deliberately its own surface, distinct from the page bg */
  --sb-bg:           #ffffff;
  --sb-border:       #e7e9ee;
  --sb-text:         #5b6472;
  --sb-text-dim:     #9aa3b1;
  --sb-hover:        #f2f4f7;
  --sb-active-bg:    #e6f3ef;
  --sb-active-text:  #0d6e56;

  /* Text */
  --text-primary:    #111827;
  --text-secondary:  #4b5563;
  --text-muted:      #8a94a3;

  /* Brand accent (single, used sparingly — primary buttons, links, active states) */
  --accent:          #0d6e56;
  --accent-hover:    #0a5642;
  --accent-light:    #e6f3ef;
  --accent-text:     #0a5642;
  --accent-glow:     rgba(13,110,86,0.14);

  /* Semantic (status) */
  --success:         #16a34a;
  --success-light:   #ecfdf3;
  --success-text:    #15803d;
  --danger:          #dc2626;
  --danger-light:    #fef2f2;
  --danger-text:     #b91c1c;
  --warning:         #b45309;
  --warning-light:   #fffbeb;
  --warning-text:    #92400e;
  --info:            #0369a1;
  --info-light:      #f0f9ff;
  --info-text:       #0369a1;
  --violet:          #6d28d9;
  --violet-light:    #f5f3ff;
  --violet-text:     #5b21b6;
  --pink:            #be185d;
  --pink-light:      #fdf2f8;
  --pink-text:       #9d174d;
  --neutral-light:   #f3f4f6;
  --neutral-text:    #374151;

  --border:          #e5e7eb;
  --border-strong:   #d1d5db;
  --shadow-xs:       0 1px 2px rgba(17,24,39,0.04);
  --shadow-sm:       0 2px 6px rgba(17,24,39,0.06);
  --shadow-md:       0 8px 20px rgba(17,24,39,0.08);

  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  10px;

  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Stat-tile icon-chip colors — a solid {color, light-tint} pair per metric,
     used as a small icon badge (not a full-bleed card fill). Kept as
     variables so the palette can be retuned without touching component CSS. */
  --stat-blue:        #2563eb;   --stat-blue-light:   #eff6ff;
  --stat-green:       #16a34a;   --stat-green-light:  #ecfdf3;
  --stat-orange:      #c2670c;   --stat-orange-light: #fff7ed;
  --stat-red:         #dc2626;   --stat-red-light:    #fef2f2;
  --stat-teal:        #0d6e56;   --stat-teal-light:   #e6f3ef;
  --stat-purple:      #6d28d9;   --stat-purple-light: #f5f3ff;
  --stat-cyan:        #0e7490;   --stat-cyan-light:   #ecfeff;
  --stat-pink:        #be185d;   --stat-pink-light:   #fdf2f8;
  --stat-slate:       #475569;   --stat-slate-light:  #f1f5f9;
}