@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

:root {
  --bg-body: #F6F8FA;
  --bg-surface: #FFFFFF;
  --bg-sidebar: #2E303E;
  --primary: #4051B5;
  --accent: #00BFA5;
  --success: #10b981;
  --danger: #ef4444;
  --warning: #f59e0b;
  --text-main: #212121;
  --text-muted: #616161;
  --border: #E0E0E0;
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  --radius: 4px;

  /* Component mappings */
  --bg-card: var(--bg-surface);
  --bg-glass: var(--bg-surface);
  --primary-gradient: none;
  --border-color: var(--border);
  --glow: none;

  /* Legacy variable mapping */
  --background-colour: var(--bg-body);
  --surface-colour: var(--bg-surface);
  --surface-colour-dark: #F0F2F5;
  --border-colour: var(--border);
  --border-colour-dark: #D7D7D7;
  --text-colour: var(--text-main);
  --text-colour-medium: #333333;
  --text-colour-light: var(--text-muted);
  --text-colour-lighter: #757575;
  --primary-colour: var(--primary);
  --primary-colour-hover: #3648A5;
  --secondary-colour: var(--accent);
  --secondary-colour-hover: #009E88;
  --accent-colour: var(--accent);
  --info-colour: var(--primary);
  --info-colour-light: rgba(64, 81, 181, 0.12);
  --success-colour: #2E7D32;
  --success-colour-light: rgba(46, 125, 50, 0.12);
  --error-colour: #D32F2F;
  --error-colour-light: rgba(211, 47, 47, 0.12);
  --warning-colour: #F9A825;
  --warning-colour-light: rgba(249, 168, 37, 0.16);
}

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

* {
  margin: 0;
  padding: 0;
}