:root {
  /* Quero1 — Candy Pink (rosa dominante) */
  --brand-pink: #f5b6d4;
  --brand-pink-deep: #e889ab;
  --brand-pink-dark: #c95687;
  --brand-rose: #d4568a;
  --brand-lavender: #e8a4c4;
  --brand-cream: #fffafb;
  --brand-purple: #c95687;
  --brand-blue: #ffd6e8;
  --brand-pink-light: #fde8f2;
  --brand-lavender-light: #fff0f6;
  --brand-plum: var(--brand-rose);
  --brand-plum-dark: #b84872;
  --brand-purple-light: #e889ab;

  /* Candy Pink surfaces */
  --pink-hero: #fce4ef;
  --pink-block: #f5b6d4;
  --pink-blush: #fff0f6;
  --pink-hot: #e878a8;
  --cta-gold: #e8a87c;
  --cta-gold-dark: #d4895a;
  --sparkle: #fff8e7;

  --bg: var(--brand-cream);
  --primary: var(--brand-rose);
  --coral: #f0a8b8;
  --honey: #f5e6d0;
  --mint: #ffd6e8;
  --lavender: var(--brand-lavender);
  --text: #6b3d52;
  --text-soft: #9a6078;
  --text-muted: var(--text-soft);
  --white: #fffefc;

  /* Koala — secundário */
  --koala-gray: #b8909e;
  --koala-gray-dark: #9a6078;
  --koala-belly: #fde8f2;
  --koala-ear: var(--brand-rose);
  --koala-blush: var(--brand-pink);
  --koala-guide-bg: linear-gradient(145deg, rgba(253, 232, 242, 0.98), rgba(255, 240, 246, 0.92));

  /* Category accents — tons de rosa */
  --cat-dolls: var(--brand-pink);
  --cat-planners: #f8c4d8;
  --cat-biblical: #f0b8d0;
  --cat-educational: #ffd6e8;
  --cat-stationery: #f5b6d4;
  --cat-custom: #fce0ec;
  --cat-kids: var(--brand-pink);
  --cat-christian: #f0b8d0;

  /* Legacy aliases */
  --rose: var(--brand-pink);
  --peach: #fce8f0;
  --sage: var(--cat-planners);
  --color-text: var(--text);
  --color-muted: var(--text-soft);
  --color-white: var(--white);
  --color-rosa: var(--brand-pink);
  --color-peach: var(--peach);
  --color-sage: var(--cat-planners);
  --color-lavender: var(--brand-lavender);
  --color-mint: var(--cat-planners);
  --color-azul: var(--brand-blue);

  /* Surfaces */
  --surface: rgba(255, 251, 253, 0.92);
  --surface-soft: rgba(255, 245, 249, 0.9);
  --border-soft: rgba(212, 86, 138, 0.16);
  --pattern-brand: url("/assets/icons/pattern-sparkle.svg");
  --gradient-bg: linear-gradient(180deg, #fffbfd 0%, #fff0f6 45%, #fce8f0 100%);
  --gradient-hero: radial-gradient(ellipse 85% 65% at 10% 5%, rgba(245, 182, 212, 0.55), transparent 55%),
    radial-gradient(ellipse 70% 55% at 92% 15%, rgba(232, 137, 171, 0.4), transparent 50%),
    radial-gradient(ellipse 60% 45% at 50% 95%, rgba(255, 214, 232, 0.45), transparent 55%);

  /* Typography */
  --font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-body: "Nunito", system-ui, -apple-system, sans-serif;
  --font-script: "Sacramento", "Parisienne", cursive;
  --font-accent: "Fredoka", var(--font-body);
  --font: var(--font-body);

  /* Radii */
  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-card: 28px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-soft: 0 4px 28px rgba(180, 72, 114, 0.08);
  --shadow-hover: 0 18px 52px rgba(180, 72, 114, 0.12);
  --shadow-sm: var(--shadow-soft);
  --shadow-md: var(--shadow-hover);
  --shadow-primary: 0 10px 32px rgba(212, 86, 138, 0.28);
  --shadow-glow-lavender: 0 0 48px rgba(245, 182, 212, 0.45);
  --shadow-glow-pink: var(--shadow-glow-lavender);
  --shadow-gold: 0 8px 28px rgba(232, 168, 124, 0.35);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 6rem;
  --space-section: clamp(4rem, 10vw, 7rem);

  --space-xs: var(--space-2);
  --space-sm: var(--space-4);
  --space-md: var(--space-5);
  --space-lg: var(--space-7);
  --space-xl: var(--space-9);

  /* Layout */
  --header-h: 5.75rem;
  --header-top-h: 2.25rem;
  --container-max: 76rem;
  --transition-base: 0.45s cubic-bezier(0.25, 0.1, 0.25, 1);

  /* Semantic status (storefront + admin) */
  --success: #2f9e6b;
  --warning: #d4895a;
  --danger: #c95687;
  --info: #7b8fd4;

  /* Admin shell (discreet Quero1 identity) */
  --admin-bg: #faf6f8;
  --admin-surface: var(--white);
  --admin-border: rgba(212, 86, 138, 0.14);
  --admin-text: var(--text);
  --admin-text-soft: var(--text-soft);
  --admin-sidebar-w: 16.5rem;
  --admin-primary: var(--brand-rose);
  --admin-primary-dark: var(--brand-plum-dark);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-base: 0.01ms;
  }
}

