/* styles/theme.css - Watt-IQ */
/* Brand colors: navy #021942, red #e30613 (logo dot) */
/* Rule: navy background, white text, light navy accent (red stays a highlight,
   it would read as an error state on status colors). Contrast on #021942:
   #ffffff 17.2:1, #8fa9d9 7.3:1, #c9d6ee 11.8:1. */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700&display=swap');

:root {
    --color-themecolor1: #021942; /* Main background - brand navy */
    --color-themecolor2: #ffffff; /* Text - white */
    --color-themecolor3: #8fa9d9; /* Accent / hover - light navy */
    --color-themecolor4: #c9d6ee; /* Secondary accent - lighter navy */
    --color-themecolor5: #011232; /* Secondary background - darker navy panel */

    --color-primary: #8fa9d9;
    --color-primary-light: #a9bde6;
    --color-primary-dark: #7d9ad3;

    --color-secondary: #e30613;
    --color-secondary-light: #ff4d57;
    --color-secondary-dark: #b8050f;

    font-family: 'Manrope', sans-serif;
  }

  /* Dark theme */
  [data-theme="dark"] {
    --color-primary: #8fa9d9;
    --color-primary-light: #a9bde6;
    --color-primary-dark: #7d9ad3;

    --color-secondary: #e30613;
    --color-secondary-light: #ff4d57;
    --color-secondary-dark: #b8050f;
  }

  #site-detail-tabs.htmx-added {
    opacity: 0;
  }
  #site-detail-tabs {
    opacity: 1;
    transition: opacity 1s ease-out;
  }