/* MaxVapor PWA — tokens (light + dark), derived from MV design system */

:root {
  /* accents — material dashboard palette, carried over */
  --mv-brand: #4caf50;
  --mv-brand-600: #43a047;
  --mv-brand-700: #2e7d32;
  --mv-success: #4caf50;
  --mv-info:    #00bcd4;
  --mv-warning: #ff9800;
  --mv-warning-600: #f57c00;
  --mv-danger:  #f44336;
  --mv-primary: #9c27b0;
  --mv-rose:    #e91e63;

  /* tinted shadows from MD */
  --mv-shadow-success: 0 12px 20px -10px rgba(76,175,80,.35), 0 4px 20px 0 rgba(0,0,0,.12), 0 7px 8px -5px rgba(76,175,80,.25);
  --mv-shadow-warning: 0 12px 20px -10px rgba(255,152,0,.40), 0 4px 20px 0 rgba(0,0,0,.12), 0 7px 8px -5px rgba(255,152,0,.30);
  --mv-shadow-danger:  0 12px 20px -10px rgba(244,67,54,.35), 0 4px 20px 0 rgba(0,0,0,.12), 0 7px 8px -5px rgba(244,67,54,.25);
  --mv-shadow-info:    0 12px 20px -10px rgba(0,188,212,.35), 0 4px 20px 0 rgba(0,0,0,.12), 0 7px 8px -5px rgba(0,188,212,.25);
  --mv-shadow-rose:    0 12px 20px -10px rgba(233,30,99,.35), 0 4px 20px 0 rgba(0,0,0,.12), 0 7px 8px -5px rgba(233,30,99,.25);

  /* type */
  --mv-font-body: "Roboto", -apple-system, "Helvetica Neue", sans-serif;
  --mv-font-slab: "Roboto Slab", "Roboto", serif;
  --mv-font-mono-display: "Share Tech Mono", ui-monospace, monospace;
  --mv-font-mono-body:    "Space Mono", ui-monospace, monospace;

  /* radii */
  --mv-r-card: 14px;
  --mv-r-tile: 10px;
  --mv-r-btn: 8px;
  --mv-r-pill: 999px;

  /* status/accent */
  --mv-hot: linear-gradient(135deg, #ff9800 0%, #f44336 100%);
  --mv-live: linear-gradient(135deg, #4caf50 0%, #00bcd4 100%);
}

/* LIGHT — cleaner, mobile-optimized version of MD-light */
.mv[data-theme="light"] {
  --mv-bg:       #f2f3f5;
  --mv-bg-2:     #e8eaee;
  --mv-surface:  #ffffff;
  --mv-surface-2:#fafbfc;
  --mv-surface-raised: #ffffff;
  --mv-fg1:      #1f2a37;
  --mv-fg2:      #5b6670;
  --mv-fg3:      #97a0ab;
  --mv-divider:  rgba(15, 23, 42, 0.08);
  --mv-divider-2:rgba(15, 23, 42, 0.12);
  --mv-shadow-card: 0 1px 2px rgba(15,23,42,.06), 0 4px 14px rgba(15,23,42,.06);
  --mv-shadow-card-lg: 0 2px 4px rgba(15,23,42,.06), 0 16px 40px rgba(15,23,42,.10);
  --mv-shadow-tab: 0 -1px 0 rgba(0,0,0,.06), 0 -10px 30px rgba(0,0,0,.04);
  --mv-sheet-bg: #ffffff;
  --mv-header-bg: #f2f3f5;
  --mv-topbar-bg: rgba(242,243,245,.85);
  --mv-tab-bg: rgba(255,255,255,.82);
  --mv-tab-border: rgba(0,0,0,.07);
  --mv-glass-bg: rgba(255,255,255,.7);
  --mv-glass-border: rgba(0,0,0,.06);
  --mv-chip-bg: rgba(15,23,42,.05);
  --mv-dial-track: #e6e9ee;
  --mv-dial-glow: rgba(255,152,0,.35);
  --mv-scrim: rgba(15,23,42,.45);
}

/* DARK — mobile native feel, matches moody MV photography */
.mv[data-theme="dark"] {
  --mv-bg:       #0b0d10;
  --mv-bg-2:     #111418;
  --mv-surface:  #16191d;
  --mv-surface-2:#1a1e23;
  --mv-surface-raised: #1d2127;
  --mv-fg1:      #f1f3f5;
  --mv-fg2:      #a2abb5;
  --mv-fg3:      #6b747e;
  --mv-divider:  rgba(255,255,255,.07);
  --mv-divider-2:rgba(255,255,255,.12);
  --mv-shadow-card: 0 1px 0 rgba(255,255,255,.03) inset, 0 6px 18px rgba(0,0,0,.45);
  --mv-shadow-card-lg: 0 1px 0 rgba(255,255,255,.04) inset, 0 20px 50px rgba(0,0,0,.55);
  --mv-shadow-tab: 0 -1px 0 rgba(255,255,255,.04), 0 -10px 30px rgba(0,0,0,.4);
  --mv-sheet-bg: #17191d;
  --mv-header-bg: #0b0d10;
  --mv-topbar-bg: rgba(11,13,16,.8);
  --mv-tab-bg: rgba(22,25,29,.82);
  --mv-tab-border: rgba(255,255,255,.07);
  --mv-glass-bg: rgba(22,25,29,.65);
  --mv-glass-border: rgba(255,255,255,.08);
  --mv-chip-bg: rgba(255,255,255,.06);
  --mv-dial-track: rgba(255,255,255,.07);
  --mv-dial-glow: rgba(255,152,0,.45);
  --mv-scrim: rgba(0,0,0,.6);
}