/* --------------------------------------------------------------------------
   Theme Tokens
-------------------------------------------------------------------------- */

:root {
  --color-primary: #1a73e8;
  --color-bg: #ffffff;
  --color-bg-hover: #f8f9fa;
  --color-bg-card: #f5f5f5;
  --color-border: #dadce0;
  --color-text: #202124;
  --color-text-muted: #5f6368;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #202124;
    --color-bg-hover: #2d2f31;
    --color-bg-card: #2d2f31;
    --color-border: #3c4043;
    --color-text: #e8eaed;
    --color-text-muted: #9aa0a6;
  }
}

/* --------------------------------------------------------------------------
   Base Typography Hooks
-------------------------------------------------------------------------- */

body {
  background: var(--color-bg);
  color: var(--color-text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-text);
}

p {
  color: var(--color-text);
}

a {
  color: var(--color-primary);
}

small {
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Utilities
-------------------------------------------------------------------------- */

.sr-only,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-muted {
  color: var(--color-text-muted);
}