/* SugarCube shared design foundation.
   New pages should use these --sc-* tokens and .sc-* primitives instead of
   inventing page-local values. Existing legacy aliases are mapped in
   light-theme.css while pages are migrated. */

:root {
  color-scheme: light;

  --sc-color-brand-50: #ecfdf5;
  --sc-color-brand-100: #d1fae5;
  --sc-color-brand-200: #a7f3d0;
  --sc-color-brand-500: #10b981;
  --sc-color-brand-600: #059669;
  --sc-color-brand-700: #047857;
  --sc-color-brand-800: #065f46;
  --sc-color-brand-900: #064e3b;
  --sc-color-ink: #102019;
  --sc-color-text: #25372e;
  --sc-color-muted: #5f6f67;
  --sc-color-subtle: #87958e;
  --sc-color-canvas: #f8faf9;
  --sc-color-surface: #ffffff;
  --sc-color-surface-muted: #f1f5f3;
  --sc-color-border: #dbe7e1;
  --sc-color-border-strong: #bfd4c9;
  --sc-color-info: #2563eb;
  --sc-color-warning: #b45309;
  --sc-color-danger: #b42335;
  --sc-color-success: #087f5b;

  --sc-space-1: 0.25rem;
  --sc-space-2: 0.5rem;
  --sc-space-3: 0.75rem;
  --sc-space-4: 1rem;
  --sc-space-5: 1.25rem;
  --sc-space-6: 1.5rem;
  --sc-space-8: 2rem;
  --sc-space-10: 2.5rem;
  --sc-space-12: 3rem;
  --sc-space-16: 4rem;
  --sc-space-20: 5rem;
  --sc-space-24: 6rem;

  --sc-radius-sm: 0.5rem;
  --sc-radius-md: 0.75rem;
  --sc-radius-lg: 1rem;
  --sc-radius-xl: 1.5rem;
  --sc-radius-pill: 999px;
  --sc-shadow-sm: 0 1px 2px rgba(16, 32, 25, 0.05), 0 4px 14px rgba(16, 32, 25, 0.04);
  --sc-shadow-md: 0 16px 40px rgba(16, 32, 25, 0.08);
  --sc-shadow-lg: 0 28px 72px rgba(16, 32, 25, 0.12);

  --sc-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sc-font-display: var(--sc-font-sans);
  --sc-leading-tight: 1.08;
  --sc-leading-copy: 1.7;
  --sc-container: 1180px;
  --sc-control-height: 44px;
  --sc-motion-fast: 160ms;
  --sc-motion-base: 220ms;
  --sc-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sc-page {
  min-height: 100vh;
  color: var(--sc-color-ink);
  background: var(--sc-color-canvas);
  font-family: var(--sc-font-sans);
}

.sc-container {
  width: min(var(--sc-container), calc(100% - 40px));
  margin-inline: auto;
}

.sc-section { padding-block: clamp(var(--sc-space-16), 8vw, var(--sc-space-24)); }
.sc-section--muted { background: var(--sc-color-surface-muted); }
.sc-stack { display: flex; flex-direction: column; gap: var(--sc-space-6); }
.sc-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-space-3); }

.sc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sc-space-2);
  width: fit-content;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--sc-color-brand-200);
  border-radius: var(--sc-radius-pill);
  color: var(--sc-color-brand-700);
  background: var(--sc-color-brand-50);
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sc-title-display,
.sc-title-section {
  margin: 0;
  color: var(--sc-color-ink);
  font-family: var(--sc-font-display);
  font-weight: 800;
  letter-spacing: -0.045em;
}

.sc-title-display { max-width: 18ch; font-size: clamp(2.5rem, 7vw, 4.75rem); line-height: var(--sc-leading-tight); }
.sc-title-section { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.15; }
.sc-lede { max-width: 64ch; margin: 0; color: var(--sc-color-muted); font-size: clamp(1rem, 2vw, 1.125rem); line-height: var(--sc-leading-copy); }

.sc-card {
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius-xl);
  background: var(--sc-color-surface);
  box-shadow: var(--sc-shadow-sm);
}

.sc-card--interactive {
  transition: transform var(--sc-motion-base) var(--sc-ease), border-color var(--sc-motion-base) var(--sc-ease), box-shadow var(--sc-motion-base) var(--sc-ease);
}

.sc-card--interactive:hover { transform: translateY(-2px); border-color: var(--sc-color-brand-200); box-shadow: var(--sc-shadow-md); }

.sc-button {
  min-height: var(--sc-control-height);
  padding: 0.7rem 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sc-space-2);
  border: 1px solid transparent;
  border-radius: var(--sc-radius-md);
  font: 750 0.875rem/1 var(--sc-font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--sc-motion-fast) var(--sc-ease), background var(--sc-motion-fast) var(--sc-ease), border-color var(--sc-motion-fast) var(--sc-ease), box-shadow var(--sc-motion-fast) var(--sc-ease);
}