/* Storefront — Pink Grace / Blue Grace identity (admin keeps :root Candy Pink) */
body.storefront {
  --brand-pink: #ff6bab;
  --brand-pink-deep: #f2559a;
  --brand-pink-dark: #e0448a;
  --brand-rose: #ff6bab;
  --brand-lavender: #dccbff;
  --brand-cream: #fff7eb;
  --brand-purple: #6b2ca8;
  --brand-blue: #5bb3ff;
  --brand-pink-light: #ffe4f1;
  --brand-lavender-light: #f3ecff;
  --brand-plum: #6b2ca8;
  --brand-plum-dark: #4f1f7d;
  --brand-purple-light: #9b6ad4;

  --pink-hero: #ffe8f4;
  --pink-block: #ff6bab;
  --pink-blush: #fff0f7;
  --pink-hot: #ff6bab;
  --cta-gold: #ff6bab;
  --cta-gold-dark: #e0448a;
  --sparkle: #fff8e7;

  --bg: var(--brand-cream);
  --primary: var(--brand-purple);
  --coral: #ff9ec8;
  --honey: #fff0d6;
  --mint: #b7e8f7;
  --lavender: var(--brand-lavender);
  --text: #6b2ca8;
  --text-soft: #7a5a96;
  --text-muted: var(--text-soft);
  --white: #ffffff;

  --koala-gray: #9b8aad;
  --koala-gray-dark: #6b5a7e;
  --koala-belly: #fff7e8;
  --koala-ear: var(--brand-pink);
  --koala-blush: var(--brand-pink);
  --koala-guide-bg: linear-gradient(145deg, rgba(255, 247, 232, 0.98), rgba(220, 203, 255, 0.55));

  --cat-dolls: #ff6bab;
  --cat-planners: #dccbff;
  --cat-biblical: #5bb3ff;
  --cat-educational: #b7e8f7;
  --cat-stationery: #ff9ec8;
  --cat-custom: #ffe4f1;
  --cat-kids: #ff6bab;
  --cat-christian: #5bb3ff;

  --rose: var(--brand-pink);
  --peach: #ffe8f4;
  --sage: var(--cat-planners);
  --color-text: var(--text);
  --color-muted: var(--text-soft);
  --color-white: var(--white);
  --color-rosa: var(--brand-pink);
  --color-peach: var(--peach);
  --color-sage: var(--cat-planners);
  --color-lavender: var(--brand-lavender);
  --color-mint: var(--mint);
  --color-azul: var(--brand-blue);

  --surface: rgba(255, 255, 255, 0.96);
  --surface-soft: rgba(255, 247, 232, 0.94);
  --border-soft: rgba(107, 44, 168, 0.14);
  /* Soft sky → lavender → blush → cream (harmonious with hero) */
  --gradient-bg: linear-gradient(
    180deg,
    #d4eefc 0%,
    #e8d4f5 18%,
    #fce4ef 42%,
    #fff5eb 68%,
    #f5eefc 100%
  );
  --gradient-hero: radial-gradient(ellipse 85% 65% at 10% 5%, rgba(91, 179, 255, 0.22), transparent 55%),
    radial-gradient(ellipse 70% 55% at 92% 15%, rgba(255, 107, 171, 0.2), transparent 50%),
    radial-gradient(ellipse 60% 45% at 50% 95%, rgba(220, 203, 255, 0.28), transparent 55%);

  --font-display: "Fredoka", "Nunito", system-ui, sans-serif;
  --font-accent: "Fredoka", var(--font-body);

  --shadow-soft: 0 4px 28px rgba(107, 44, 168, 0.08);
  --shadow-hover: 0 18px 52px rgba(107, 44, 168, 0.12);
  --shadow-sm: var(--shadow-soft);
  --shadow-md: var(--shadow-hover);
  --shadow-primary: 0 10px 32px rgba(255, 107, 171, 0.32);
  --shadow-glow-lavender: 0 0 48px rgba(220, 203, 255, 0.45);
  --shadow-glow-pink: 0 0 48px rgba(255, 107, 171, 0.35);
  --shadow-gold: 0 8px 28px rgba(255, 107, 171, 0.35);

  --success: #2f9e6b;
  --warning: #d4895a;
  --danger: #e0448a;
  --info: #5bb3ff;

  background-color: var(--bg);
  background-image: var(--gradient-bg);
  color: var(--text);
}

