/* ===========================================================================
   CamMonitor Design Tokens
   ---------------------------------------------------------------------------
   Drop this file into any HTML mock with:
       <link rel="stylesheet" href="<path>/colors_and_type.css">

   It defines:
     - The full Tailwind-compatible colour palette used by the product
     - Semantic colour tokens (fg, bg, borders, status)
     - Type ramp (IBM Plex Sans + IBM Plex Mono)
     - Radii, shadows, spacing
     - A small set of semantic typography classes (.h1, .h2, .p, .pill, ...)

   The product itself uses Tailwind. These CSS vars mirror those decisions so
   you can author mocks in plain HTML and stay visually aligned.
   ========================================================================= */


/* --- Webfont loading -------------------------------------------------------
   IBM Plex Sans + IBM Plex Mono, served from Google Fonts.
   Self-hosted .woff2 files also live in fonts/ for offline use; if you'd
   rather use those, swap the @import below for the local @font-face rules
   in fonts/plex.css.
--------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');


:root {
  /* =========================================================================
     1 — RAW PALETTE
     Mirrors the Tailwind 3.x default palette for the families CamMonitor uses.
     Use these directly only when you need an exact shade; otherwise prefer the
     semantic tokens below.
     ====================================================================== */

  /* Slate (sidebar, login splash) */
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;  /* sidebar bg */
  --slate-900: #0f172a;

  /* Gray (canvas, body text, borders) */
  --gray-50:  #f9fafb;   /* page canvas */
  --gray-100: #f3f4f6;   /* subtle dividers / hover bg */
  --gray-200: #e5e7eb;   /* form borders */
  --gray-300: #d1d5db;   /* input borders, disabled */
  --gray-400: #9ca3af;   /* tertiary text, decorative icons */
  --gray-500: #6b7280;   /* secondary text */
  --gray-600: #4b5563;
  --gray-700: #374151;   /* body text */
  --gray-800: #1f2937;   /* heading text */
  --gray-900: #111827;   /* login bg */

  /* Blue — brand accent */
  --blue-50:  #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;   /* primary */
  --blue-700: #1d4ed8;   /* hover */
  --blue-800: #1e40af;

  /* Green — healthy / online */
  --green-50:  #f0fdf4;
  --green-100: #dcfce7;
  --green-400: #4ade80;
  --green-500: #22c55e;
  --green-600: #16a34a;
  --green-700: #15803d;

  /* Amber — warning */
  --amber-50:  #fffbeb;
  --amber-100: #fef3c7;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --amber-700: #b45309;

  /* Yellow — mid-band of the progress bar */
  --yellow-400: #facc15;

  /* Red — critical / offline / destructive */
  --red-50:  #fef2f2;
  --red-100: #fee2e2;
  --red-200: #fecaca;
  --red-400: #f87171;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-700: #b91c1c;

  /* Purple — used in one place only (admin role badge) */
  --purple-100: #f3e8ff;
  --purple-700: #7e22ce;

  /* =========================================================================
     Parent-brand colours
     Sampled from the real Mobilitics + Redia marks. Use these for parent-brand
     surfaces (login splash backdrop, About / Legal pages, marketing collateral)
     — NOT for the operator dashboard chrome, which stays on Tailwind blue 600.
     ====================================================================== */

  /* Mobilitics — product brand (Smart City & Mobility) */
  --mobilitics-deep:  #1c3878;  /* wordmark indigo navy */
  --mobilitics-blue:  #4f7cc2;  /* emblem light steel-blue */
  --mobilitics-tint:  #dde7f5;  /* faint background tint sampled from emblem ring */

  /* Redia — parent R&D org */
  --redia-indigo:     #4f4fcf;  /* "REDIA" wordmark indigo */
  --redia-violet:     #6c4dd0;  /* purple bubble */
  --redia-blue:       #4669e0;  /* blue bubble */
  --redia-coral:      #e15a8a;  /* magenta bubble */
  --redia-amber:      #f4b14d;  /* yellow bubble */
  --redia-rose:       #ee788a;  /* pink dot */


  /* =========================================================================
     2 — SEMANTIC TOKENS
     Reach for these in new components.
     ====================================================================== */

  /* Background surfaces */
  --bg-canvas:    var(--gray-50);
  --bg-surface:   #ffffff;
  --bg-subtle:    var(--gray-100);
  --bg-sidebar:   var(--slate-800);
  --bg-sidebar-hover: var(--slate-700);
  --bg-splash:    var(--gray-900);

  /* Foreground (text) */
  --fg-1:         var(--gray-800);   /* primary heading */
  --fg-2:         var(--gray-700);   /* body */
  --fg-3:         var(--gray-500);   /* secondary */
  --fg-4:         var(--gray-400);   /* tertiary / decorative */
  --fg-5:         var(--gray-300);   /* disabled / hint */
  --fg-on-dark:   #ffffff;
  --fg-on-dark-dim: var(--slate-300);
  --fg-on-dark-low: var(--slate-500);

  /* Brand & links */
  --brand:        var(--blue-600);
  --brand-hover:  var(--blue-700);
  --brand-tint:   var(--blue-50);
  --link:         var(--blue-600);
  --focus-ring:   var(--blue-500);

  /* Status — paired bg + fg per semantic state */
  --status-online-fg:  var(--green-700);
  --status-online-bg:  var(--green-50);
  --status-online-dot: var(--green-500);

  --status-offline-fg: var(--red-600);
  --status-offline-bg: var(--red-50);
  --status-offline-dot:var(--red-500);

  --status-warn-fg:    var(--amber-600);
  --status-warn-bg:    var(--amber-50);
  --status-warn-dot:   var(--amber-500);

  --status-unreach-fg: var(--gray-400);
  --status-unreach-dot:var(--gray-400);

  --status-info-fg:    var(--blue-700);
  --status-info-bg:    var(--blue-50);
  --status-info-dot:   var(--blue-400);

  /* Borders */
  --border-hairline: var(--gray-100);  /* between table rows, inside cards */
  --border-default:  var(--gray-200);  /* card outline */
  --border-strong:   var(--gray-300);  /* form inputs */
  --border-on-dark:  var(--slate-700);

  /* Progress bar colour map (matches barColor() in ExportTable.jsx) */
  --bar-ok:    var(--green-400);
  --bar-warn:  var(--yellow-400);
  --bar-crit:  var(--red-500);


  /* =========================================================================
     3 — TYPOGRAPHY
     ====================================================================== */
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont,
               "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo,
               Consolas, monospace;

  /* Size / line-height pairs (Tailwind text-{} parity) */
  --text-xs:        12px;   --leading-xs:   16px;
  --text-sm:        14px;   --leading-sm:   20px;
  --text-base:      16px;   --leading-base: 24px;
  --text-lg:        18px;   --leading-lg:   28px;
  --text-xl:        20px;   --leading-xl:   28px;
  --text-2xl:       24px;   --leading-2xl:  32px;
  --text-3xl:       30px;   --leading-3xl:  36px;

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Tracking */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;   /* used on the "REDIA — v1.0" footer */


  /* =========================================================================
     4 — RADIUS
     ====================================================================== */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-full: 9999px;


  /* =========================================================================
     5 — SHADOW / ELEVATION
     Tailwind-default values, included verbatim so they survive copy-paste.
     ====================================================================== */
  --shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-focus: 0 0 0 2px var(--focus-ring);


  /* =========================================================================
     6 — SPACING SCALE
     4-px grid — matches Tailwind 1..12 plus a few we actually use.
     ====================================================================== */
  --space-0:  0px;
  --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;   /* header height */
  --space-56: 224px;  /* sidebar / filter rail width */


  /* =========================================================================
     7 — LAYOUT CONSTANTS
     ====================================================================== */
  --header-h:    64px;
  --sidebar-w:   224px;
  --rail-w:      224px;
  --content-pad: 24px;


  /* =========================================================================
     8 — MOTION
     ====================================================================== */
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:   150ms;
  --duration-normal: 200ms;
  --duration-slow:   300ms;
  --duration-bar:    500ms;
}


