/* Tidy Weather — color theme */
:root {
  /* Palette */
  --color-primary: #0D4F4F;
  --color-primary-light: #1A6B6B;
  --color-accent: #E85D4C;
  --color-accent-dark: #C94A3A;
  --color-outline-accent: #C4A35A;

  /* Semantic */
  --color-text: #1A1A2E;
  --color-text-muted: #4A4A5A;
  --color-bg: #FDFBF7;
  --color-surface: #F4E9D8;
  --color-focus-ring: rgba(13, 79, 79, 0.1);

  /* Header */
  --color-header-bg: rgba(253, 251, 247, 0.95);
  --color-header-border: rgba(26, 26, 46, 0.08);

  /* Hero */
  --color-hero-bg: #1A1A2E;
  --color-hero-text: #FDFBF7;
  --color-hero-label: var(--color-accent);
  --color-hero-tagline: rgba(253, 251, 247, 0.85);

  /* Footer */
  --color-footer-bg: #1A1A2E;
  --color-footer-text: rgba(253, 251, 247, 0.7);
  --color-footer-muted: rgba(253, 251, 247, 0.5);
  --color-footer-heading: var(--color-accent);
  --color-footer-border: rgba(253, 251, 247, 0.1);
}

/* Selection */
::selection {
  background: var(--color-accent);
  color: white;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}