/* ==========================================================================
   Base Styles with Light/Dark Mode Support
   ========================================================================== */

/* CSS Variables - Light Mode (Default) */
:root {
  /* Colors - extending Pollen color system */
  --color-text: var(--color-grey-800);
  --color-text-muted: var(--color-grey-500);
  --color-background: var(--color-white);
  --color-primary: var(--color-blue-300);
  --color-accent: var(--color-primary);
  --color-accent-hover: var(--color-blue-700);
  --color-border: var(--color-grey-200);

  /* Typography */
  --font-family-primary: "Courier Prime", monospace;
  --font-family-heading: "Tiny5", monospace;
}

/* Dark Mode Variables */
@media (prefers-color-scheme: dark) {
  :root {
    --color-text: var(--color-grey-100);
    --color-text-muted: var(--color-grey-400);
    --color-background: var(--color-black);
    --color-primary: var(--color-blue-200);
    --color-accent: var(--color-primary);
    --color-accent-hover: var(--color-blue-200);
    --color-border: var(--color-grey-700);
  }
}

/* ==========================================================================
   Base Element Styles
   ========================================================================== */

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  scroll-behavior: smooth;
}

body {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: var(--font-family-primary);
  color: var(--color-text);
  background-color: var(--color-background);
  font-weight: var(--weight-light);
}