/* Joy Nest design tokens v1 */

/* Self-hosted fonts (latin subsets, from Google Fonts) — no third-party requests */
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/Fredoka-500-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/Fredoka-600-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/Fredoka-700-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/fonts/NunitoSans-400-latin.woff2") format("woff2");
}

:root {
  --jn-color-cream: #FEFBF3;
  --jn-color-white: #FFFFFF;
  --jn-color-coral: #F3584D;
  --jn-color-green: #517135;
  --jn-color-green-accent: #678B33;
  --jn-color-gold: #F8B120;
  --jn-color-brown: #984F25;
  --jn-color-brown-dark: #31180B;
  --jn-color-blue: #35799E;
  --jn-color-sage: #B7C5A1;
  --jn-color-sand: #E6D0AD;

  --jn-text-primary: var(--jn-color-brown-dark);
  --jn-text-secondary: #6D5A4C;
  --jn-surface-base: var(--jn-color-cream);
  --jn-surface-elevated: var(--jn-color-white);
  --jn-border-default: var(--jn-color-sand);
  --jn-action-primary: var(--jn-color-green);
  --jn-focus: var(--jn-color-blue);

  --jn-font-display: "Fredoka", "Nunito Sans", system-ui, sans-serif;
  --jn-font-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --jn-space-1: 4px; --jn-space-2: 8px; --jn-space-3: 12px; --jn-space-4: 16px;
  --jn-space-6: 24px; --jn-space-8: 32px; --jn-space-12: 48px; --jn-space-16: 64px;
  --jn-radius-sm: 8px; --jn-radius-md: 12px; --jn-radius-lg: 20px; --jn-radius-xl: 28px; --jn-radius-pill: 999px;
  --jn-shadow-sm: 0 2px 8px #31180B14;
  --jn-shadow-md: 0 8px 24px -4px #31180B1F;
  --jn-shadow-lg: 0 16px 40px -8px #31180B24;
  --jn-motion-fast: 120ms; --jn-motion-standard: 200ms; --jn-motion-slow: 320ms;
}

.jn-button-primary {
  min-height: 48px; padding: 0 24px; border: 0; border-radius: var(--jn-radius-pill);
  background: var(--jn-action-primary); color: var(--jn-color-cream); font: 700 16px/1 var(--jn-font-body);
}
.jn-button-accent { background: var(--jn-color-coral); color: var(--jn-color-brown-dark); }
.jn-focusable:focus-visible { outline: 3px solid var(--jn-focus); outline-offset: 3px; }