/* MVE Hub design tokens — seeded from the MVE Dock Hub so the whole family
   shares one look. Light theme is the default brand identity; dark theme
   mirrors Dock Hub / Flare Hub. */

:root {
  /* Surfaces */
  --bg:        #FFFFFF;
  --surface:   #F1F4F8;
  --surface2:  #E4EAF0;
  --surface0:  #E9EEF4;
  --hover:     #DDE4EC;
  --card-bg:   #F7F9FC;

  /* Text */
  --text:      #1A1F36;
  --text2:     #15191f;
  --ink:       #1A1F36;
  --muted:     #5C6478;
  --faint:     #6B7385;   /* ≥4.5:1 on white — readable in sunlight */
  --border:    #D8DCE7;

  /* Brand */
  --accent:       #0005D9;
  --brand-blue:   #0005D9;
  --brand-green:  #009D1E;
  --info:         #0a66c2;

  /* Status */
  --pass-fill: #DCF3DE; --pass-edge: #009D1E; --pass-text: #006B14;
  --fail-fill: #FCE3E3; --fail-edge: #C42323; --fail-text: #8A1818;
  --warn-fill: #FFF6E6; --warn-edge: #D9760A; --warn-text: #8A5200;
  --na-fill:   #E6E8EE; --na-edge:   #5C6478; --na-text:   #404656;

  /* Compat aliases — referenced across screens (receipts, fleet, telemetry,
     inspections) but were never defined → text fell back / backgrounds rendered
     transparent (BUG-1). These resolve per-theme via --muted / --surface2. */
  --text-dim:  var(--muted);
  --surface1:  var(--surface2);

  /* Type scale */
  --font-title:   22px;
  --font-section: 17px;
  --font-body:    15px;
  --font-caption: 12.5px;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Shape */
  --radius-card: 16px;
  --radius-ctl:  10px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-card:    0 1px 3px rgba(26, 31, 54, 0.08), 0 1px 2px rgba(26, 31, 54, 0.04);
  --shadow-overlay: 0 8px 30px rgba(26, 31, 54, 0.18);

  /* Spacing base */
  --space: 8px;

  /* Layout */
  --appbar-h: 56px;
  --bottomnav-h: 64px;
  --content-max: 720px;
  --rail-w: 240px; /* Mac/desktop left nav rail width (used only in the Mac media block) */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #0d1117;
    --surface:   #161b22;
    --surface2:  #21262d;
    --surface0:  #11161d;
    --hover:     #1c2230;
    --card-bg:   #161b22;

    --text:      #e6edf3;
    --text2:     #adbac7;
    --ink:       #E6E8EE;
    --muted:     #A9AFC0;
    --faint:     #8b949e;   /* ≥4.5:1 on the dark bg */
    --border:    #2a2f3a;

    --accent:       #3DB4F2;
    --brand-blue:   #3DB4F2;
    --brand-green:  #3fb950;
    --info:         #79c0ff;

    --shadow-card:    0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-overlay: 0 8px 30px rgba(0, 0, 0, 0.6);
  }
}