/* ==========================================================================
   Sheet Scorer - SITE CHROME BRIDGE (LANDING agent)

   render_navigation() and render_footer() are not self-contained: they read a :root
   palette (--primary-color, --text-primary, --glass-background, --border-glass,
   --dropdown-bg ...) and the base .button rules that live in index1.css, which tool pages
   do not load. This file supplies them as a frozen copy of the homepage palette (same
   pattern and values as agent-rooms/css/site-chrome.css and decision-lab.css), so the
   nav looks identical to every other page and editing the homepage cannot restyle it.

   Load order: /css/nav-shared.css -> landing.css -> THIS FILE (last on purpose: the focus
   rules below restate the chrome's intent at a specificity that must win on source order).

   The chrome and this landing are dark-only (no light switching).
   ========================================================================== */

:root {
  /* Brand */
  --primary-color: #4F46E5;
  --secondary-color: #7C3AED;
  --accent-primary: #A78BFA;

  /* --primary-color-dark is read by the footer promo strip
     (footer_functions.php) and is defined NOWHERE else in the codebase, so its
     unstyled fallback is a stray orange (#c85d0a). Pin it to a real shade of
     the brand indigo. */
  --primary-color-dark: #4338CA;

  /* Surfaces */
  --bg-primary: #0D0C1D;
  --bg-secondary: #1A1A2E;
  --surface-glass: rgba(255, 255, 255, 0.05);
  --surface-glass-hover: rgba(255, 255, 255, 0.08);
  --glass-background: rgba(255, 255, 255, 0.05);
  --glass-background-hover: rgba(255, 255, 255, 0.08);
  --card-bg: rgba(255, 255, 255, 0.03);
  --dropdown-bg: #0D0C1D;

  /* Text */
  --text-color: #FFFFFF;
  --text-primary: #FFFFFF;
  --text-secondary: #9CA3AF;
  --text-tertiary: #6B7280;
  --text-headings: #E5E7EB;

  /* Borders */
  --border-glass: rgba(255, 255, 255, 0.1);
  --border-glass-hover: rgba(255, 255, 255, 0.2);

  /* Status */
  --success-color: #10b981;
  --warning-color: #f59e0b;
  --danger-color: #ef4444;

  /* Motion */
  --transition-speed: 0.3s;
  --transition-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Radii */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all var(--transition-speed);
  font-weight: 500;
  font-size: 0.95rem;
  text-align: center;
}

.button-primary {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: var(--text-primary);
  border: 1px solid transparent;
}
.button-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(79, 70, 229, 0.4);
}

.button-outline {
  background: transparent;
  border: 1px solid var(--border-glass);
  color: var(--text-primary);
}
.button-outline:hover {
  background: var(--surface-glass-hover);
  border-color: var(--border-glass-hover);
}

@media (min-width: 1024px) {
  .button { padding: 0.6rem 1.2rem; font-size: 0.95rem; }
}


/* Keyboard focus for chrome controls (WCAG 2.4.7). Must stay AFTER landing.css. */
.footer-v2 a { text-decoration: none; }
.nav-container :where(a, button, [tabindex]):focus-visible,
.banner-container :where(a, button):focus-visible,
.mobile-menu :where(a, button, [tabindex]):focus-visible,
.footer-v2 :where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}