/* Storefront paint — replace Candy Pink leftovers with brand palette */
body.storefront .announcement-bar {
  background: linear-gradient(90deg, #ff6bab, #5bb3ff);
  color: #fff;
  border-bottom: none;
}

body.storefront .announcement-bar a {
  color: #fff;
}

body.storefront .page-blobs::before {
  background: rgba(255, 107, 171, 0.28);
}

body.storefront .page-blobs::after {
  background: rgba(91, 179, 255, 0.22);
}

body.storefront .page-blobs__blue {
  background: rgba(220, 203, 255, 0.35);
}

body.storefront .glow-lavender::before {
  background: radial-gradient(circle, rgba(220, 203, 255, 0.5), transparent 65%);
}

body.storefront .glow-pink::before {
  background: radial-gradient(circle, rgba(255, 107, 171, 0.35), transparent 65%);
}

body.storefront .scrapbook-frame {
  border-color: rgba(107, 44, 168, 0.12);
  background: rgba(255, 255, 255, 0.92);
}

body.storefront .btn {
  background: var(--brand-pink);
  box-shadow: var(--shadow-primary);
}

body.storefront .btn:hover:not(:disabled) {
  background: var(--brand-pink-dark);
  box-shadow: 0 12px 32px rgba(255, 107, 171, 0.4);
}

body.storefront .btn--outline {
  background: var(--white);
  color: var(--brand-purple);
  border-color: var(--brand-pink);
}

body.storefront .btn--outline:hover:not(:disabled) {
  background: rgba(255, 107, 171, 0.1);
}

body.storefront .btn--ghost {
  color: var(--brand-purple);
}

body.storefront .btn--ghost:hover:not(:disabled) {
  background: rgba(220, 203, 255, 0.35);
}

body.storefront .card {
  background: var(--white);
  border-color: rgba(107, 44, 168, 0.1);
  box-shadow: var(--shadow-soft), 0 0 0 1px rgba(91, 179, 255, 0.08);
}

body.storefront .card__frame {
  background: linear-gradient(145deg, rgba(255, 228, 241, 0.9), rgba(183, 232, 247, 0.35));
}

body.storefront .card--gift .card__frame,
body.storefront .card--shopify .card__frame {
  background: linear-gradient(180deg, #ffe4f1, #e8f6ff);
}

body.storefront .card--gift .card__body,
body.storefront .card--gift .card__actions,
body.storefront .card--product .card__body,
body.storefront .card--shopify .card__body,
body.storefront .card--shopify .card__actions {
  background: var(--white);
}

body.storefront .card--product .card__badge,
body.storefront .card--gift .card__badge {
  background: rgba(255, 107, 171, 0.16);
  color: var(--brand-purple);
  border-color: transparent;
}

body.storefront .card__price,
body.storefront .card--gift .card__price,
body.storefront .card--shopify .card__price {
  color: var(--brand-pink);
}

body.storefront .site-footer {
  background: linear-gradient(180deg, #fff7e8 0%, #f3ecff 45%, #e8f6ff 100%);
  border-top: 1px solid rgba(107, 44, 168, 0.1);
}

body.storefront .site-nav a:hover,
body.storefront .site-nav a.is-active,
body.storefront .site-header__account {
  color: var(--brand-purple);
}

body.storefront .site-nav a::after {
  background: var(--brand-pink);
}

body.storefront .search-link:hover,
body.storefront .cart-link:hover {
  background: rgba(220, 203, 255, 0.4);
}

body.storefront .cart-badge {
  background: var(--brand-pink);
  color: #fff;
}