/* ============================================================================
   HEZKY TECH — Design Foundations
   Industrial monitoring & incident-management. Built around the brand mark's
   confident location-pin blue (#2070C0) and a clean, technical type system.
   ----------------------------------------------------------------------------
   Fonts: Playfair Display (display — an editorial high-contrast serif that adds
          refinement against the technical base), IBM Plex Sans (UI/body),
          IBM Plex Mono (readings, IDs, timestamps).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&family=DM+Mono:wght@300;400;500&display=swap');

:root {
  /* ---------------------------------------------------------------- BRAND */
  --hz-blue-50:  #EAF2FB;
  --hz-blue-100: #D2E4F6;
  --hz-blue-200: #A6C9ED;
  --hz-blue-300: #6FA8DF;
  --hz-blue-400: #3D88D0;
  --hz-blue-500: #2070C0;   /* PRIMARY — sampled from logo */
  --hz-blue-600: #1A5D9E;   /* hover */
  --hz-blue-700: #164E84;   /* press / deep */
  --hz-blue-800: #133F6B;
  --hz-blue-900: #0F3050;

  --hz-primary:        var(--hz-blue-500);
  --hz-primary-hover:  var(--hz-blue-600);
  --hz-primary-press:  var(--hz-blue-700);

  /* ----------------------------------------------- NEUTRALS (cool slate) */
  --hz-white: #FFFFFF;
  --hz-slate-25:  #FAFBFC;
  --hz-slate-50:  #F4F6F9;
  --hz-slate-100: #E9EDF2;
  --hz-slate-200: #D6DDE6;
  --hz-slate-300: #B6C1CE;
  --hz-slate-400: #8694A6;
  --hz-slate-500: #5F6E80;
  --hz-slate-600: #475463;
  --hz-slate-700: #34404D;
  --hz-slate-800: #222B35;
  --hz-slate-900: #141A21;
  --hz-slate-950: #0C1014;

  /* --------------------------------------------------- SEMANTIC / STATUS */
  /* Critical — active alarm, life-safety / cold-chain breach */
  --hz-critical:        #D92D20;
  --hz-critical-strong: #B42318;
  --hz-critical-bg:     #FEF0EF;
  --hz-critical-border: #F6BFBA;
  --hz-critical-text:   #8E1A12;

  /* Warning — threshold approaching / deviation */
  --hz-warning:        #DC7A00;
  --hz-warning-strong: #B45F00;
  --hz-warning-bg:     #FDF3E3;
  --hz-warning-border: #F4D49A;
  --hz-warning-text:   #834500;

  /* Nominal — reading in range / acknowledged / closed */
  --hz-nominal:        #1B9E58;
  --hz-nominal-strong: #157A44;
  --hz-nominal-bg:     #E8F6EE;
  --hz-nominal-border: #ABDDC0;
  --hz-nominal-text:   #0F5E34;

  /* Info — brand blue echoes */
  --hz-info:        var(--hz-blue-500);
  --hz-info-bg:     var(--hz-blue-50);
  --hz-info-border: var(--hz-blue-200);
  --hz-info-text:   var(--hz-blue-800);

  /* Offline / unknown / muted */
  --hz-offline:    var(--hz-slate-400);
  --hz-offline-bg: var(--hz-slate-100);

  /* ----------------------------------------------- SEMANTIC SURFACE ROLES */
  --hz-bg:           var(--hz-slate-50);   /* app canvas */
  --hz-surface:      var(--hz-white);      /* cards, panels */
  --hz-surface-2:    var(--hz-slate-25);   /* nested / striped rows */
  --hz-surface-sunk: var(--hz-slate-100);  /* wells, track backgrounds */
  --hz-border:       var(--hz-slate-200);
  --hz-border-strong:var(--hz-slate-300);
  --hz-divider:      var(--hz-slate-100);

  --hz-fg:    var(--hz-slate-900);  /* primary text */
  --hz-fg-2:  var(--hz-slate-600);  /* secondary text */
  --hz-fg-3:  var(--hz-slate-500);  /* tertiary / captions */
  --hz-fg-4:  var(--hz-slate-400);  /* placeholder / disabled */
  --hz-fg-on-primary: #FFFFFF;

  /* ============================================================ TYPE */
  --hz-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --hz-font-sans:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --hz-font-mono:    'DM Mono', ui-monospace, 'SF Mono', 'SFMono-Regular', monospace;

  /* Type scale (px) */
  --hz-text-xs:   12px;
  --hz-text-sm:   13px;
  --hz-text-base: 15px;
  --hz-text-md:   17px;
  --hz-text-lg:   20px;
  --hz-text-xl:   24px;
  --hz-text-2xl:  30px;
  --hz-text-3xl:  38px;
  --hz-text-4xl:  48px;
  --hz-metric:    56px;   /* big sensor readouts */

  --hz-leading-tight: 1.15;
  --hz-leading-snug:  1.3;
  --hz-leading-normal:1.5;

  /* ========================================================= SPACING */
  --hz-space-1:  4px;
  --hz-space-2:  8px;
  --hz-space-3:  12px;
  --hz-space-4:  16px;
  --hz-space-5:  20px;
  --hz-space-6:  24px;
  --hz-space-8:  32px;
  --hz-space-10: 40px;
  --hz-space-12: 48px;
  --hz-space-16: 64px;

  /* ========================================================== RADIUS */
  --hz-radius-sm:   4px;
  --hz-radius-md:   6px;
  --hz-radius-lg:   8px;
  --hz-radius-xl:   12px;
  --hz-radius-2xl:  16px;
  --hz-radius-pill: 999px;

  /* ========================================================= SHADOWS */
  /* cool slate-tinted, restrained — this is industrial software, not consumer */
  --hz-shadow-xs: 0 1px 2px rgba(20, 26, 33, 0.06);
  --hz-shadow-sm: 0 1px 3px rgba(20, 26, 33, 0.08), 0 1px 2px rgba(20, 26, 33, 0.04);
  --hz-shadow-md: 0 4px 10px rgba(20, 26, 33, 0.08), 0 1px 3px rgba(20, 26, 33, 0.06);
  --hz-shadow-lg: 0 12px 28px rgba(20, 26, 33, 0.12), 0 4px 8px rgba(20, 26, 33, 0.06);
  --hz-shadow-overlay: 0 24px 60px rgba(12, 16, 20, 0.28);
  --hz-ring:      0 0 0 3px rgba(32, 112, 192, 0.28);
  --hz-ring-critical: 0 0 0 3px rgba(217, 45, 32, 0.26);

  /* siren glow — used by the high-priority alarm channel UI */
  --hz-siren-glow: 0 0 0 3px rgba(217,45,32,.35), 0 8px 30px rgba(217,45,32,.30);
}

