/**
 * psychic.org — Signal Rose dark palette
 *
 * Master stylesheet. Loaded by every page after pico.min.css.
 * Contains:
 *   1. Signal Rose dark theme variables (--z*)
 *   2. Legacy variable names remapped to dark equivalents
 *      (so existing per-page styles work without edits)
 *   3. Global body / typography
 *   4. Shared header + footer styles
 */

:root {
  /* ============================================================
     SIGNAL ROSE DARK PALETTE
     ============================================================ */
  --ztextColor: #F8FAFC;
  --ztextSecondary: #CBD5E1;
  --ztextTertiary: #8B8FA3;

  --zsignalRose: #FF2D55;
  --zsignalRoseHover: #FF4D70;
  --zsignalRoseDeep: #CC1237;
  --zsignalRoseSoft: #FF6F8A;
  --zsignalRoseTransparent: rgba(255, 45, 85, 0.22);
  --zsignalRoseGlow: rgba(255, 45, 85, 0.38);

  --zbackgroundPage: #0B0B10;
  --zbackgroundBlack: #07070A;
  --zcontainerColor: #17171F;
  --zaltContainerColor: #20202A;
  --zsoftContainerColor: #2A2A35;

  --zpsychicLime: #BEFF2D;
  --zpsychicLimeHover: #D8FF75;
  --zpsychicLimeTransparent: rgba(190, 255, 45, 0.18);
  --zpsychicLimeGlow: rgba(190, 255, 45, 0.26);

  --zsignalViolet: #6E2DFF;
  --zsignalVioletHover: #8755FF;
  --zsignalVioletTransparent: rgba(110, 45, 255, 0.18);
  --zsignalVioletGlow: rgba(110, 45, 255, 0.30);

  --zsuccessColor: #34D399;
  --zwarningColor: #BEFF2D;
  --zfailureColor: #FF2D55;

  --zborderColor: rgba(255, 255, 255, 0.08);
  --zborderStrong: #31313D;

  --zshadowDark: rgba(0, 0, 0, 0.75);
  --zshadowSoft: rgba(0, 0, 0, 0.35);

  /* ============================================================
     LEGACY VARIABLE NAMES — remapped to dark theme
     Pages reference these in their inline styles. Do not rename.
     ============================================================ */

  /* Primary (was Indigo) -> Signal Rose */
  --primary-50: rgba(255, 45, 85, 0.10);
  --primary-100: rgba(255, 45, 85, 0.18);
  --primary-200: rgba(255, 45, 85, 0.28);
  --primary-300: rgba(255, 45, 85, 0.45);
  --primary-400: #FF6F8A;
  --primary-500: #FF2D55;
  --primary-600: #FF2D55;
  --primary-700: #FF4D70;
  --primary-800: #CC1237;
  --primary-900: #CC1237;
  --primary-950: #7A0A22;

  /* Secondary (was Coral) -> Signal Violet */
  --secondary-50: rgba(110, 45, 255, 0.10);
  --secondary-100: rgba(110, 45, 255, 0.18);
  --secondary-200: rgba(110, 45, 255, 0.28);
  --secondary-300: rgba(110, 45, 255, 0.45);
  --secondary-400: #8755FF;
  --secondary-500: #6E2DFF;
  --secondary-600: #6E2DFF;
  --secondary-700: #8755FF;
  --secondary-800: #4F1FB8;
  --secondary-900: #4F1FB8;
  --secondary-950: #2E0F70;

  /* Accent (was Emerald) -> Psychic Lime */
  --accent-50: rgba(190, 255, 45, 0.08);
  --accent-100: rgba(190, 255, 45, 0.16);
  --accent-200: rgba(190, 255, 45, 0.26);
  --accent-300: rgba(190, 255, 45, 0.40);
  --accent-400: #D8FF75;
  --accent-500: #BEFF2D;
  --accent-600: #BEFF2D;
  --accent-700: #9DDB1F;
  --accent-800: #6FA013;
  --accent-900: #4F7308;

  /* Neutrals -> dark scale (50=lightest text, 900=deepest container) */
  --neutral-50: #F8FAFC;
  --neutral-100: #2A2A35;
  --neutral-200: #20202A;
  --neutral-300: #2A2A35;
  --neutral-400: #4A4A5A;
  --neutral-500: #6A6A7A;
  --neutral-600: #8B8FA3;
  --neutral-700: #CBD5E1;
  --neutral-800: #1E1E26;
  --neutral-900: #0F0F14;
  --neutral-950: #07070A;

  /* Semantic — Success */
  --success-50: rgba(52, 211, 153, 0.08);
  --success-100: rgba(52, 211, 153, 0.15);
  --success-200: rgba(52, 211, 153, 0.25);
  --success-300: rgba(52, 211, 153, 0.45);
  --success-400: #6EE7B7;
  --success-500: #34D399;
  --success-600: #34D399;
  --success-700: #6EE7B7;
  --success-800: #10B981;
  --success-900: #047857;

  /* Semantic — Warning (lime) */
  --warning-50: rgba(190, 255, 45, 0.08);
  --warning-100: rgba(190, 255, 45, 0.18);
  --warning-200: rgba(190, 255, 45, 0.28);
  --warning-300: rgba(190, 255, 45, 0.45);
  --warning-400: #D8FF75;
  --warning-500: #BEFF2D;
  --warning-600: #BEFF2D;
  --warning-700: #D8FF75;
  --warning-800: #9DDB1F;
  --warning-900: #6FA013;

  /* Semantic — Error (Signal Rose) */
  --error-50: rgba(255, 45, 85, 0.08);
  --error-100: rgba(255, 45, 85, 0.15);
  --error-200: rgba(255, 45, 85, 0.25);
  --error-300: rgba(255, 45, 85, 0.45);
  --error-400: #FF6F8A;
  --error-500: #FF2D55;
  --error-600: #FF2D55;
  --error-700: #FF6F8A;
  --error-800: #CC1237;
  --error-900: #7A0A22;

  /* Semantic — Info (Signal Violet) */
  --info-50: rgba(110, 45, 255, 0.08);
  --info-100: rgba(110, 45, 255, 0.15);
  --info-200: rgba(110, 45, 255, 0.25);
  --info-300: rgba(110, 45, 255, 0.45);
  --info-400: #8755FF;
  --info-500: #6E2DFF;
  --info-600: #6E2DFF;
  --info-700: #8755FF;
  --info-800: #4F1FB8;
  --info-900: #2E0F70;

  /* Backgrounds */
  --bg-primary:
    radial-gradient(circle at top left, rgba(255, 45, 85, 0.14), transparent 32%),
    radial-gradient(circle at top right, rgba(110, 45, 255, 0.16), transparent 30%),
    linear-gradient(135deg, #07070A, #0B0B10);
  --bg-secondary: #17171F;
  --bg-tertiary: #20202A;
  --bg-elevated: #17171F;
  --bg-dark: #07070A;
  --bg-darker: #07070A;

  /* Text */
  --text-primary: #F8FAFC;
  --text-secondary: #CBD5E1;
  --text-tertiary: #8B8FA3;
  --text-disabled: #4A4A5A;
  --text-on-primary: #FFFFFF;
  --text-on-secondary: #FFFFFF;
  --text-on-dark: #F8FAFC;

  /* Borders */
  --border-light: rgba(255, 255, 255, 0.08);
  --border-medium: #31313D;
  --border-strong: #4A4A5A;
  --border-primary: #FF2D55;
  --border-error: #FF2D55;

  /* Links */
  --link-default: #FF2D55;
  --link-hover: #FF4D70;
  --link-active: #CC1237;
  --link-visited: #FF6F8A;

  /* Buttons */
  --btn-primary-bg: #FF2D55;
  --btn-primary-hover: #FF4D70;
  --btn-primary-active: #CC1237;
  --btn-primary-text: #FFFFFF;

  --btn-secondary-bg: #6E2DFF;
  --btn-secondary-hover: #8755FF;
  --btn-secondary-active: #4F1FB8;
  --btn-secondary-text: #FFFFFF;

  --btn-outline-border: #FF2D55;
  --btn-outline-text: #FF2D55;
  --btn-outline-hover-bg: rgba(255, 45, 85, 0.10);

  --btn-ghost-text: #CBD5E1;
  --btn-ghost-hover-bg: #2A2A35;

  --btn-disabled-bg: #2A2A35;
  --btn-disabled-text: #6A6A7A;

  /* Forms */
  --input-bg: #20202A;
  --input-border: #31313D;
  --input-border-focus: #FF2D55;
  --input-text: #F8FAFC;
  --input-placeholder: #8B8FA3;
  --input-disabled-bg: #17171F;
  --input-error-border: #FF2D55;

  /* Shadows (darker for dark mode) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.65);
  --shadow-2xl: 0 32px 80px rgba(0, 0, 0, 0.75);

  /* Focus rings */
  --focus-ring: 0 0 0 4px rgba(255, 45, 85, 0.22);
  --focus-ring-error: 0 0 0 4px rgba(255, 45, 85, 0.30);
  --focus-ring-success: 0 0 0 4px rgba(52, 211, 153, 0.30);

  /* Overlays */
  --overlay-light: rgba(0, 0, 0, 0.5);
  --overlay-dark: rgba(0, 0, 0, 0.75);
  --overlay-white: rgba(255, 255, 255, 0.06);

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #CC1237 0%, #FF2D55 100%);
  --gradient-secondary: linear-gradient(135deg, #6E2DFF 0%, #4F1FB8 100%);
  --gradient-accent: linear-gradient(135deg, #BEFF2D 0%, #9DDB1F 100%);
  --gradient-sunset: linear-gradient(135deg, #FF2D55 0%, #6E2DFF 100%);
  --gradient-ocean: linear-gradient(135deg, #6E2DFF 0%, #34D399 100%);

  /* Surfaces */
  --surface-base: #17171F;
  --surface-raised: #20202A;
  --surface-overlay: #2A2A35;
  --surface-hover: #2A2A35;

  /* Dividers */
  --divider-light: rgba(255, 255, 255, 0.08);
  --divider-strong: #31313D;

  /* Code */
  --code-bg: #20202A;
  --code-text: #F8FAFC;
  --code-border: #31313D;

  /* Badges */
  --badge-primary-bg: rgba(255, 45, 85, 0.18);
  --badge-primary-text: #FF6F8A;
  --badge-success-bg: rgba(52, 211, 153, 0.15);
  --badge-success-text: #34D399;
  --badge-warning-bg: rgba(190, 255, 45, 0.18);
  --badge-warning-text: #BEFF2D;
  --badge-error-bg: rgba(255, 45, 85, 0.15);
  --badge-error-text: #FF6F8A;
  --badge-neutral-bg: #2A2A35;
  --badge-neutral-text: #CBD5E1;
}

/* ============================================================
   GLOBAL BASE STYLES
   ============================================================ */

/* Root font-size — sets the base for every rem on the site.
   Pico CSS bumps this up to 118.75–125% on wider viewports, which makes
   the whole site feel oversized on desktop. Pin it here to keep sizing
   consistent across breakpoints.
   Lower = everything smaller. Try 93.75% (= 15px) or 87.5% (= 14px) if
   100% still feels too large. */
html {
  font-size: 110%;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-primary);
  background-attachment: fixed;
  margin: 0;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

a {
  color: var(--link-default);
  transition: color 0.2s ease;
}

a:hover {
  color: var(--link-hover);
}

::selection {
  background: var(--zsignalRoseTransparent);
  color: var(--ztextColor);
}

/* ============================================================
   SITE HEADER
   ============================================================ */
.site-header {
  background-color: rgba(23, 23, 31, 0.88);
  border-bottom: 1px solid var(--zborderColor);
  box-shadow: 0 4px 18px var(--zshadowDark);
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.15rem 1.5rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
  line-height: 1.1;
}

.site-logo {
  display: inline-flex;
  align-items: center;
  color: var(--ztextColor);
  text-decoration: none;
  line-height: 1;
}

.site-logo img {
  height: 8px !important;
  width: auto !important;
  max-width: none !important;
  display: block;
}

.header-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-alert {
  background-color: rgba(0, 0, 0, 0.88);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.9);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
}

.header-nav {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.header-nav a {
  color: var(--ztextSecondary);
  text-decoration: none;
  padding: 0.2rem 0.85rem;
  border-radius: 999px;
  transition: all 0.25s ease;
  font-size: 0.85rem;
  font-weight: 500;
}

.header-nav a:hover {
  background-color: var(--zsoftContainerColor);
  color: var(--ztextColor);
}

.header-nav a.active {
  color: var(--ztextColor);
  background-color: rgba(255, 255, 255, 0.09);
  box-shadow: none;
  position: relative;
}

.header-nav a.active::after {
  content: "";
  position: absolute;
  left: 28%;
  right: 28%;
  bottom: 0.18rem;
  height: 2px;
  border-radius: 999px;
  background: var(--zsignalRose);
  box-shadow:
    0 0 6px var(--zsignalRose),
    0 0 12px rgba(255, 45, 85, 0.5);
}

@media (max-width: 768px) {
  .header-container {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 0.75rem;
  }

  .header-nav {
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* ============================================================
   SITE FOOTER
   ============================================================ */
.site-footer {
  background-color: var(--zcontainerColor);
  padding: 3rem 1.5rem 1.5rem;
  margin-top: 4rem;
  border-top: 1px solid var(--zborderColor);
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2.5rem;
}

.footer-section {
  min-width: 180px;
  margin-bottom: 1rem;
}

.footer-logo-section {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
  min-width: 220px;
}

.footer-logo-section a {
  display: inline-flex;
}

.footer-logo-section img {
  display: block;
  height: auto;
  max-width: 180px;
  width: 100%;
}

.footer-title {
  color: var(--zsignalRose);
  margin: 0 0 1rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer-links a {
  color: var(--ztextSecondary);
  text-decoration: none;
  font-size: 0.92rem;
  transition: color 0.25s ease;
}

.footer-links a:hover {
  color: var(--zpsychicLime);
}

.footer-bottom {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  max-width: 1200px;
  margin: 2rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--zborderColor);
  text-align: left;
}

.footer-bottom p {
  color: var(--ztextTertiary);
  font-size: 0.85rem;
  margin: 0;
}

.footer-social-links {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 0.55rem;
}

.site-footer .footer-bottom .footer-social-links .footer-social-link {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  flex: 0 0 auto;
  height: 22px !important;
  justify-content: center;
  opacity: 0.78;
  transition: opacity 0.25s ease, transform 0.25s ease;
  width: 22px !important;
}

.site-footer .footer-bottom .footer-social-links .footer-social-link img {
  display: block;
  height: 16px !important;
  max-height: 16px !important;
  max-width: 16px !important;
  object-fit: contain;
  width: 16px !important;
}

.site-footer .footer-bottom .footer-social-links .footer-social-link:hover,
.site-footer .footer-bottom .footer-social-links .footer-social-link:focus {
  opacity: 1;
  outline: none;
  transform: translateY(-1px);
}

.footer-policy-links {
  align-items: center;
  color: var(--ztextTertiary);
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  font-size: 0.85rem;
  gap: 0.55rem;
  justify-content: flex-end;
  line-height: 1.4;
  text-align: right;
  white-space: nowrap;
}

.footer-policy-links span {
  color: rgba(139, 143, 163, 0.62);
}

.footer-bottom a,
.footer-bottom a:visited {
  color: var(--ztextTertiary);
  text-decoration: none;
  transition: color 0.25s ease;
}

.footer-bottom a:hover,
.footer-bottom a:focus {
  color: var(--zpsychicLime);
}

.site-footer .footer-policy-links a,
.site-footer .footer-policy-links a:link,
.site-footer .footer-policy-links a:visited {
  color: var(--ztextTertiary) !important;
  text-decoration: none !important;
}

.site-footer .footer-policy-links a:hover,
.site-footer .footer-policy-links a:focus {
  color: var(--zpsychicLime) !important;
  text-decoration: none !important;
}

.site-footer .footer-bottom a.footer-terms-link,
.site-footer .footer-bottom a.footer-terms-link:link,
.site-footer .footer-bottom a.footer-terms-link:visited {
  color: var(--ztextTertiary) !important;
  text-decoration: none !important;
}

.site-footer .footer-bottom a.footer-terms-link:hover,
.site-footer .footer-bottom a.footer-terms-link:focus {
  color: var(--zpsychicLime) !important;
  text-decoration: none !important;
}

@media (max-width: 768px) {
  .footer-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.65rem 2.25rem;
    max-width: 520px;
  }

  .footer-section {
    min-width: 0;
    text-align: left;
  }

  .footer-logo-section {
    justify-content: flex-start;
    min-width: 0;
  }

  /* Right-column sections (2nd, 4th, ...) right-align their text so the
     layout feels balanced — left column hugs the left edge, right column
     hugs the right edge. */
  .footer-section:nth-child(2n),
  .footer-logo-section:nth-child(2n) {
    text-align: left;
  }

  .site-footer {
    padding: 2rem clamp(2rem, 8vw, 4rem) 1.25rem;
    margin-top: 2.5rem;
  }

  .footer-bottom {
    align-items: center;
    flex-direction: column;
    gap: 1rem;
  }

  .footer-social-links {
    flex-direction: row !important;
    justify-content: center;
  }

  .footer-policy-links {
    gap: 0.45rem;
    justify-content: center !important;
    text-align: center;
    white-space: normal;
    width: 100%;
  }
}