/* ============================================================
   ThermaGrid Energy — Design Tokens
   Color + Typography foundations
   Industrial blue · clean-tech · institutional
   ============================================================ */

/* ---- Webfonts (Google Fonts) ---------------------------------
   Display + Body: Archivo  (engineered grotesque, institutional)
   Data + labels : IBM Plex Mono  (measurement / metrics voice)
   NOTE: loaded from Google Fonts CDN. For production, self-host
   the .woff2 files and replace this @import.                    */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ============================================================
     COLOR — raw scale
     ============================================================ */

  /* Navy / ink — primary dark surfaces & text */
  --navy-950: #07151F;
  --navy-900: #0A1C2B;
  --navy-800: #0F2942;
  --navy-700: #163A5C;
  --navy-600: #1E4F79;

  /* Signal blue — the primary brand action color */
  --blue-700: #14528F;
  --blue-600: #1668B8;
  --blue-500: #2A82D6;
  --blue-400: #4BA3E8;
  --blue-300: #8DC6F2;
  --blue-100: #DCEBFA;

  /* Electric cyan — energy / live-data accent (use sparingly) */
  --cyan-500: #15B6D6;
  --cyan-400: #2FC8E6;
  --cyan-300: #79DCF0;

  /* Cool slate neutrals */
  --slate-50:  #F5F8FB;
  --slate-100: #ECF1F6;
  --slate-200: #DCE5EE;
  --slate-300: #C3D0DD;
  --slate-400: #98A8B9;
  --slate-500: #6B7C8E;
  --slate-600: #4C5C6E;
  --slate-700: #34424F;
  --white: #FFFFFF;

  /* Semantic status (used sparingly, institutional restraint) */
  --status-positive: #1E9E6B;   /* low-carbon / gains */
  --status-warning:  #D69220;
  --status-critical: #CF4A41;
  --status-info:     var(--blue-500);

  /* ============================================================
     COLOR — semantic roles
     ============================================================ */
  --bg:            var(--white);
  --bg-subtle:     var(--slate-50);
  --bg-muted:      var(--slate-100);
  --surface:       var(--white);
  --surface-inset: var(--slate-50);

  --bg-inverse:        var(--navy-900);
  --bg-inverse-subtle: var(--navy-800);

  --fg:        var(--navy-900);
  --fg-muted:  var(--slate-600);
  --fg-faint:  var(--slate-500);
  --fg-inverse:       var(--white);
  --fg-inverse-muted: var(--slate-300);

  --border:        var(--slate-200);
  --border-strong: var(--slate-300);
  --border-inverse: rgba(255,255,255,0.14);

  --primary:        var(--blue-600);
  --primary-hover:  var(--blue-700);
  --primary-active: var(--navy-800);
  --on-primary:     var(--white);

  --accent:        var(--cyan-500);
  --focus-ring:    rgba(42,130,214,0.45);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans:    'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;
  --weight-black:   800;

  /* Type scale (1.25 major-third-ish, tuned) */
  --text-display: 64px;
  --text-h1: 48px;
  --text-h2: 36px;
  --text-h3: 26px;
  --text-h4: 20px;
  --text-body-lg: 19px;
  --text-body: 16px;
  --text-small: 14px;
  --text-caption: 12.5px;
  --text-kicker: 12px;

  --leading-tight: 1.05;
  --leading-snug: 1.18;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-kicker: 0.16em;
  --tracking-tight: -0.02em;
  --tracking-display: -0.03em;

  /* ============================================================
     RADII / SHADOW / SPACING
     ============================================================ */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(10,28,43,0.06), 0 1px 1px rgba(10,28,43,0.04);
  --shadow-md: 0 4px 12px rgba(10,28,43,0.08), 0 1px 3px rgba(10,28,43,0.05);
  --shadow-lg: 0 16px 40px rgba(10,28,43,0.12), 0 4px 12px rgba(10,28,43,0.06);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.5);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES (opt-in helpers)
   ============================================================ */
.tg-kicker {
  font-family: var(--font-mono);
  font-size: var(--text-kicker);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--primary);
}
.tg-display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg);
}
.tg-h1 { font-family: var(--font-display); font-size: var(--text-h1); font-weight: var(--weight-bold); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--fg); }
.tg-h2 { font-family: var(--font-display); font-size: var(--text-h2); font-weight: var(--weight-bold); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--fg); }
.tg-h3 { font-family: var(--font-display); font-size: var(--text-h3); font-weight: var(--weight-semi); line-height: 1.25; color: var(--fg); }
.tg-h4 { font-family: var(--font-sans); font-size: var(--text-h4); font-weight: var(--weight-semi); line-height: 1.3; color: var(--fg); }
.tg-body-lg { font-family: var(--font-sans); font-size: var(--text-body-lg); font-weight: var(--weight-regular); line-height: var(--leading-relaxed); color: var(--fg-muted); }
.tg-body { font-family: var(--font-sans); font-size: var(--text-body); font-weight: var(--weight-regular); line-height: var(--leading-normal); color: var(--fg-muted); }
.tg-small { font-family: var(--font-sans); font-size: var(--text-small); line-height: var(--leading-normal); color: var(--fg-faint); }
.tg-mono { font-family: var(--font-mono); font-size: var(--text-small); color: var(--fg-muted); }
.tg-metric { font-family: var(--font-mono); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--fg); }