/* Base styles - variables, resets, typography */
:root {
  --bg: #f6f7fb;
  --panel: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  --accent: #2563eb;

  /* Water-status colors from crop-types.js */
  --c-wet: rgba(44, 141, 228, 1); /* Dark Blue - Wet */
  --c-moist: rgba(44, 204, 228, 1); /* Light Blue - Moist */
  --c-low: rgba(55, 214, 122, 1); /* Green - Low Stress */
  --c-mild: rgba(220, 231, 117, 1); /* Yellow - Mild Stress */
  --c-moderate: rgba(255, 163, 13, 1); /* Orange - Moderate Stress */
  --c-strong: rgba(244, 115, 115, 1); /* Light Red - Strong Stress */
  --c-high: rgba(255, 0, 0, 1); /* Red - High Stress */
  --c-veryhigh: rgba(184, 0, 0, 1); /* Dark Red - Very High Stress */
  --c-severe: rgba(137, 105, 105, 1); /* Brown/Black - Severe Stress */
  --c-pos: rgba(44, 141, 228, 1); /* Dark Blue - Above baseline */

  /* Legacy aliases for backward compatibility */
  --c0: var(--c-wet);
  --c1: var(--c-low);
  --c2: var(--c-moderate);
  --c3: var(--c-strong);
  --c4: var(--c-veryhigh);

  --ink: #111827;

  /* Chart neutrals */
  --grid: rgba(148, 163, 184, 0.55);
  --line: rgba(100, 116, 139, 0.3);
  --bar: rgba(100, 116, 139, 0.25);
  --barStroke: rgba(100, 116, 139, 0.3);

  --focus: rgba(179, 229, 252, 0.7);
}

* {
  box-sizing: border-box;
}

/* Disable text selection and long-press menu on mobile */
body,
.device-row,
.expansion-row,
.expanded,
.chart-wrap,
.chart-tooltip,
canvas {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* Allow selection in input fields */
input,
textarea {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

body {
  margin: 0;
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Helvetica,
    Arial,
    "Apple Color Emoji",
    "Segoe UI Emoji";
  line-height: 1.5;
  background: var(--bg);
  color: var(--text);
}