/* ============================================================
   MUSCA — Design Tokens
   v1.0 · Smart-meter brand system
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap");

:root {
  /* ---------- Brand colors ---------- */
  /* Pressure Blue — primary. Deep, confident, instrument-grade. */
  --musca-blue-50:  #EEF2FF;
  --musca-blue-100: #DDE3FB;
  --musca-blue-200: #B6C2F5;
  --musca-blue-300: #8294EC;
  --musca-blue-400: #4F65DF;
  --musca-blue-500: #2540D2;   /* primary */
  --musca-blue-600: #1B30B5;
  --musca-blue-700: #142589;
  --musca-blue-800: #0E1A63;
  --musca-blue-900: #080F3D;

  /* Live — signal accent. Real-time, "the meter is reading right now". */
  --musca-live-50:  #F5FCE0;
  --musca-live-100: #ECF9C4;
  --musca-live-200: #DCF193;
  --musca-live-300: #C6E85E;
  --musca-live-400: #B0DC2A;   /* signal */
  --musca-live-500: #94C100;
  --musca-live-600: #6F9000;
  --musca-live-700: #4D6500;

  /* Ink — primary text + deep surfaces */
  --musca-ink:      #0A1024;
  --musca-ink-2:    #11182B;
  --musca-ink-3:    #1E2640;

  /* Cream — warm light background, breaks the sterile-IoT-white default */
  --musca-cream:    #F4F1EA;
  --musca-cream-2:  #ECE7DA;
  --musca-paper:    #FBFAF6;
  --musca-white:    #FFFFFF;

  /* Neutrals — warm grey scale */
  --musca-grey-50:  #F5F4F1;
  --musca-grey-100: #E9E7E1;
  --musca-grey-200: #D5D2C9;
  --musca-grey-300: #B1ADA1;
  --musca-grey-400: #847F71;
  --musca-grey-500: #595547;
  --musca-grey-600: #3D3A30;
  --musca-grey-700: #2A2820;

  /* Utility tints — for each meter category */
  --meter-gas:    #F5A623;   /* amber */
  --meter-water:  #00B4D8;   /* aqua */
  --meter-energy: #FFD60A;   /* electric yellow */
  --meter-heat:   #E63946;   /* red — legacy (Musca Heat, retired) */
  --meter-twin:   #2540D2;   /* Pressure Blue — Musca Digital Twin (platform-grade) */
  --meter-twin-bright: #4F65DF; /* lighter blue for dark surfaces */

  /* Semantic */
  --status-ok:    #2EB36A;
  --status-warn:  #F5A623;
  --status-alert: #E5484D;

  /* ---------- Theme — light (default) ---------- */
  --bg:           var(--musca-cream);
  --bg-paper:    var(--musca-paper);
  --bg-elevated: var(--musca-white);
  --fg:          var(--musca-ink);
  --fg-muted:    var(--musca-grey-500);
  --fg-soft:     var(--musca-grey-400);
  --border:      var(--musca-grey-200);
  --border-soft: rgba(10, 16, 36, 0.08);

  --primary:      var(--musca-blue-500);
  --primary-hover: var(--musca-blue-600);
  --primary-fg:   #FFFFFF;
  --accent:       var(--musca-live-400);
  --accent-fg:    var(--musca-ink);

  /* ---------- Type ---------- */
  --font-display: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* Type scale — modular, slightly tightened.
     The large display steps are FLUID (clamp): they scale with the
     viewport so headings never overflow on phones/tablets, while the
     small body steps stay fixed for legibility. Min values are the
     mobile floor, max values the desktop ceiling. */
  --t-xs:    11px;
  --t-sm:    13px;
  --t-base:  15px;
  --t-md:    17px;
  --t-lg:    20px;
  --t-xl:    clamp(20px, 1.4vw + 16px, 24px);
  --t-2xl:   clamp(26px, 2.2vw + 18px, 32px);
  --t-3xl:   clamp(32px, 3.5vw + 18px, 44px);
  --t-4xl:   clamp(40px, 5vw + 20px, 60px);
  --t-5xl:   clamp(48px, 8vw + 16px, 84px);
  --t-6xl:   clamp(60px, 12vw + 8px, 120px);

  /* ---------- Spacing — density-controlled ---------- */
  --density: 1; /* multiplier — Tweaks panel can override */
  --s-1: calc(4px * var(--density));
  --s-2: calc(8px * var(--density));
  --s-3: calc(12px * var(--density));
  --s-4: calc(16px * var(--density));
  --s-5: calc(24px * var(--density));
  --s-6: calc(32px * var(--density));
  --s-7: calc(48px * var(--density));
  --s-8: calc(64px * var(--density));
  --s-9: calc(96px * var(--density));
  --s-10: calc(128px * var(--density));

  /* ---------- Radii ---------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* ---------- Elevation ---------- */
  --shadow-1: 0 1px 2px rgba(10, 16, 36, 0.06);
  --shadow-2: 0 2px 8px rgba(10, 16, 36, 0.08), 0 1px 2px rgba(10, 16, 36, 0.04);
  --shadow-3: 0 12px 32px -8px rgba(10, 16, 36, 0.18), 0 4px 12px rgba(10, 16, 36, 0.06);

  /* ---------- Grid ---------- */
  --container: 1240px;

  /* ---------- Layout / chrome ---------- */
  --nav-h: 64px;            /* sticky nav height — reserve for anchors/scroll */
  --gutter: var(--s-5);     /* page horizontal padding (desktop) */

  /* ---------- Responsive breakpoints (THE STANDARD) ----------
     Use these three tiers consistently across every Musca page:
       --bp-lg   1100px   large laptop → narrow laptop
       --bp-md   1000px   tablet landscape → portrait (collapse columns)
       --bp-sm    640px   phone (single column, mobile nav, fluid type)
     Mobile nav (hamburger drawer) engages at --bp-md.
     These are documentation tokens — media queries can't read var(),
     so the literal px values above are the contract.  */
  --bp-lg: 1100px;
  --bp-md: 1000px;
  --bp-sm: 640px;
}

