:root {
  --teal-400: #1D9E75;
  --teal-600: #0F6E56;
  --teal-800: #085041;
  --teal-50:  #E1F5EE;
  --teal-100: #9FE1CB;
  --coral-400: #D85A30;
  --amber-400: #BA7517;
  --red-400:   #E24B4A;
  --gray-50:   #F7F6F3;
  --gray-100:  #EEECE8;
  --gray-400:  #888780;
  --gray-600:  #5F5E5A;

  --bg:             #F4F3F0;
  --surface:        #FFFFFF;
  --border:         rgba(0,0,0,0.07);
  --border-strong:  rgba(0,0,0,0.13);
  --text-primary:   #1A1A18;
  --text-secondary: #5F5E5A;
  --text-tertiary:  #9A9890;

  --nav-h:     60px;
  --safe-bot:  env(safe-area-inset-bottom, 0px);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  --font: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.5;
  height: 100%;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: var(--font); cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: var(--font); font-size: 16px; }
img { max-width: 100%; display: block; }