@import "tailwindcss";
@import "@heroui/styles";

/*
 * The Pet Loft Brand Theme — mapped to HeroUI CSS variables
 *
 * Primary Teal:  #38a99f (Brand) · #236f6b (Deep) · #8dd5d1 (Soft) · #e8f7f6 (Mist)
 * Accent Warm:   #f4a13a (Amber) · #fde8c8 (Cream)
 * Accent Coral:  #f2705a (Coral) · #fce0da (Blush)
 * Neutrals:      #1a2e2d (Forest) · #3d5554 (Moss) · #8aa9a8 (Sage) · #f0f8f7 (Ice)
 */

:root,
.light,
.default,
[data-theme="light"],
[data-theme="default"] {
  /* The Pet Loft brand palette — beyond HeroUI variables */
  --brand: #38a99f;
  --brand-dark: #236f6b;
  --brand-light: #8dd5d1;
  --brand-mist: #e8f7f6;
  --warm: #f4a13a;
  --warm-light: #fde8c8;
  --coral: #f2705a;
  --coral-light: #fce0da;
  --neutral-900: #1a2e2d;
  --neutral-700: #3d5554;
  --neutral-400: #8aa9a8;
  --neutral-100: #f0f8f7;

  /* Brand Teal #38a99f — primary actions, links, focus */
  --accent: oklch(66.96% 0.1009 186.67);
  --accent-foreground: oklch(100.00% 0 0);

  /* Ice White #f0f8f7 — page background */
  --background: oklch(97.28% 0.0086 188.66);

  /* Sage Mist #8aa9a8 — borders */
  --border: oklch(71.13% 0.0341 194.09);

  --danger: oklch(65.32% 0.2335 17.37);
  --danger-foreground: oklch(99.11% 0 0);

  /* Teal Mist #e8f7f6 — default/neutral chip & tag fills */
  --default: oklch(96.47% 0.0159 192.37);
  --default-foreground: oklch(28.38% 0.0260 191.82);

  /* White #ffffff — input backgrounds */
  --field-background: oklch(100.00% 0.0001 263.28);
  --field-foreground: oklch(28.38% 0.0260 191.82);
  /* Sage Mist #8aa9a8 — placeholders */
  --field-placeholder: oklch(71.13% 0.0341 194.09);

  /* Brand Teal — focus rings */
  --focus: oklch(66.96% 0.1009 186.67);

  /* Forest Black #1a2e2d — body text */
  --foreground: oklch(28.38% 0.0260 191.82);

  /* Moss Grey #3d5554 — muted/secondary text */
  --muted: oklch(42.97% 0.0292 192.97);

  /* White — overlays */
  --overlay: oklch(100.00% 0.0001 263.28);
  --overlay-foreground: oklch(28.38% 0.0260 191.82);

  --scrollbar: oklch(71.13% 0.0341 194.09);

  /* White — segmented controls */
  --segment: oklch(100.00% 0.0001 263.28);
  --segment-foreground: oklch(28.38% 0.0260 191.82);

  --separator: oklch(96.47% 0.0159 192.37);

  --success: oklch(73.29% 0.1941 142.44);
  --success-foreground: oklch(21.03% 0.0059 142.44);

  /* White — card surfaces */
  --surface: oklch(100.00% 0.0001 263.28);
  --surface-foreground: oklch(28.38% 0.0260 191.82);

  /* Teal Mist #e8f7f6 — secondary surfaces */
  --surface-secondary: oklch(96.47% 0.0159 192.37);
  --surface-secondary-foreground: oklch(28.38% 0.0260 191.82);

  /* Ice White #f0f8f7 — tertiary surfaces */
  --surface-tertiary: oklch(97.28% 0.0086 188.66);
  --surface-tertiary-foreground: oklch(28.38% 0.0260 191.82);

  --warning: oklch(78.19% 0.1590 63.96);
  --warning-foreground: oklch(21.03% 0.0059 63.96);

  --radius: 0.75rem;
  --field-radius: 0.75rem;

  /* Fonts: DM Sans (body) + Fraunces (headings) */
  --font-sans: var(--font-dm-sans);
  --font-serif: var(--font-fraunces);

  /* Design system: 8px grid (spatial system) */
  --spacing-1: 0.25rem;   /* 4px — tight */
  --spacing-2: 0.5rem;    /* 8px — base unit */
  --spacing-3: 0.75rem;   /* 12px — compact */
  --spacing-4: 1rem;      /* 16px — standard */
  --spacing-6: 1.5rem;    /* 24px — comfortable */
  --spacing-8: 2rem;      /* 32px — generous */
  --spacing-12: 3rem;     /* 48px — section spacing */
  --spacing-16: 4rem;     /* 64px — large sections */

  /* Design system: transition speeds */
  --transition-fast: 150ms;   /* color changes, small UI updates */
  --transition-base: 250ms;   /* standard interactions */
  --transition-slow: 350ms;   /* complex animations */
  --transition-bounce: 400ms; /* playful hover states */
  --transition-spring: 600ms; /* entrances/exits */

  /* Design system: breakpoints (use in media queries; values in px) */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

/*
 * Base layer — PetPaws branding + Design System (DESIGN_SYSTEM_DOCS.md, petpaws-branding).
 * Body: DM Sans (--font-sans), Forest Black text (--foreground), Ice White page bg (--background).
 * Borders: Sage Mist (--border). Headings use Fraunces via .font-serif / font-[family-name:var(--font-serif)].
 * Smooth scroll; 8px grid spacing via --spacing-*; transitions via --transition-*.
 */
@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    border-color: var(--color-border);
  }

  html {
    overflow-x: hidden;
    scroll-behavior: smooth;
    max-width: 100%;
  }

  body {
    background: var(--color-background);
    color: var(--color-foreground);
    font-family: var(--font-sans), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    max-width: 100%;
    overflow-x: hidden;
  }
}

/* Design system: carousel / marquee (use duration with var(--transition-spring) or var(--transition-base)) */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Continuous right-to-left marquee for utility bar */
.animate-marquee {
  animation: scroll 25s linear infinite;
}

/* Playful micro-animation (design system: bouncy hover feel) */
@keyframes sparkle {
  0%, 100% {
    opacity: 0.3;
    transform: translateY(0) scale(1);
  }
  50% {
    opacity: 0.8;
    transform: translateY(-10px) scale(1.2);
  }
}

/* Hide scrollbar for carousel / horizontal scroll areas */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}