/* Phone: tighten the page gutter so content isn't crushed by padding. */
@media (max-width: 640px) {
  :root { --gutter: var(--s-4); }
}

/* ---------- Dark mode ---------- */
[data-theme="dark"] {
  --bg:           var(--musca-ink);
  --bg-paper:    var(--musca-ink-2);
  --bg-elevated: var(--musca-ink-3);
  --fg:          #ECEAE3;
  --fg-muted:    #A09B8E;
  --fg-soft:     #6B6759;
  --border:      rgba(255, 255, 255, 0.10);
  --border-soft: rgba(255, 255, 255, 0.05);

  --primary:      var(--musca-blue-400);
  --primary-hover: var(--musca-blue-300);
  --primary-fg:   #FFFFFF;
  --accent:       var(--musca-live-300);
  --accent-fg:    var(--musca-ink);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 2px 12px rgba(0, 0, 0, 0.5);
  --shadow-3: 0 16px 40px -8px rgba(0, 0, 0, 0.6);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

.mono { font-family: var(--font-mono); }
.display { font-family: var(--font-display); }

/* Selection */
::selection { background: var(--accent); color: var(--accent-fg); }

/* ---------- Atomic helpers ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Larger tap targets on touch devices — meet the 44px minimum.
   Applies only where a coarse pointer is the primary input. */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn-sm { min-height: 40px; }
}

/* The compound-eye dot pattern — used as a brand texture */
.dot-grid {
  background-image: radial-gradient(circle, currentColor 1px, transparent 1.5px);
  background-size: 14px 14px;
  background-position: 0 0;
  opacity: 0.15;
}

/* Pulsing "live" indicator dot */
.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent);
  animation: live-pulse 2s ease-out infinite;
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(176, 220, 42, 0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(176, 220, 42, 0); }
  100% { box-shadow: 0 0 0 0 rgba(176, 220, 42, 0); }
}

/* Button system */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: -0.005em;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 120ms ease-out;
  background: transparent;
  color: var(--fg);
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-hover, var(--accent)); border-color: var(--accent-hover, var(--accent)); filter: brightness(0.95); }
.btn-accent {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
  font-weight: 600;
}
.btn-ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--border);
}
.btn-ghost:hover { background: var(--bg-elevated); }
.btn-lg { padding: var(--s-4) var(--s-6); font-size: var(--t-base); }
.btn-sm { padding: var(--s-2) var(--s-4); font-size: var(--t-xs); }

/* Card */
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}

/* Tag / chip */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 4px var(--s-3);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  background: var(--bg-elevated);
  color: var(--fg-muted);
  border: 1px solid var(--border);
}
.tag-live {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}

/* Divider */
.rule {
  height: 1px;
  background: var(--border);
  border: none;
  margin: var(--s-7) 0;
}
.rule-thick { height: 2px; background: var(--fg); opacity: 0.9; }