/* ── INFOTECH IoT Panel ── theme.css ── */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Roboto+Condensed:wght@600;700&family=DM+Mono:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

:root {
  --md-primary:          #4DDDC9;
  --md-primary-dim:      #2BB8A4;
  --md-primary-container: rgba(77,221,201,0.12);
  --md-on-primary:       #003730;
  --md-primary-border:   rgba(77,221,201,0.22);
  --md-primary-ring:     rgba(77,221,201,0.14);

  --md-secondary:        #8ECFC4;
  --md-tertiary:         #80DEEA;

  --md-surface:          #1A1F1E;
  --md-surface-1:        #202626;
  --md-surface-2:        #262D2C;
  --md-surface-3:        #2C3534;
  --md-surface-variant:  #3A4140;

  --md-bg:               #0F1413;
  --md-on-bg:            #E0E8E5;
  --md-on-surface:       #DDE4E1;
  --md-on-surface-var:   #BEC8C5;
  --md-outline:          rgba(255,255,255,0.08);
  --md-outline-variant:  rgba(255,255,255,0.05);

  --md-error:            #FFB4AB;
  --md-error-container:  rgba(255,180,171,0.15);
  --md-warning:          #FFD54F;
  --md-warning-container: rgba(255,213,79,0.15);
  --md-success:          #A5D6A7;
  --md-success-container: rgba(165,214,167,0.15);

  --md-elevation-1: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.5);
  --md-elevation-2: 0 3px 6px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.4);
  --md-elevation-3: 0 8px 24px rgba(0,0,0,0.5);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --sidebar-width: 240px;
  --topbar-height: 64px;

  --font-body:    'Roboto', sans-serif;
  --font-head:    'Roboto Condensed', sans-serif;
  --font-mono:    'DM Mono', monospace;

  --transition: 200ms cubic-bezier(0.2, 0, 0, 1);
}

.light-theme {
  /* ── Primary ── */
  --md-primary:          #00796B;
  --md-primary-dim:      #00695C;
  --md-primary-container: rgba(0,121,107,0.10);
  --md-on-primary:       #FFFFFF;
  --md-primary-border:   rgba(0,121,107,0.22);
  --md-primary-ring:     rgba(0,121,107,0.13);

  --md-secondary:        #00897B;
  --md-tertiary:         #26A69A;

  /* ── Surfaces ── layered warm-white with subtle teal tint */
  --md-bg:               #F5FAFA;
  --md-surface:          #FFFFFF;
  --md-surface-1:        #F0F7F6;
  --md-surface-2:        #E5F0EE;
  --md-surface-3:        #D8E8E6;
  --md-surface-variant:  #C6DCDA;

  /* ── Text ── */
  --md-on-bg:            #1A2524;
  --md-on-surface:       #1A2524;
  --md-on-surface-var:   #4A5C59;

  /* ── Borders ── */
  --md-outline:          rgba(0,0,0,0.10);
  --md-outline-variant:  rgba(0,0,0,0.06);

  /* ── Semantic — proper dark-on-light tones ── */
  --md-error:            #C62828;
  --md-error-container:  rgba(198,40,40,0.09);
  --md-warning:          #E65100;
  --md-warning-container: rgba(230,81,0,0.09);
  --md-success:          #2E7D32;
  --md-success-container: rgba(46,125,50,0.09);

  /* ── Elevation — soft, cool shadows ── */
  --md-elevation-1: 0 1px 3px rgba(0,40,35,0.07), 0 1px 2px rgba(0,40,35,0.05);
  --md-elevation-2: 0 3px 8px rgba(0,40,35,0.08), 0 1px 3px rgba(0,40,35,0.06);
  --md-elevation-3: 0 8px 24px rgba(0,40,35,0.11);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--font-body);
  background: var(--md-bg);
  color: var(--md-on-bg);
  min-height: 100vh;
  overflow-x: hidden;
}

.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
}