/* ============================================
   ReadPuppy Design System — main.css ?v=1.0
   ============================================ */

/* --- CSS Variables --- */
:root {
  /* Brand */
  --rp-purple:       #7F77DD;
  --rp-purple-dark:  #534AB7;
  --rp-purple-light: #EEEDFE;
  --rp-purple-text:  #3C3489;

  /* Content boxes */
  --rp-green:        #1D9E75;
  --rp-green-light:  #E1F5EE;
  --rp-green-text:   #085041;

  --rp-amber:        #BA7517;
  --rp-amber-light:  #FAEEDA;
  --rp-amber-text:   #633806;

  --rp-red:          #A32D2D;
  --rp-red-light:    #FCEBEB;
  --rp-red-text:     #791F1F;

  /* Neutrals */
  --rp-dark:         #1a1a1a;
  --rp-mid:          #444444;
  --rp-muted:        #888888;
  --rp-border:       #e0e0e0;
  --rp-bg:           #f9f9f9;
  --rp-white:        #ffffff;

  /* Topic header alternates */
  --rp-topic-a:      #7F77DD;
  --rp-topic-b:      #1D9E75;
}

/* --- Reset --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

img, svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--rp-purple);
  text-decoration: none;
}

a:hover {
  color: var(--rp-purple-dark);
  text-decoration: underline;
}

ul, ol {
  list-style: none;
}

/* --- Typography --- */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--rp-dark);
  background: var(--rp-bg);
}

h1 { font-size: 2.2rem; font-weight: 700; line-height: 1.2; }
h2 { font-size: 1.5rem; font-weight: 600; line-height: 1.3; }
h3 { font-size: 1.15rem; font-weight: 600; line-height: 1.4; }

p {
  margin-bottom: 1rem;
}

/* --- Layout --- */
.rp-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.rp-container--narrow {
  max-width: 640px;
}

/* --- Nav --- */
.rp-nav {
  background: var(--rp-white);
  border-bottom: 1px solid var(--rp-border);
  padding: 16px 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.rp-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.rp-nav__logo {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--rp-purple);
  text-decoration: none;
}

.rp-nav__logo:hover {
  color: var(--rp-purple-dark);
  text-decoration: none;
}

.rp-nav__links a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--rp-mid);
  margin-left: 24px;
}

.rp-nav__links a:hover {
  color: var(--rp-purple);
  text-decoration: none;
}

/* --- Footer --- */
.rp-footer {
  background: var(--rp-white);
  border-top: 1px solid var(--rp-border);
  padding: 32px 0;
  margin-top: 64px;
  text-align: center;
  color: var(--rp-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* --- Utility --- */
.rp-text-center { text-align: center; }
.rp-text-muted  { color: var(--rp-muted); }
.rp-mt-1 { margin-top: 8px; }
.rp-mt-2 { margin-top: 16px; }
.rp-mt-3 { margin-top: 24px; }
.rp-mt-4 { margin-top: 32px; }
.rp-mb-1 { margin-bottom: 8px; }
.rp-mb-2 { margin-bottom: 16px; }
.rp-mb-3 { margin-bottom: 24px; }
.rp-mb-4 { margin-bottom: 32px; }

/* --- Responsive --- */
@media (max-width: 768px) {
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.3rem; }
  .rp-container { padding: 0 16px; }
}

@media (max-width: 400px) {
  h1 { font-size: 1.5rem; }
  .rp-nav__links a { margin-left: 16px; font-size: 0.85rem; }
  .rp-btn { padding: 12px 20px; font-size: 0.95rem; }
}

/* --- Puppy Bar (global top bar for logged-in users) --- */
.rp-puppy-bar {
  background: linear-gradient(90deg, #0f0c29, #302b63);
  color: rgba(255,255,255,0.7);
  font-size: 0.8rem;
  text-align: center;
  padding: 6px 16px;
}
.rp-puppy-bar__alert { color: #ff8888; font-weight: 600; }

/* --- Nav Hamburger (mobile) --- */
.rp-nav__toggle { display: none; }
.rp-nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
}
.rp-nav__hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--rp-mid);
  border-radius: 2px;
  transition: all 0.2s;
}
@media (max-width: 768px) {
  .rp-nav__hamburger { display: flex; }
  .rp-nav__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--rp-white);
    border-top: 1px solid var(--rp-border);
    border-bottom: 1px solid var(--rp-border);
    padding: 12px 20px;
    flex-direction: column;
    gap: 4px;
    z-index: 200;
  }
  .rp-nav__links a { display: block; padding: 10px 0; margin-left: 0; border-bottom: 1px solid var(--rp-border); }
  .rp-nav__links a:last-child { border-bottom: none; }
  .rp-nav__toggle:checked ~ .rp-nav__links { display: flex; }
  .rp-nav { position: relative; }
}
.rp-nav__cta {
  background: var(--rp-purple);
  color: #fff !important;
  padding: 6px 14px;
  border-radius: 6px;
  font-weight: 600;
}
.rp-nav__cta:hover { background: var(--rp-purple-dark); color: #fff !important; text-decoration: none; }
.rp-nav__signout { color: var(--rp-muted) !important; }

/* --- Page fade-in --- */
@keyframes rp-fadein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rp-main { animation: rp-fadein 0.25s ease; }

/* --- Footer Brand --- */
.rp-footer__brand { font-size: 1.1rem; font-weight: 700; color: var(--rp-purple); margin-bottom: 6px; }
.rp-footer__copy { margin-top: 12px; font-size: 0.8rem; }