/* styles/theme.css - Kelag */
/* Brand colors: green #00943c (logo), web green #178c3c */
/* Rule: neutral graphite background, white and gray text, green only for the
   logo, buttons and highlights. Contrast on #1a1d21: #ffffff 16.9:1,
   #d1d5db 11.5:1, #9ca3af 6.7:1, logo #00943c 4.3:1, #3dbb6b 6.9:1.
   Buttons #3dbb6b carry dark text (7.5:1). */

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

:root {
    --color-themecolor1: #1a1d21; /* Main background - graphite */
    --color-themecolor2: #ffffff; /* Text - white */
    --color-themecolor3: #d1d5db; /* Accent / hover - light gray */
    --color-themecolor4: #9ca3af; /* Secondary accent - mid gray */
    --color-themecolor5: #121417; /* Secondary background - darker graphite panel */

    --color-primary: #3dbb6b;
    --color-primary-light: #5fc985;
    --color-primary-dark: #1fae55;

    --color-secondary: #00943c;
    --color-secondary-light: #1fae55;
    --color-secondary-dark: #007a31;

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

  /* Dark theme */
  [data-theme="dark"] {
    --color-primary: #3dbb6b;
    --color-primary-light: #5fc985;
    --color-primary-dark: #1fae55;

    --color-secondary: #00943c;
    --color-secondary-light: #1fae55;
    --color-secondary-dark: #007a31;
  }

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