/* ===================================================================
   AIP / Blueprint design tokens
   Loaded AFTER dashboard.css so [data-theme="dark"] selectors win.
   Light mode keeps existing dashboard.css values for backwards compat.
   =================================================================== */

:root {
  /* Blueprint grayscale */
  --bp-black:        #111418;
  --bp-dark-gray1:   #1c2127;
  --bp-dark-gray2:   #252a31;
  --bp-dark-gray3:   #2f343c;
  --bp-dark-gray4:   #383e47;
  --bp-dark-gray5:   #404854;
  --bp-gray1:        #5f6b7c;
  --bp-gray2:        #738091;
  --bp-gray3:        #8f99a8;
  --bp-gray4:        #abb3bf;
  --bp-gray5:        #c5cbd3;
  --bp-light-gray1:  #d3d8de;
  --bp-light-gray2:  #dce0e5;
  --bp-light-gray3:  #e5e8eb;
  --bp-light-gray4:  #edeff2;
  --bp-light-gray5:  #f6f7f9;
  --bp-white:        #ffffff;

  /* Blueprint intent (modernized v5+) */
  --bp-blue1:   #184a90;
  --bp-blue2:   #215db0;
  --bp-blue3:   #2d72d2;
  --bp-blue4:   #4c90f0;
  --bp-blue5:   #8abbff;
  --bp-green1:  #165a36;
  --bp-green3:  #238551;
  --bp-green5:  #72ca9b;
  --bp-orange3: #c87619;
  --bp-orange5: #fbb360;
  --bp-red3:    #cd4246;
  --bp-red5:    #fa999c;
  --bp-violet3: #9d3f9d;
  --bp-violet5: #d69fd6;

  /* Airmodus brand accent (kept across both themes) */
  --am-green:        #76d13a;
  --am-green-dark:   #5fb82e;
  --am-green-rgb:    118, 209, 58;

  /* Structural tokens (light theme defaults) */
  --aip-bg-app:        var(--bp-light-gray5);
  --aip-bg-panel:      var(--bp-white);
  --aip-bg-elevated:   var(--bp-light-gray4);
  --aip-text:          var(--bp-dark-gray1);
  --aip-text-muted:    var(--bp-gray1);
  --aip-text-disabled: var(--bp-gray3);
  --aip-link:          var(--am-green-dark);
  --aip-border:        rgba(17,20,24,0.10);
  --aip-border-strong: rgba(17,20,24,0.20);
  --aip-divider:       rgba(17,20,24,0.08);
  --aip-accent:        var(--am-green);
  --aip-accent-soft:   rgba(var(--am-green-rgb), 0.18);
  --aip-accent-bg:     rgba(var(--am-green-rgb), 0.12);
  --aip-accent-border: rgba(var(--am-green-rgb), 0.40);

  /* Geometry */
  --aip-radius:    3px;
  --aip-radius-lg: 6px;
  --aip-space:     4px;

  /* Responsive breakpoints (Material Design 3 window size classes).
     Use in JS via window.matchMedia, in CSS via @media (max-width: ...).
     - compact:  <600px  (phones)         drawer + full-screen AI overlay
     - medium:   <840px  (small tablets)  drawer + side AI panel
     - expanded: <1240px (large tablets)  rail + sidebar + AI panel
     - large:    1240px+ (desktops)       full shell, persistent everything */
  --bp-compact:   600px;
  --bp-medium:    840px;
  --bp-expanded:  1240px;

  /* Touch target minimums (covers iOS HIG 44pt + Material 48dp) */
  --aip-touch-target: 44px;

  /* Typography */
  --aip-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter",
                   Roboto, "Helvetica Neue", Arial, sans-serif;
  --aip-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;
  --aip-fs-xs: 11px;
  --aip-fs-sm: 12px;
  --aip-fs-md: 14px;
  --aip-fs-lg: 16px;
  --aip-lh:    1.28581;
}

/* ===== Dark theme ===== */
[data-theme="dark"] {
  --aip-bg-app:        var(--bp-dark-gray1);
  --aip-bg-panel:      var(--bp-dark-gray2);
  --aip-bg-elevated:   var(--bp-dark-gray3);
  --aip-text:          var(--bp-light-gray5);
  --aip-text-muted:    var(--bp-gray4);
  --aip-text-disabled: var(--bp-gray2);
  --aip-link:          var(--am-green);
  --aip-border:        rgba(255,255,255,0.10);
  --aip-border-strong: rgba(255,255,255,0.20);
  --aip-divider:       rgba(0,0,0,0.40);
  --aip-accent:        var(--am-green);
  --aip-accent-soft:   rgba(var(--am-green-rgb), 0.22);
  --aip-accent-bg:     rgba(var(--am-green-rgb), 0.14);
  --aip-accent-border: rgba(var(--am-green-rgb), 0.45);

  /* Reskin legacy dashboard.css tokens for dark backgrounds, but keep
     --primary as the Airmodus green so brand accent carries through. */
  --primary:      var(--am-green);
  --primary-dark: var(--am-green-dark);
  --success:      var(--bp-green3);
  --warning:      var(--bp-orange3);
  --danger:       var(--bp-red3);
  --gray-50:      var(--bp-dark-gray1);
  --gray-100:     var(--bp-dark-gray1);
  --gray-200:     var(--bp-dark-gray3);
  --gray-300:     var(--bp-dark-gray4);
  --gray-400:     var(--bp-gray2);
  --gray-500:     var(--bp-gray3);
  --gray-600:     var(--bp-gray4);
  --gray-700:     var(--bp-gray5);
  --gray-800:     var(--bp-light-gray5);
  --gray-900:     var(--bp-light-gray5);
}

[data-theme="dark"] body {
  background: var(--aip-bg-app);
  color: var(--aip-text);
}

[data-theme="dark"] .container,
[data-theme="dark"] main,
[data-theme="dark"] section,
[data-theme="dark"] article {
  color: var(--aip-text);
}

/* Reskin common patterns where dashboard.css uses hardcoded whites */
[data-theme="dark"] .device-card,
[data-theme="dark"] .detail-section,
[data-theme="dark"] .hero-card,
[data-theme="dark"] .gateway-section,
[data-theme="dark"] .data-table,
[data-theme="dark"] .form-card,
[data-theme="dark"] form,
[data-theme="dark"] .panel {
  background: var(--aip-bg-panel) !important;
  border-color: var(--aip-border) !important;
  color: var(--aip-text) !important;
  box-shadow: none !important;
}

[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--aip-bg-elevated);
  color: var(--aip-text);
  border-color: var(--aip-border-strong);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  border-color: var(--am-green);
  outline: 0;
  box-shadow: 0 0 0 2px var(--aip-accent-soft);
}

[data-theme="dark"] table { background: var(--aip-bg-panel); }
[data-theme="dark"] table th {
  background: var(--aip-bg-elevated);
  color: var(--aip-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: var(--aip-fs-xs);
  font-weight: 600;
}
[data-theme="dark"] table td,
[data-theme="dark"] table th { border-bottom: 1px solid var(--aip-border); }
[data-theme="dark"] tbody tr:hover { background: rgba(255,255,255,0.03); }

[data-theme="dark"] a { color: var(--aip-link); }
[data-theme="dark"] hr { border-color: var(--aip-border); }
[data-theme="dark"] code, [data-theme="dark"] pre {
  background: var(--aip-bg-elevated);
  color: var(--bp-light-gray5);
  border-radius: var(--aip-radius);
}

/* Tighten body type to AIP density */
body {
  font-size: var(--aip-fs-md);
  line-height: var(--aip-lh);
}