/* AulaMap — Design tokens, reset i tipografia base */

/* Tema fosc (per defecte) */
:root {
  --bg:#0F1117; --surface:#1A1D27; --surface2:#242836; --surface3:#2E3344;
  --border:#363B4E; --text:#E8EAF0; --text2:#9CA3B8; --text3:#6B7280;
  --accent:#6C8EEF; --accent2:#5A7DE0; --accent-glow:rgba(108,142,239,0.15);
  --green:#4ADE80; --green-bg:rgba(74,222,128,0.12);
  --red:#F87171; --red-bg:rgba(248,113,113,0.12);
  --orange:#FBBF24; --orange2:#E5A800; --orange-bg:rgba(251,191,36,0.12);
  --on-orange:#000; --on-accent:#fff;
  --grid-line:rgba(54,59,78,0.2); --canvas-glow:rgba(108,142,239,0.03);
  --radius:10px; --radius-sm:6px; --shadow:0 4px 24px rgba(0,0,0,0.3);
  --font:'DM Sans',sans-serif; --mono:'Space Mono',monospace;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}

/* Mode clar — pensat per projectar sobre paret blanca */
:root[data-theme="light"] {
  --bg:#F2F4F9; --surface:#FFFFFF; --surface2:#EDF0F7; --surface3:#DFE4EF;
  --border:#C6CDDD; --text:#1B2031; --text2:#4C5570; --text3:#7B849B;
  --accent:#3A62D8; --accent2:#2C4EBC; --accent-glow:rgba(58,98,216,0.14);
  --green:#177D45; --green-bg:rgba(23,125,69,0.12);
  --red:#C33636; --red-bg:rgba(195,54,54,0.10);
  --orange:#A66A00; --orange2:#8A5800; --orange-bg:rgba(166,106,0,0.12);
  --on-orange:#fff; --on-accent:#fff;
  --grid-line:rgba(58,98,216,0.10); --canvas-glow:rgba(58,98,216,0.04);
  --shadow:0 4px 20px rgba(27,32,49,0.14);
  color-scheme: light;
}

*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:var(--font);background:var(--bg);color:var(--text);height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column;-webkit-tap-highlight-color:transparent;}
.mi{font-family:'Material Symbols Rounded';font-size:18px;font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;vertical-align:middle;}
.mi-sm{font-size:16px;} .mi-xs{font-size:14px;}