/* ============================================================
   SpecPeek Shared Styles
   Shared across index.html, terms.html, privacy.html
   ============================================================ */

/* ---- Brand Color System ---- */
:root {
  /* Violet scale */
  --violet-50: #F5F3FF;
  --violet-100: #EDE9FE;
  --violet-200: #DDD6FE;
  --violet-300: #C4B5FD;
  --violet-400: #A78BFA;
  --violet-500: #8B5CF6;
  --violet-600: #7C3AED;
  --violet-700: #6D28D9;
  --violet-800: #5B21B6;
  --violet-900: #4C1D95;
  --violet-950: #2E1065;
  /* Slate scale */
  --slate-50: #FAFBFC;
  --slate-100: #F0F2F5;
  --slate-200: #E4E8ED;
  --slate-300: #D8DDE3;
  --slate-400: #C8CDD3;
  --slate-500: #9099A3;
  --slate-600: #6B7280;
  --slate-700: #4E5968;
  --slate-800: #2C313C;
  --slate-900: #1C2128;
  --slate-950: #13111C;
  --slate-950-elevated: #1A1726;
  /* Gold scale */
  --gold-300: #F5D88A;
  --gold-400: #F0C05C;
  --gold-500: #ECA72C;
  --gold-600: #D4952A;
  --gold-700: #B07A22;
  /* Semantic aliases */
  --brand-primary: var(--violet-600);
  --brand-primary-hover: var(--violet-700);
  --brand-primary-active: var(--violet-800);
  --surface-dark: var(--slate-950);
  --surface-dark-elevated: var(--slate-950-elevated);
  --text-on-dark: #F8F8F2;
  --text-on-dark-secondary: #ABB2BF;
  --text-on-dark-muted: var(--slate-500);
  --text-on-dark-faint: var(--slate-600);
  --text-disabled: #aaa;
  --premium: var(--gold-500);
  --premium-hover: var(--gold-600);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-separator: rgba(255, 255, 255, 0.1);
  --navbar-bg: rgba(26, 23, 38, 0.7);
  --shadow-dark: rgba(0, 0, 0, 0.18);
  --shadow-hover: rgba(0, 0, 0, 0.3);
  --shadow-subtle: rgba(0, 0, 0, 0.08);
  --white: #fff;
  --white-70: rgba(255, 255, 255, 0.7);
  --white-60: rgba(255, 255, 255, 0.6);
  --white-55: rgba(255, 255, 255, 0.55);
  --white-50: rgba(255, 255, 255, 0.5);
  --white-45: rgba(255, 255, 255, 0.45);
  --white-35: rgba(255, 255, 255, 0.35);
  --white-80: rgba(255, 255, 255, 0.8);
}

/* ---- Navbar ---- */
.navbar { background-color: transparent !important; }
.nav-link { color: var(--white-70) !important; }
.nav-link:hover { color: var(--white) !important; }
.button.secondary { background-color: var(--brand-primary) !important; color: var(--white) !important; transition: background-color 0.2s ease !important; }
.button.secondary:hover { background-color: var(--brand-primary-hover) !important; color: var(--white) !important; background-image: none !important; }

/* ---- Logo ---- */
.sp-logo-icon {
  width: 36px; height: 36px;
  flex-shrink: 0; margin-right: 8px;
  border-radius: 6px;
}
.sp-logo-text {
  font-weight: 700; font-size: 1.25rem;
  color: var(--text-on-dark);
}

/* ---- Footer ---- */
.sp-footer { padding: 48px 0 24px; background: var(--surface-dark); color: var(--white-60); }
.footer-grid { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 40px; align-items: start; margin-bottom: 40px; }
.footer-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 700; font-size: 1.15rem; color: var(--white); margin-bottom: 8px; }
.footer-logo .sp-logo-icon { width: 28px; height: 28px; font-size: 15px; }
.footer-tagline { font-size: 0.85rem; color: var(--white-45); }
.footer-links { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; }
.footer-links a { color: var(--white-60); text-decoration: none; font-size: 0.9rem; transition: color 0.2s; }
.footer-links a:hover { color: var(--white); }
.footer-social { display: flex; justify-content: flex-end; gap: 16px; }
.footer-social a { color: var(--white-50); text-decoration: none; font-size: 0.9rem; transition: color 0.2s; }
.footer-social a:hover { color: var(--white); }
.footer-bottom { text-align: center; padding-top: 24px; border-top: 1px solid var(--border-separator); font-size: 0.8rem; color: var(--white-35); font-style: italic; }

@media (max-width: 991px) {
  .footer-grid { grid-template-columns: 1fr; text-align: center; }
  .footer-links { justify-content: center; }
  .footer-social { justify-content: center; }
}

/* ---- Policy pages ---- */
.policy-content {
  max-width: 720px; margin: 0 auto; padding: 4rem 2rem;
  font-size: 16px; line-height: 1.7; color: var(--text-on-dark-secondary);
}
.policy-content h1 { font-size: 2rem; font-weight: 800; margin-bottom: 0.5rem; color: var(--text-on-dark); }
.policy-content h3 { font-size: 1.25rem; font-weight: 700; margin-top: 2.5rem; margin-bottom: 0.75rem; color: var(--text-on-dark); }
.policy-content p { margin-bottom: 1rem; }
.policy-content a { color: var(--violet-400); text-decoration: underline; }
.policy-content ul { padding-left: 1.5rem; margin-bottom: 1rem; }
.policy-content li { margin-bottom: 0.35rem; }
.policy-date { color: var(--text-on-dark-muted); margin-bottom: 0.25rem; }

/* ---- Hide Webflow badge ---- */
.w-webflow-badge { display: none !important; }