/* INTERNETMON light design system
 *
 * Coastal Signal supplies the calm, open surface language. Precision Console
 * supplies the graph density and operational hierarchy. This asset contains
 * semantic roles only; product templates own their layout and data behavior.
 */
:root {
  color-scheme: light;

  /* Typography */
  --im-font-ui: var(--font-ui, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --im-font-mono: var(--font-mono, ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace);

  /* Grounded surfaces */
  --im-color-canvas: #f3f7f5;
  --im-color-canvas-tint: #eaf2ef;
  --im-color-surface: #ffffff;
  --im-color-surface-subtle: #edf3f0;
  --im-color-surface-raised: #f9fbfa;
  --im-color-surface-inset: #e7efec;

  /* Text */
  --im-color-text: #18312d;
  --im-color-text-secondary: #405c56;
  --im-color-text-muted: #526963;
  --im-color-text-subtle: #5e726d;
  --im-color-text-inverse: #ffffff;

  /* Structure and interaction */
  --im-color-border: #cfdbd6;
  --im-color-border-strong: #718a82;
  --im-color-border-emphasis: #4e7168;
  --im-color-accent: #087f72;
  --im-color-accent-strong: #056459;
  --im-color-accent-soft: #dceee9;
  --im-color-link: #1f5f99;
  --im-color-link-hover: #174b7b;
  --im-color-focus: #0f4fbf;
  --im-focus-ring: 0 0 0 4px rgba(15, 79, 191, 0.32);

  /* Semantic state. Green is evidence, never ornamental chrome. */
  --im-color-success: #127252;
  --im-color-success-soft: #e0f1e9;
  --im-color-warning: #8c5a08;
  --im-color-warning-soft: #fff0cf;
  --im-color-danger: #b42318;
  --im-color-danger-soft: #fce8e6;
  --im-color-info: #1c629c;
  --im-color-info-soft: #e4eff8;
  --im-color-unknown: #5b6d66;
  --im-color-unknown-soft: #e9eeec;

  /* Graph scaffolding */
  --im-graph-plot: #ffffff;
  --im-graph-grid: rgba(24, 49, 45, 0.18);
  --im-graph-grid-strong: rgba(24, 49, 45, 0.34);
  --im-graph-axis: #536b65;
  --im-graph-label: #405c56;
  --im-graph-annotation: #34544d;
  --im-graph-crosshair: rgba(24, 49, 45, 0.62);
  --im-graph-selection: rgba(8, 127, 114, 0.18);
  --im-graph-selection-border: #087f72;
  --im-graph-missing: #61756f;
  --im-graph-missing-soft: #dce4e1;
  --im-graph-success-band: rgba(18, 114, 82, 0.1);
  --im-graph-warning-band: rgba(140, 90, 8, 0.1);
  --im-graph-danger-band: rgba(180, 35, 24, 0.09);

  /* Stable dashboard-region series slots in canonical historical order:
   * AMS, BOM (retired), IAD, LHR, NRT, SIN, SJC, SYD (retired). Retired slots
   * preserve historical identity but are not active capacity. Color is never
   * the only cue; consumers also apply a paired dash/marker and text label.
   */
  --im-region-1: #087f72;
  --im-region-2: #8c6508;
  --im-region-3: #7157a5;
  --im-region-4: #1f6fb2;
  --im-region-5: #b45309;
  --im-region-6: #a13f72;
  --im-region-7: #557a16;
  --im-region-8: #5268b8;
  --im-region-1-dash: 0;
  --im-region-2-dash: 7 3;
  --im-region-3-dash: 3 3;
  --im-region-4-dash: 10 3 2 3;
  --im-region-5-dash: 2 3;
  --im-region-6-dash: 10 4;
  --im-region-7-dash: 12 3 3 3;
  --im-region-8-dash: 1 3;
  --im-region-1-marker: circle;
  --im-region-2-marker: square;
  --im-region-3-marker: triangle;
  --im-region-4-marker: diamond;
  --im-region-5-marker: cross;
  --im-region-6-marker: plus;
  --im-region-7-marker: star;
  --im-region-8-marker: hexagon;

  /* Density, geometry, and elevation */
  --im-space-1: 4px;
  --im-space-2: 8px;
  --im-space-3: 12px;
  --im-space-4: 16px;
  --im-space-5: 20px;
  --im-space-6: 24px;
  --im-space-8: 32px;
  --im-space-10: 40px;
  --im-space-12: 48px;
  --im-radius-sm: 6px;
  --im-radius-md: 10px;
  --im-radius-lg: 14px;
  --im-radius-pill: 999px;
  --im-control-height: 42px;
  --im-content-width: 1540px;
  --im-shadow-sm: 0 1px 2px rgba(20, 43, 50, 0.06);
  --im-shadow-md: 0 8px 24px rgba(20, 43, 50, 0.08);
  --im-shadow-lg: 0 18px 45px rgba(20, 43, 50, 0.1);
  --im-motion-fast: 120ms;
  --im-motion-standard: 180ms;
  --im-ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

/* Opt-in primitives let each surface migrate without changing its data or
 * layout contract. Unmigrated pages may load this asset without being restyled.
 */
:where(html, body)[data-im-theme="light"] {
  background: var(--im-color-canvas);
  color: var(--im-color-text);
}

body[data-im-theme="light"] {
  font-family: var(--im-font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body[data-im-theme="light"] :where(button, input, select, textarea) {
  font: inherit;
}

body[data-im-theme="light"] :focus-visible {
  outline: 3px solid var(--im-color-focus);
  outline-offset: 2px;
  box-shadow: var(--im-focus-ring);
}

body[data-im-theme="light"] a {
  color: var(--im-color-link);
}

body[data-im-theme="light"] a:hover {
  color: var(--im-color-link-hover);
}

.im-surface,
.im-panel {
  color: var(--im-color-text);
  border: 1px solid var(--im-color-border);
  background: var(--im-color-surface);
  box-shadow: var(--im-shadow-sm);
}

.im-panel {
  border-radius: var(--im-radius-md);
}

.im-button {
  min-height: var(--im-control-height);
  padding: 0 var(--im-space-4);
  border: 1px solid var(--im-color-border-strong);
  border-radius: var(--im-radius-sm);
  color: var(--im-color-text);
  background: var(--im-color-surface);
  cursor: pointer;
  font-weight: 700;
  transition:
    border-color var(--im-motion-fast) var(--im-ease-standard),
    background var(--im-motion-fast) var(--im-ease-standard);
}

.im-button:hover {
  border-color: var(--im-color-accent);
  background: var(--im-color-surface-subtle);
}

.im-button-primary {
  border-color: var(--im-color-accent-strong);
  color: var(--im-color-text-inverse);
  background: var(--im-color-accent-strong);
}

.im-state {
  display: inline-flex;
  align-items: center;
  gap: var(--im-space-2);
  padding: 5px 9px;
  border: 1px solid currentColor;
  border-radius: var(--im-radius-pill);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.04em;
}

.im-state::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.im-state-success { color: var(--im-color-success); background: var(--im-color-success-soft); }
.im-state-warning { color: var(--im-color-warning); background: var(--im-color-warning-soft); }
.im-state-danger { color: var(--im-color-danger); background: var(--im-color-danger-soft); }
.im-state-info { color: var(--im-color-info); background: var(--im-color-info-soft); }
.im-state-unknown { color: var(--im-color-unknown); background: var(--im-color-unknown-soft); }

.im-metric-value {
  color: var(--im-color-text);
  font-family: var(--im-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
}

.im-graph-swatch {
  width: 18px;
  height: 3px;
  display: inline-block;
  border-radius: var(--im-radius-pill);
  background: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --im-motion-fast: 0ms;
    --im-motion-standard: 0ms;
  }

  body[data-im-theme="light"],
  body[data-im-theme="light"] *,
  body[data-im-theme="light"] *::before,
  body[data-im-theme="light"] *::after {
    scroll-behavior: auto !important;
  }

  body[data-im-theme="light"] *,
  body[data-im-theme="light"] *::before,
  body[data-im-theme="light"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}

@media (forced-colors: active) {
  body[data-im-theme="light"] :focus-visible {
    outline-color: Highlight;
    box-shadow: none;
  }
}