/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════════════════════════ */
:root {
  --md-blue-50:  #e8f0fe;
  --md-blue-100: #d2e3fc;
  --md-blue-200: #aecbfa;
  --md-blue-500: #4285f4;
  --md-blue-600: #1a73e8;
  --md-blue-700: #1967d2;
  --md-grey-50:  #f8f9fa;
  --md-grey-100: #f1f3f4;
  --md-grey-200: #e8eaed;
  --md-grey-300: #dadce0;
  --md-grey-500: #9aa0a6;
  --md-grey-600: #80868b;
  --md-grey-700: #5f6368;
  --md-grey-800: #3c4043;
  --md-grey-900: #202124;
  --md-green-500: #34a853;
  --md-green-700: #188038;
  --md-yellow-700: #f29900;
  --md-red-500: #ea4335;
  --primary:       var(--md-blue-600);
  --primary-hover: var(--md-blue-700);
  --primary-light: var(--md-blue-50);
  --surface:       #ffffff;
  --bg:            var(--md-grey-50);
  --border:        var(--md-grey-300);
  --text-primary:  var(--md-grey-900);
  --text-secondary:var(--md-grey-700);
  --text-hint:     var(--md-grey-500);
  --shadow-1: 0 1px 2px rgba(60,64,67,.30), 0 1px 3px 1px rgba(60,64,67,.15);
  --shadow-2: 0 1px 2px rgba(60,64,67,.30), 0 2px 6px 2px rgba(60,64,67,.15);
  --shadow-3: 0 4px 8px 3px rgba(60,64,67,.15), 0 1px 3px rgba(60,64,67,.30);
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-pill: 999px;
  --font-ui:   'DM Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --t-fast:   .15s cubic-bezier(.4, 0, .2, 1);
  --t-normal: .25s cubic-bezier(.4, 0, .2, 1);
}

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

body, html {
  height: 100vh;
  width: 100%;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--text-primary);
  overflow: hidden;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}