/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500&family=Roboto:wght@400;500&family=Roboto+Mono:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20,400,0,0&display=swap');

/* Dark theme (default) */
:root, [data-theme="dark"] {
  --bg: #202124;
  --bg-recessed: #1a1a1d;
  --surface: #303134;
  --surface-elevated: #292a2d;
  --border: #3c4043;
  --text: #e8eaed;
  --text-secondary: #9aa0a6;
  --text-tertiary: #5f6368;
  --accent: #8ab4f8;
  --accent-bg: #394457;
  --male: #8ab4f8;
  --female: #f28b82;
  --unknown: #5f6368;
  --ancestor-line: #81c995;
  --spouse-line: #f28b82;
  --verified: #8ab4f8;
  --sourced: #81c995;
  --entered: #9aa0a6;
  --inferred: #fdd663;
}

/* Light theme */
[data-theme="light"] {
  --bg: #ffffff;
  --bg-recessed: #f8f9fa;
  --surface: #ffffff;
  --surface-elevated: #ffffff;
  --border: #dadce0;
  --text: #202124;
  --text-secondary: #5f6368;
  --text-tertiary: #9aa0a6;
  --accent: #1a73e8;
  --accent-bg: #e8f0fe;
  --male: #1a73e8;
  --female: #d93025;
  --verified: #1a73e8;
  --sourced: #1e8e3e;
  --entered: #5f6368;
  --inferred: #e37400;
}

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

body {
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  font-weight: 400;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Material Symbols */
.icon {
  font-family: 'Material Symbols Sharp';
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* Section labels */
.section-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-secondary);
  font-weight: 500;
}