.sc-button:hover:not(:disabled) { transform: translateY(-1px); }
.sc-button:active:not(:disabled) { transform: translateY(0); }
.sc-button:disabled, .sc-button[aria-disabled="true"] { opacity: 0.48; cursor: not-allowed; }
.sc-button--primary { color: #fff; background: var(--sc-color-brand-600); box-shadow: 0 8px 20px rgba(16, 185, 129, 0.2); }
.sc-button--primary:hover:not(:disabled) { background: var(--sc-color-brand-700); }
.sc-button--secondary { color: var(--sc-color-text); background: var(--sc-color-surface); border-color: var(--sc-color-border-strong); }
.sc-button--secondary:hover:not(:disabled) { color: var(--sc-color-brand-800); background: var(--sc-color-brand-50); border-color: var(--sc-color-brand-200); }
.sc-button--quiet { color: var(--sc-color-muted); background: transparent; }
.sc-button--danger { color: #fff; background: var(--sc-color-danger); }

.sc-field { display: grid; gap: var(--sc-space-2); }
.sc-label { color: var(--sc-color-text); font-size: 0.8125rem; font-weight: 700; }
.sc-help { color: var(--sc-color-subtle); font-size: 0.75rem; line-height: 1.5; }
.sc-input {
  width: 100%;
  min-height: var(--sc-control-height);
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--sc-color-border-strong);
  border-radius: var(--sc-radius-md);
  outline: 0;
  color: var(--sc-color-ink);
  background: var(--sc-color-surface);
  font: 400 0.875rem/1.5 var(--sc-font-sans);
  transition: border-color var(--sc-motion-fast) var(--sc-ease), box-shadow var(--sc-motion-fast) var(--sc-ease);
}

.sc-input:focus { border-color: var(--sc-color-brand-500); box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12); }
.sc-input[aria-invalid="true"] { border-color: var(--sc-color-danger); }

.sc-alert {
  padding: var(--sc-space-3) var(--sc-space-4);
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius-md);
  color: var(--sc-color-text);
  background: var(--sc-color-surface-muted);
  font-size: 0.8125rem;
  line-height: 1.55;
}

.sc-alert--success { color: var(--sc-color-success); background: var(--sc-color-brand-50); border-color: var(--sc-color-brand-200); }
.sc-alert--danger { color: var(--sc-color-danger); background: #fff1f2; border-color: #fecdd3; }
.sc-alert--warning { color: var(--sc-color-warning); background: #fffbeb; border-color: #fde68a; }

/* Shared FAQ cards keep every question, answer and affordance comfortably apart. */
.sc-faq-list { display: grid; gap: var(--sc-space-3); }
.sc-faq-item { overflow: hidden; border: 1px solid var(--sc-color-border); border-radius: var(--sc-radius-lg); background: var(--sc-color-surface); box-shadow: var(--sc-shadow-sm); transition: border-color var(--sc-motion-base) var(--sc-ease), box-shadow var(--sc-motion-base) var(--sc-ease); }
.sc-faq-item:hover { border-color: var(--sc-color-brand-200); }
.sc-faq-item[open] { border-color: var(--sc-color-brand-200); box-shadow: var(--sc-shadow-md); }
.sc-faq-item > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sc-space-5); min-height: 4.5rem; padding: var(--sc-space-4) var(--sc-space-5); color: var(--sc-color-text); cursor: pointer; font: 750 1rem/1.45 var(--sc-font-sans); list-style: none; }
.sc-faq-item > summary::-webkit-details-marker { display: none; }
.sc-faq-item > summary:focus-visible { outline: 3px solid rgba(16, 185, 129, 0.28); outline-offset: -3px; }
.sc-faq-item > summary::after { content: "+"; display: grid; flex: 0 0 auto; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; color: var(--sc-color-brand-700); background: var(--sc-color-brand-50); font-size: 1.25rem; font-weight: 500; line-height: 1; }
.sc-faq-item[open] > summary::after { content: "−"; color: #fff; background: var(--sc-color-brand-600); }
.sc-faq-item > p { max-width: 65ch; margin: 0; padding: 0 var(--sc-space-5) var(--sc-space-5); color: var(--sc-color-muted); font-size: 0.9375rem; line-height: var(--sc-leading-copy); }

.sc-skeleton {
  overflow: hidden;
  border-radius: var(--sc-radius-sm);
  background: linear-gradient(90deg, var(--sc-color-surface-muted) 25%, #ffffff 45%, var(--sc-color-surface-muted) 65%);
  background-size: 220% 100%;
  animation: sc-skeleton 1.4s ease-in-out infinite;
}

.sc-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@keyframes sc-skeleton { to { background-position: -220% 0; } }

@media (max-width: 640px) {
  .sc-container { width: min(var(--sc-container), calc(100% - 24px)); }
  .sc-section { padding-block: var(--sc-space-16); }
  .sc-button { width: 100%; }
  .sc-faq-item > summary { padding-inline: var(--sc-space-4); }
  .sc-faq-item > p { padding-inline: var(--sc-space-4); }
}

@media (prefers-reduced-motion: reduce) {
  .sc-card--interactive,
  .sc-button,
  .sc-input { transition: none; }
  .sc-skeleton { animation: none; }
}