/* Global Theme */
:root {
  /* ==================================================
     1. COLOR PALETTE (Primitives)
     ================================================== */
  
  /* Primary Blues */
  --vivid-blue: #0066cc;
  --p-600: #2563EB;
  --p-500: #3B82F6;
  --p-100: #DBEAFE;

  /* Feedback Colors */
  --s-green: #28a745; /* Success */
  --s-100: #DCFCE7;
  --w-600: #D97706; /* Warning */
  --w-100: #FEF3C7;
  --e-red: #dc3545; /* Error */
  --e-100: #FEE2E2;

  /* Neutral Grays */
  --g-950: #0F172A; /* Dark Navy Blue */
  --g-900: #111827; /* Primary Text */
  --g-700: #374151; /* Secondary Text */
  --g-500: #6B7280; /* Muted/Disabled */
  --g-300: #D1D5DB; /* Borders */
  --g-200: #E5E7EB; /* Dashboard BG */
  --g-50:  #F9FAFB; /* Row Hover */
  --white: #FFFFFF;

  /* =================================================
     2. THEME (Semantic Tokens)
     ================================================= */

  /* --- Surface Backgrounds --- */
  --bg-app:       var(--g-200);   /* Main Dashboard Area */
  --bg-card:      var(--white);   /* Cards, Tables, Modals */
  --bg-header:    var(--g-100);   /* Table Header Rows */

  /* --- Text Colors --- */
  --text-main:    var(--g-900);   /* Primary Headlines & Row Text */
  --text-side:    var(--g-700);   /* Secondary Content */
  --text-muted:   var(--g-500);   /* Timestamps & Metadata */

  /* --- Action & Interactive --- */
  --action-main:  var(--vivid-blue);   /* Primary Buttons */
  --action-hover: var(--p-600);   /* Button/Link Hover */
  --action-link:  var(--p-500);   /* Standard Blue Links */

  /* --- Status & Logic --- */
  --st-success:    var(--s-green);
  --st-success-bg: var(--s-100);
  --st-warning:    var(--w-600);
  --st-warning-bg: var(--w-100);
  --st-error:      var(--e-red);
  --st-error-bg:   var(--e-100);
  --st-disabled:   var(--g-500);

  /* --- Typography: Weights & Sizes --- */
  --fw-bold: 700;
  --fw-semibold: 600;
  --fw-medium: 500;
  --fw-regular: 400;
  --fs-xl: 28px;
  --fs-lg: 24px;
  --fs-md: 18px;
  --fs-base: 14px;
  --fs-sm: 12px;

  /* --- Spacing --- */
  --space-micro: 8px;
  --space-default: 16px;
  --space-section: 24px;
  --space-page: 32px;
  --space-large: 48px;

  /* --- Elevations & Borders --- */
  --border-std:   var(--g-300);
  --shadow-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-2: 0 4px 6px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.08);
  --shadow-3: 0 10px 15px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.1);
  --shadow-4: 0 20px 25px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.15);
}

/* ==================================================
   3. CSS RESET & BASE STYLES
   ================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Poppins', sans-serif;
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--text-main);
  background-color: var(--bg-app);
  -webkit-font-smoothing: antialiased;
}

main {  margin: 0px 50px 0px 50px;}

h2 {
  margin-bottom:var(--space-default);
}

img, svg {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  color: inherit;
}

/* Removes the default blue outline, replaces with our primary blue */
button:focus {
  outline: 2px solid var(--p-500);
  outline-offset: 2px;
}

/* ==================================================
   4. GLOBAL TRANSITIONS
   ================================================== */
* {
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* ==================================================
   5. STATUS PILLS
   ================================================== */

.pill {
    text-align: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    text-transform: capitalize;
}

.pill-success { background-color: var(--st-success-bg); color: var(--st-success); width:75px;}
.pill-warning { background-color: var(--st-warning-bg); color: var(--st-warning);  width:75px;}
.pill-error   { background-color: var(--st-error-bg);   color: var(--st-error);  width:75px;}
.pill-info    { background-color: var(--p-100);        color: var(--vivid-blue); }

.pill-critical { background: #fde8e8; color: #9b1c1c; width:75px;}
.pill-urgent { background: #fef3c7; color: #92400e; width:75px;}
.pill-stable { background: #e1effe; color: #1e429f; width:75px;}