/* ============================================================
   Club del Sole — Base layer
   Page defaults, accessible focus ring, keyframes.
   Components are inline-styled; these are the few genuinely
   global rules (pseudo-states + animations) they rely on.
   ============================================================ */

/* Warm page defaults */
body {
  font-family: var(--font-body);
  color: var(--color-text-body);
  background: var(--color-page);
  font-size: var(--type-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings use the rounded display face */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-text-heading);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
}

/* Visible focus — celeste ring, distinct from the gold CTA.
   Applies to every interactive control in the system. */
:where(button, a, input, select, textarea, [tabindex], [data-hierarchy], [role="tab"], [role="switch"]):focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Press state for buttons */
[data-hierarchy]:active:not(:disabled) {
  transform: translateY(1px);
}

/* Spinner */
@keyframes cds-spin { to { transform: rotate(360deg); } }

/* Gentle entrance used by cards/sections */
@keyframes cds-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}