/* ===========================================================================
   9 — SEMANTIC TYPOGRAPHY CLASSES
   Use these in HTML mocks. They are not Tailwind classes — pure CSS.
   ========================================================================= */

html, body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  color: var(--fg-2);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.h1, h1.cm {
  font-size: var(--text-2xl);
  line-height: var(--leading-2xl);
  font-weight: var(--weight-bold);
  color: var(--fg-1);
  letter-spacing: var(--tracking-tight);
}
.h2, h2.cm {
  font-size: var(--text-xl);
  line-height: var(--leading-xl);
  font-weight: var(--weight-bold);
  color: var(--fg-1);
}
.h3, h3.cm {
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
  font-weight: var(--weight-semibold);
  color: var(--fg-2);
}
.h4, h4.cm {
  font-size: var(--text-base);
  line-height: var(--leading-base);
  font-weight: var(--weight-semibold);
  color: var(--fg-2);
}

.p, p.cm {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--fg-2);
}

.subtitle {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--fg-3);
}

.label {
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  font-weight: var(--weight-medium);
  color: var(--fg-3);
}

.meta {
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  color: var(--fg-4);
}

.mono, code.cm {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  color: var(--fg-2);
}

.ip {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--fg-1);
}

.footer-stamp {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-on-dark-low);
  text-align: center;
}


/* ===========================================================================
   10 — UTILITY PILLS (used everywhere on the dashboard)
   ========================================================================= */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-xs);
}
.pill-tag      { background: var(--gray-100);          color: var(--gray-600); }
.pill-online   { background: var(--status-online-bg);  color: var(--status-online-fg); }
.pill-offline  { background: var(--status-offline-bg); color: var(--status-offline-fg); }
.pill-warn     { background: var(--status-warn-bg);    color: var(--status-warn-fg); }
.pill-info     { background: var(--status-info-bg);    color: var(--status-info-fg); }
.pill-admin    { background: var(--purple-100);        color: var(--purple-700); }
.pill-user     { background: var(--blue-100);          color: var(--blue-700); }

.dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  display: inline-block;
}
.dot-sm { width: 6px;  height: 6px;  }
.dot-md { width: 10px; height: 10px; }
.dot-online   { background: var(--status-online-dot); }
.dot-offline  { background: var(--status-offline-dot); }
.dot-warn     { background: var(--status-warn-dot); }
.dot-info     { background: var(--status-info-dot); animation: cm-pulse 2s ease-in-out infinite; }
.dot-unreach  { background: var(--status-unreach-dot); }

@keyframes cm-pulse {
  0%, 100% { opacity: 1;    }
  50%      { opacity: 0.45; }
}

@keyframes cm-spin {
  to { transform: rotate(360deg); }
}
.spin { animation: cm-spin 1s linear infinite; }