/* LUXE PETS — design tokens
   One source of truth for colour, type, spacing, elevation and motion. */

:root {
  /* --- Brand palette ---------------------------------------------------- */
  --ink:            #1c1714;
  --ink-2:          #3c332c;
  --ink-3:          #6b5f55;
  --ink-4:          #9a8d81;

  --cream:          #fdfaf5;
  --sand:           #f5ede1;
  --sand-2:         #ebdfcd;
  --line:           #e3d7c5;
  --line-soft:      #efe6d8;

  --brass:          #b3822f;
  --brass-2:        #9a6e22;
  --brass-soft:     #f6ecd7;

  --forest:         #1f3d34;
  --forest-2:       #2d5849;
  --forest-soft:    #e7efe9;

  --blush:          #d99b86;
  --blush-soft:     #fbeae3;

  --good:           #2f7a55;
  --good-soft:      #e4f2ea;
  --warn:           #a9741a;
  --warn-soft:      #fbf0d9;
  --bad:            #a8382f;
  --bad-soft:       #fbe7e4;
  --info:           #2c5c86;
  --info-soft:      #e5eff8;

  /* --- Surfaces --------------------------------------------------------- */
  --bg:             var(--cream);
  --surface:        #ffffff;
  --surface-2:      var(--sand);
  --surface-3:      var(--sand-2);

  /* --- Type ------------------------------------------------------------- */
  --font-display: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', 'Hoefler Text', Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --fs-xs:   0.75rem;
  --fs-sm:   0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md:   1.0625rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  2rem;
  --fs-3xl:  2.75rem;
  --fs-4xl:  3.75rem;

  /* --- Space ------------------------------------------------------------ */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  /* --- Shape ------------------------------------------------------------ */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-pill: 999px;

  /* --- Elevation -------------------------------------------------------- */
  --sh-1: 0 1px 2px rgba(28, 23, 20, 0.05), 0 1px 3px rgba(28, 23, 20, 0.04);
  --sh-2: 0 2px 6px rgba(28, 23, 20, 0.06), 0 6px 16px rgba(28, 23, 20, 0.06);
  --sh-3: 0 8px 24px rgba(28, 23, 20, 0.09), 0 2px 8px rgba(28, 23, 20, 0.05);
  --sh-4: 0 18px 48px rgba(28, 23, 20, 0.14), 0 4px 12px rgba(28, 23, 20, 0.06);

  /* --- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 200ms;

  /* --- Layout ----------------------------------------------------------- */
  --wrap: 1200px;
  --wrap-narrow: 780px;
  --header-h: 68px;
}

@media (max-width: 900px) {
  :root {
    --fs-3xl: 2.125rem;
    --fs-4xl: 2.5rem;
    --header-h: 60px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}