/* =========================================================================
   AgentSiteScore — Design Tokens
   Shared across /home, /, and report. Change values here; everything
   inherits.
   ========================================================================= */

:root {
  /* ---- Brand ---- */
  --brand:            #10b981;   /* primary green  (buttons, active nav) */
  --brand-dark:       #059669;   /* hover state */
  --brand-tint:       #ecfdf5;   /* active-sidebar bg, success pills */

  /* ---- Accents ---- */
  --accent:           #3b82f6;   /* info blue (SEO tile icons) */
  --accent-tint:      #dbeafe;
  --accent-purple:    #8b5cf6;   /* AI tile */
  --accent-purple-tint:#f3e8ff;
  --accent-amber:     #f59e0b;   /* Reputation tile */
  --accent-amber-tint:#fef3c7;
  --accent-indigo:    #6366f1;   /* Competitors tile */
  --accent-indigo-tint:#e0e7ff;
  --accent-pink:      #ec4899;   /* Social tile */
  --accent-pink-tint: #fce7f3;
  --accent-red:       #ef4444;
  --accent-red-tint:  #fee2e2;

  /* ---- Ink / text ---- */
  --ink:              #111827;
  --ink-soft:         #374151;
  --muted:            #6b7280;
  --muted-light:      #9ca3af;

  /* ---- Surfaces ---- */
  --bg:               #f5f6fa;    /* page background */
  --card:             #ffffff;
  --border:           #e5e7eb;
  --border-strong:    #d1d5db;

  /* ---- Typography ---- */
  --font-sans:        'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---- Radii ---- */
  --r-sm:             6px;
  --r-md:             10px;
  --r-lg:             14px;
  --r-xl:             20px;
  --r-pill:           999px;

  /* ---- Shadows (subtle, SaaS-standard) ---- */
  --shadow-sm:        0 1px 2px rgba(17,24,39,0.04);
  --shadow-md:        0 4px 12px rgba(17,24,39,0.06);
  --shadow-lg:        0 10px 32px rgba(17,24,39,0.08);
  --shadow-hover:     0 6px 20px rgba(59,130,246,0.08);

  /* ---- Layout ---- */
  --nav-h:            64px;
  --sidebar-w:        72px;
  --content-max:      1400px;
  --content-pad-x:    36px;

  /* ---- Transitions ---- */
  --t-fast:           0.15s ease;
}

/* Reset-ish */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* =========================================================================
   DARK-MARKETING PALETTE (homepage v2, #report, /sample, /home, /dashboard,
   dark nav, dark-hero pricing/methodology, error pages).
   Namespaced with --v2- prefix so they never collide with the light
   --brand / --ink / --bg tokens above.
   Applied via .theme-dark wrapper class in components.css.
   ========================================================================= */
:root {
  --v2-bg-dark:      #0a0e27;   /* base dark surface (hero, body, dark sections) */
  --v2-bg-deeper:    #050814;   /* terminal / deepest bg */
  --v2-card:         #13172e;   /* dashboard panel + dark card */
  --v2-card-hi:      #1a1f3d;   /* card header strip / raised card */
  --v2-border:       #242a4d;   /* dark card borders + dividers */
  --v2-text:         #ffffff;
  --v2-muted:        #8892b0;   /* body text on dark */
  --v2-dim:          #5c6487;   /* timestamps, footer text, placeholders */

  --v2-green:        #10d9a0;   /* CTA, live dot, positive category */
  --v2-green-hover:  #0fbd8b;
  --v2-green-soft:   rgba(16, 217, 160, 0.12);
  --v2-red:          #ff5f5f;   /* loss-aversion framing, critical issues */
  --v2-red-soft:     rgba(255, 95, 95, 0.12);
  --v2-gold:         #fbbf24;   /* grade ring, featured score */
  --v2-gold-soft:    rgba(251, 191, 36, 0.15);
  --v2-violet:       #a78bfa;   /* AI brand accents */
  --v2-violet-soft:  rgba(167, 139, 250, 0.12);
  --v2-teal:         #5eead4;
}

/* =========================================================================
   SHARED KEYFRAMES — used by multiple .lp-* primitives across the site.
   Lived under .landing-v2 in landing.html originally; promoted to global
   so #report, /sample, /home, etc. can reuse the same animations.
   ========================================================================= */
@keyframes v2pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.85); }
}
@keyframes v2fillRing {
  /* Large ring (hero + #report score): 339.3 dasharray → 94.9 offset = 72% fill */
  to { stroke-dashoffset: 94.9; }
}
@keyframes v2fillRingSmall {
  /* Small ring (sample-report header): 188.5 dasharray → 52.8 offset = 72% fill */
  to { stroke-dashoffset: 52.8; }
}
@keyframes v2fillBar {
  to { width: var(--v2-w); }
}
@keyframes v2blink {
  50% { opacity: 0; }
}
@keyframes v2fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}