/*
 * Bot Hound — Centralized Color Theme (C2 Warm Earth + Teal CTAs)
 *
 * Import this file in every page: <link rel="stylesheet" href="theme.css">
 * Then use var(--color-name) in page-specific styles.
 *
 * Changing a value here updates it across all pages.
 *
 * Palette derived from the Bot Hound logo:
 *   - Warm browns/ambers from the dog's fur
 *   - Teal from the dog's collar (CTAs, interactive elements)
 *   - Traffic-light scoring: green/yellow/red
 */

:root {
  /* Page backgrounds */
  --color-bg-page:        #faf9f7;
  --color-bg-gradient:    #f5f3f0;
  --color-bg-panel:       #ffffff;
  --color-bg-subtle:      #f5f3f0;

  /* Borders */
  --color-border-default: #e7e5e4;
  --color-border-muted:   #d6d3d1;

  /* Text */
  --color-text-primary:   #1c1917;
  --color-text-default:   #292524;
  --color-text-secondary: #44403c;
  --color-text-muted:     #78716c;
  --color-text-dim:       #a8a29e;
  --color-text-dimmer:    #d6d3d1;

  /* Accents */
  --color-accent-teal:    #0d9488;
  --color-accent-teal-light: #14b8a6;
  --color-accent-amber:   #b45309;
  --color-accent-amber-light: #d97706;

  /* Scoring (traffic-light) */
  --color-score-real:     #16a34a;
  --color-score-suspect:  #eab308;
  --color-score-bot:      #ef4444;

  /* Legacy aliases (keep existing pages working during transition) */
  --color-accent-blue:    var(--color-accent-teal);
  --color-accent-blue-light: var(--color-accent-teal-light);
  --color-accent-green:   var(--color-score-real);
  --color-accent-green-bright: #15803d;
  --color-accent-red:     var(--color-score-bot);
  --color-accent-purple:  #a16207;
  --color-accent-yellow:  var(--color-score-suspect);

  /* Scrollbar */
  --color-scrollbar-thumb: #d6d3d1;
  --color-scrollbar-hover: #a8a29e;
  --color-scrollbar-track: transparent;

  /* Buttons */
  --color-btn-green:      var(--color-accent-teal);
  --color-btn-green-hover: #0f766e;
  --color-btn-blue:       var(--color-accent-teal);
  --color-btn-blue-hover: var(--color-accent-teal-light);
  --color-btn-twitter:    #1d9bf0;
}

/* Scroll-reveal animations */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger children: each .reveal-child delays slightly more */
.reveal-child { opacity: 0; transform: translateY(24px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal-child.visible { opacity: 1; transform: translateY(0); }
/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-child { transition: none; opacity: 1; transform: none; }
}

/* Thin scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
}
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-scrollbar-track);
}
::-webkit-scrollbar-thumb {
  background: var(--color-scrollbar-thumb);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-scrollbar-hover);
}