/* ============================================================ SEMANTIC TYPE
   Use these classes directly, or copy the rules into component styles.       */
.hz-display {
  font-family: var(--hz-font-display);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: var(--hz-leading-tight);
  color: var(--hz-fg);
}
.hz-h1 { font-family: var(--hz-font-display); font-weight: 700; font-size: var(--hz-text-3xl); line-height: var(--hz-leading-tight); letter-spacing: .005em; color: var(--hz-fg); }
.hz-h2 { font-family: var(--hz-font-display); font-weight: 600; font-size: var(--hz-text-2xl); line-height: var(--hz-leading-tight); color: var(--hz-fg); }
.hz-h3 { font-family: var(--hz-font-sans); font-weight: 600; font-size: var(--hz-text-lg); line-height: var(--hz-leading-snug); color: var(--hz-fg); }
.hz-h4 { font-family: var(--hz-font-sans); font-weight: 600; font-size: var(--hz-text-md); line-height: var(--hz-leading-snug); color: var(--hz-fg); }

.hz-body   { font-family: var(--hz-font-sans); font-weight: 400; font-size: var(--hz-text-base); line-height: var(--hz-leading-normal); color: var(--hz-fg); }
.hz-body-sm{ font-family: var(--hz-font-sans); font-weight: 400; font-size: var(--hz-text-sm);   line-height: var(--hz-leading-normal); color: var(--hz-fg-2); }
.hz-caption{ font-family: var(--hz-font-sans); font-weight: 400; font-size: var(--hz-text-xs);   line-height: var(--hz-leading-snug);  color: var(--hz-fg-3); }

/* Eyebrow / label — the workhorse for industrial UIs: uppercase, tracked */
.hz-label {
  font-family: var(--hz-font-sans);
  font-weight: 600;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hz-fg-3);
}

/* Monospace — sensor readings, asset IDs, timestamps, audit entries (DM Mono:
   rounded + light for a soft, Apple-like numeric feel) */
.hz-mono   { font-family: var(--hz-font-mono); font-weight: 400; font-size: var(--hz-text-sm); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--hz-fg); }
.hz-reading{ font-family: var(--hz-font-mono); font-weight: 400; font-size: var(--hz-metric); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--hz-fg); }