/* Jack & Olive — shared brand foundations.
 *
 * Every page imported from the Claude Design canvas builds on this file:
 * the palette tokens, the global reset and the shared entrance animations.
 * Page-specific rules belong in their own stylesheet alongside it.
 * See CLAUDE.md for the artboard import recipe. */

:root {
  /* Navy — page base and the radial-gradient stops behind it */
  --jo-navy: #26334f;
  --jo-navy-light: #35456c;
  --jo-navy-mid: #2b3a5c;
  --jo-navy-deep: #223049;

  /* Ink and accents */
  --jo-cream: #f4ede2;
  --jo-blush: #e8bdb6;
  --jo-red: #a8443b;
  --jo-red-fade: rgba(168, 68, 59, 0); /* not `transparent`: that fades through grey */
  --jo-muted: #c5cbdb;
  --jo-border: #5c6a8c;

  /* Type */
  --jo-font-display: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  --jo-font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

html,
body {
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--jo-navy);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--jo-blush);
  text-decoration: none;
}

a:hover {
  color: var(--jo-cream);
}

@keyframes joRise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes joFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Honour a reduced-motion preference: show the final state immediately. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}