/* Shared Ruya Reflect UI primitives — v0.5.7 dual-theme aligned */

/* ── Light (default) ── */
:root,
[data-theme="light"] {
  --rr-bg:        #FAFAF6;
  --rr-surface:   #FFFFFF;
  --rr-surface2:  #F5F2EC;
  --rr-surface3:  #EDEAE3;
  --rr-ocean:     #1A7A75;
  --rr-ocean-lt:  #218F89;
  --rr-ocean-dim: rgba(26,122,117,0.07);
  --rr-ocean-bdr: rgba(26,122,117,0.18);
  --rr-cream:     #1A1E2E;
  --rr-cream-lt:  #2C3040;
  --rr-t1:        #1A1E2E;
  --rr-t2:        rgba(26,30,46,0.72);
  --rr-t3:        rgba(26,30,46,0.45);
  --rr-border:    rgba(0,0,0,0.06);
  --rr-border-hi: rgba(0,0,0,0.11);
  --rr-serif: 'Cormorant Garamond', Georgia, serif;
  --rr-sans:  'Nunito', system-ui, sans-serif;
  --rr-r: 12px; --rr-r-lg: 20px;
  --rr-ease: cubic-bezier(.22,1,.36,1);
  --rr-spring: cubic-bezier(.34,1.56,.64,1);
  --rr-btn-text: #fff;
  --rr-btn-shadow: rgba(26,122,117,0.22);
  --rr-hover-bg: rgba(0,0,0,0.03);
  --rr-hover-border: rgba(0,0,0,0.22);
  --rr-toast-bg: rgba(26,30,46,0.96);
  --rr-toast-text: #f3efe7;
}

/* ── Dark ── */
[data-theme="dark"] {
  --rr-bg:        #0D1117;
  --rr-surface:   #141A24;
  --rr-surface2:  #192233;
  --rr-surface3:  #1E2940;
  --rr-ocean:     #2A8F8A;
  --rr-ocean-lt:  #35B5AF;
  --rr-ocean-dim: rgba(42,143,138,0.14);
  --rr-ocean-bdr: rgba(42,143,138,0.30);
  --rr-cream:     #F0EAD6;
  --rr-cream-lt:  #F7F3E9;
  --rr-t1:        #F0EAD6;
  --rr-t2:        rgba(240,234,214,0.70);
  --rr-t3:        rgba(240,234,214,0.40);
  --rr-border:    rgba(255,255,255,0.06);
  --rr-border-hi: rgba(255,255,255,0.11);
  --rr-btn-text:  #0D1117;
  --rr-btn-shadow: rgba(200,169,110,0.22);
  --rr-hover-bg: rgba(255,255,255,0.05);
  --rr-hover-border: rgba(255,255,255,0.28);
  --rr-toast-bg: rgba(13,17,23,0.96);
  --rr-toast-text: #F0EAD6;
}

.rr-wrap,
.rr-home-sections {
  max-width: 100%; margin: 0; padding: 0;
  font-family: var(--rr-sans); color: var(--rr-t1);
}

/* ── Primary button ── */
.rr-button,
.rr-form-card button[type="submit"],
.rr-cta-btn,
input[type="submit"].rr-button {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; padding: 14px 28px;
  background: var(--rr-button-bg, var(--rr-ocean));
  color: var(--rr-button-text, var(--rr-btn-text));
  font-family: var(--rr-sans); font-size: 14.5px; font-weight: 800;
  border: none; border-radius: 50px; cursor: pointer; text-decoration: none;
  box-shadow: 0 6px 22px var(--rr-button-shadow, var(--rr-btn-shadow));
  transition: transform .22s var(--rr-spring), box-shadow .22s, background .35s, color .35s;
  width: auto; margin-top: 4px;
}
.rr-button:hover,
.rr-form-card button[type="submit"]:hover,
.rr-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px var(--rr-button-shadow, var(--rr-btn-shadow));
  filter: brightness(1.04);
  color: var(--rr-button-text, var(--rr-btn-text));
}

/* ── Secondary button ── */
.rr-button-secondary,
.rr-actions .button,
.rr-actions button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 20px; background: transparent;
  color: var(--rr-t2); font-family: var(--rr-sans);
  font-size: 13.5px; font-weight: 600;
  border: 1.5px solid var(--rr-border-hi); border-radius: 50px;
  cursor: pointer; text-decoration: none;
  transition: color .2s, border-color .2s, background .2s;
}
.rr-button-secondary:hover,
.rr-actions .button:hover,
.rr-actions button:hover {
  color: var(--rr-t1);
  border-color: var(--rr-hover-border);
  background: var(--rr-hover-bg);
}

/* ── Status / spinner ── */
.rr-status {
  margin-top: 12px; min-height: 24px;
  display: flex; align-items: center; gap: 8px;
  color: var(--rr-t3); font-size: .92rem;
}
.rr-status.rr-loading-state {
  padding: 14px 18px; border-radius: var(--rr-r);
  background: var(--rr-surface3); border: 1px solid var(--rr-ocean-bdr);
  color: var(--rr-t2);
}
.rr-inline-spinner {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid var(--rr-ocean);
  border-right-color: transparent; border-radius: 50%;
  animation: rr-spin .8s linear infinite;
}
@keyframes rr-spin { to { transform: rotate(360deg); } }

.rr-actions { width: 100%; display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .rr-actions { flex-direction: column; align-items: stretch; }
}