/* ==========================================================================
   Caelyro - Custom CSS
   Hand-written styles that go beyond Tailwind utilities: CSS variables for
   non-Tailwind contexts, reusable component classes, and micro-interactions.
   Keep this file small - prefer Tailwind utility classes in markup first.
   ========================================================================== */

:root {
  /* Brand palette - the only colors this project uses at scale. The
     Caelyro Premium Color System: near-black obsidian + warm champagne
     gold. Kept the token NAMES from the prior pink-brand pass so every
     existing var(--gold)/var(--gold-dark) call site repaints site-wide
     without touching each one. Mirrors src/input.css's @theme - keep both
     in sync if this ever changes again. */
  --black: #111214;
  --gold: #E0B76A;
  --gold-light: #F1D69A;
  --gold-dark: #C99A3D;
  --white: #FFFFFF;
  --offwhite: #FAF8F3;
  --charcoal: #171717;
  --charcoal-light: #6B6861;

  /* Muted functional colors - system feedback only (alerts/toasts/badges).
     Desaturated on purpose so they read as "quiet utility" rather than
     competing with gold as the brand's only accent. */
  --success: #557A62;
  --success-bg: #EEF3EE;
  --danger: #A84A45;
  --danger-bg: #F7EDEA;
  --warning: #B98A3D;
  --warning-bg: #F8F0DE;
  --info: #66758A;
  --info-bg: #EBEFF2;

  /* Motion */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Shape */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-full: 999px;

  /* Elevation */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-elevated: 0 20px 40px -20px rgba(0, 0, 0, 0.25);
  --shadow-gold-ring: 0 0 0 3px rgba(224, 183, 106, 0.25);

  /* Glass card system - the shared frosted-glass "frame" treatment applied
     to every card component site-wide (product/auth/admin/account/etc).
     Modeled on .offer-card, the coupon ticket: a soft, generously rounded
     frame with a dashed champagne-gold border and a warm glow underneath,
     over a translucent fill + backdrop-filter blur so it still reads as
     glass rather than a flat gold card. Mirrors the blur/saturate recipe
     already proven on .dropdown-menu / .modal (section 13-14 of
     components.css). */
  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-bg-strong: rgba(255, 255, 255, 0.8);
  --glass-bg-tint: rgba(255, 255, 255, 0.5);
  --glass-border: rgba(224, 183, 106, 0.45);
  --glass-radius: 1.1rem;
  --glass-blur: blur(20px) saturate(180%);
  --glass-blur-sm: blur(14px) saturate(160%);
  --shadow-glass: 0 1px 2px rgba(17, 18, 20, 0.04), 0 16px 40px -18px rgba(201, 154, 61, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --shadow-glass-hover: 0 1px 2px rgba(17, 18, 20, 0.05), 0 28px 56px -20px rgba(201, 154, 61, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* Layering */
  --z-dropdown: 40;
  --z-sticky-header: 50;
  --z-modal-overlay: 100;
  --z-modal: 101;
  --z-toast: 110;

  /* Secondary marketplace accent palette (purple/orange/green) - the site's
     own --gold/--black/--charcoal tokens above now carry the Caelyro
     Premium (obsidian + champagne gold) restyle everywhere (site-wide, not
     homepage-only - see --gold's comment). These --mh-* tokens fill in the
     rest of the palette (hero/flash-sale gradients, category pill colors,
     etc.) via .hero, .cat-pill, .flash-sale, .mh-grid and friends - see
     components.css sections 19-38. The former pink/purple pair is repointed
     to gold/obsidian so those gradients read as on-brand dark-to-gold
     rather than leftover pink; --mh-pink stays a *darker* gold (not the
     lighter --gold) since several rules still lay white text/icons over it
     - orange/green are untouched, low-risk warm/positive accents. */
  --mh-pink: #c99a3d;
  --mh-pink-dark: #a67c2e;
  --mh-pink-light: #f1d69a;
  --mh-purple: #1a1b1f;
  --mh-purple-dark: #111214;
  --mh-orange: #ff5722;
  --mh-orange-dark: #e64a19;
  --mh-green: #1a9d5c;
  --mh-green-bright: #22c55e;
  --mh-bg-tint: #fbf3e4;
}

/* Scrollbar - subtle, on-brand */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--offwhite);
}
::-webkit-scrollbar-thumb {
  background: var(--charcoal);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--gold);
}

::selection {
  background: var(--gold);
  color: var(--black);
}

/* Accessible keyboard focus ring, consistent across every interactive
   element site-wide. Only shows for keyboard users (:focus-visible),
   never on mouse click, so it never looks like a stray outline. */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------------------------------------------------------------------
   Reusable components (kept out of Tailwind @apply to avoid duplicate
   utility soup across many files - import this class instead).
   --------------------------------------------------------------------- */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 2rem;
  background: var(--black);
  color: var(--white);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid var(--black);
  transition: background var(--transition-base), color var(--transition-base), transform var(--transition-base);
}
.btn-primary:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--black);
  transform: translateY(-2px);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 2rem;
  background: transparent;
  color: var(--white);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid var(--white);
  transition: background var(--transition-base), color var(--transition-base), transform var(--transition-base);
}
.btn-outline:hover {
  background: var(--white);
  color: var(--black);
  transform: translateY(-2px);
}

.link-underline {
  position: relative;
}
.link-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width var(--transition-base);
}
.link-underline:hover::after {
  width: 100%;
}

.hover-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.25);
}

.fade-in-up {
  animation: fadeInUp 0.7s ease forwards;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Simple skeleton shimmer for future async content (products, orders, etc.) */
.skeleton {
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
}
@keyframes shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}