@font-face {
  font-family: 'Open Huninn';
  src: url('../assets/fonts/jf-openhuninn-2.1.woff2') format('woff2');
  font-display: swap;
}

:root {
  /* Clay v2 color tokens from the approved pastel sky reference. */
  --clay-sky-top: #4FC3F1;
  --clay-sky-bottom: #C8EEFB;
  --clay-text-brown: #7C4A2D;
  --clay-capsule-cream: #FBF4E4;
  --clay-accent-red: #E2574C;
  --clay-card-pink: #F8D3DC;
  --clay-card-yellow: #F7E5AE;
  --clay-card-green: #D6ECC2;
  --clay-card-blue: #C2E2F4;
  --clay-card-purple: #DCD2F0;
  --clay-card-orange: #F5D6B0;

  /* Clay v2 typography. */
  --clay-font: 'Open Huninn', -apple-system, 'PingFang TC', system-ui, sans-serif;

  /* Clay v2 shape tokens. */
  --clay-radius-card: 36px;
  --clay-radius-card-large: 40px;
  --clay-radius-capsule: 999px;

  /* Clay v2 shadow tokens. */
  --clay-shadow-outer: 0 6px 16px rgba(122, 74, 45, .18);
  --clay-shadow-inner-top: inset 0 2px 4px rgba(255, 255, 255, .6);
  --clay-shadow-card: var(--clay-shadow-outer), var(--clay-shadow-inner-top);
  --clay-shadow-pressed: 0 3px 8px rgba(122, 74, 45, .14), var(--clay-shadow-inner-top);
  --clay-shadow-halo: 0 0 0 6px rgba(79, 195, 241, .22), var(--clay-shadow-card);

  /* Clay v2 motion tokens. */
  --clay-press-scale-min: .94;
  --clay-press-scale: .95;
  --clay-press-scale-max: .96;
  --clay-motion-squish-min: 120ms;
  --clay-motion-squish: 140ms;
  --clay-motion-squish-max: 160ms;
  --clay-motion-reduced-fade: 150ms;
}

.clay-text-emboss {
  color: var(--clay-text-brown);
  font-family: var(--clay-font);
  text-shadow:
    0 2px 0 var(--clay-capsule-cream),
    0 4px 0 rgba(122, 74, 45, .12),
    0 7px 12px rgba(122, 74, 45, .22),
    0 -1px 0 rgba(255, 255, 255, .7),
    1px 0 0 rgba(255, 255, 255, .45),
    -1px 0 0 rgba(122, 74, 45, .08);
}