/*
Theme Name: Donna Maromba
Theme URI: https://donnamaromba.com.br
Author: Donna Maromba Dev Team
Author URI: https://donnamaromba.com.br
Description: Tema premium customizado para a loja Donna Maromba. Design Soft Brutalism / Neo-Modern Ethereal Rebel com Tailwind CSS e integração WooCommerce + Mercado Pago.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: donna-maromba
Tags: e-commerce, woocommerce, tailwind, fitness, custom-colors, custom-logo

Donna Maromba — Moda Fitness com Estilo e Conforto 🇧🇷
*/

/* ========================================
   CSS Custom Properties (Design Tokens - Neo-Modern)
   ======================================== */
:root {
  /* Brand Colors */
  --dm-purple: #b60059;
  --dm-purple-light: #e30071;
  --dm-purple-dark: #b3006a;
  --dm-pink: #de1c71;
  --dm-pink-light: #ffb0cd;
  --dm-pink-pastel: #fff0f3;     /* Feature cards (dashboard, waiting) */

  --dm-dark: #27171d;
  --dm-darker: #1a1c1c;
  --dm-surface: #fff8f8;
  --dm-surface-elevated: #ffffff;
  --dm-surface-rose: #ffe8ee;    /* Secondary card bg (activity)       */
  --dm-border: #e3bdc8;
  --dm-border-hover: rgba(182, 0, 89, 0.4);

  /* Text */
  --dm-text-primary: #1a1c1c;
  --dm-text-secondary: #6b5e63;
  --dm-text-muted: #8e6e79;

  /* Semantic */
  --dm-success: #0a8754;
  --dm-info: #3b82f6;
  --dm-error: #ef4444;
  --dm-whatsapp: #25d366;

  /* Gradients */
  --dm-gradient-primary: linear-gradient(135deg, #b60059, #e30071);
  --dm-gradient-dark: linear-gradient(180deg, #27171d, #1a1c1c);
  --dm-gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5));

  /* Shadows */
  --dm-shadow-glow: 0 0 20px rgba(182, 0, 89, 0.15);
  --dm-shadow-cta: 0 8px 25px rgba(182, 0, 89, 0.25);
  --dm-shadow-cta-hover: 0 12px 35px rgba(182, 0, 89, 0.35);
  --dm-shadow-card: 0 8px 32px rgba(39, 23, 29, 0.05);
  --dm-shadow-card-hover: 0 12px 48px rgba(182, 0, 89, 0.15);
  --dm-shadow-dark-card: 0 20px 50px rgba(182, 0, 89, 0.30);

  /* Typography */
  --dm-font-display: 'Epilogue', 'Inter', sans-serif;
  --dm-font-body: 'Plus Jakarta Sans', 'Inter', sans-serif;

  /* Type Scale (base 14px) */
  --dm-text-xs: 0.75rem;
  --dm-text-sm: 0.875rem;
  --dm-text-base: 1rem;
  --dm-text-lg: 1.125rem;
  --dm-text-xl: 1.25rem;
  --dm-text-2xl: 1.5rem;
  --dm-text-3xl: 1.875rem;
  --dm-text-4xl: 2.25rem;
  --dm-text-5xl: 3rem;
  --dm-text-6xl: 3.75rem;
  --dm-text-7xl: 4.5rem;

  /* Tracking */
  --dm-tracking-tight: -0.03em;
  --dm-tracking-tighter: -0.04em;
  --dm-tracking-wide: 0.05em;
  --dm-tracking-widest: 0.2em;
  --dm-tracking-mega: 0.3em;

  /* Radii */
  --dm-radius-sm: 0.5rem;
  --dm-radius-md: 1rem;
  --dm-radius-lg: 1.5rem;
  --dm-radius-xl: 2rem;
  --dm-radius-2xl: 2.5rem;
  --dm-radius-3xl: 3rem;
  --dm-radius-full: 9999px;

  /* Spacing */
  --dm-space-1: 0.25rem;
  --dm-space-2: 0.5rem;
  --dm-space-3: 0.75rem;
  --dm-space-4: 1rem;
  --dm-space-6: 1.5rem;
  --dm-space-8: 2rem;
  --dm-space-12: 3rem;
  --dm-space-16: 4rem;
  --dm-space-24: 6rem;

  /* Transitions */
  --dm-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dm-transition-fast: 150ms var(--dm-ease);
  --dm-transition-base: 300ms var(--dm-ease);
  --dm-transition-slow: 500ms var(--dm-ease);
}

/* ========================================
   Reset & Base
   ======================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 87.5%; /* 14px base — escala todos os valores rem do Tailwind em ~12.5% */
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--dm-font-body);
  background-color: var(--dm-surface);
  color: var(--dm-text-primary);
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--dm-font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dm-transition-fast);
}

a:hover {
  color: var(--dm-purple);
}

/* ========================================
   Utility: Glassmorphism (Light Mode)
   ======================================== */
.dm-glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: none;
}

.dm-glass-dark {
  background: rgba(26, 28, 28, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: none;
}

/* ========================================
   Utility: Glow Effects
   ======================================== */
.dm-glow {
  box-shadow: var(--dm-shadow-glow);
}

.dm-gradient-text {
  background: var(--dm-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ========================================
   Utility: Buttons
   ======================================== */
.dm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 32px;
  font-family: var(--dm-font-body);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  border: none;
  border-radius: var(--dm-radius-lg);
  cursor: pointer;
  transition: all var(--dm-transition-base);
  text-transform: uppercase;
}

.dm-btn-primary {
  background: var(--dm-purple);
  color: #fff;
  box-shadow: 0 4px 15px rgba(182, 0, 89, 0.2);
}

.dm-btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  background: var(--dm-purple-light);
  box-shadow: 0 8px 25px rgba(182, 0, 89, 0.3);
}

.dm-btn-secondary {
  background: transparent;
  color: var(--dm-text-primary);
  border: none;
  /* Ghost border using background */
  background: var(--dm-surface-elevated);
}

.dm-btn-secondary:hover {
  background: rgba(182, 0, 89, 0.05);
}

.dm-btn-cart {
  background: var(--dm-surface-elevated);
  color: var(--dm-text-primary);
  padding: 10px 24px;
  font-size: 0.8rem;
}

.dm-btn-cart:hover {
  background: var(--dm-purple);
  color: #fff;
}

/* ========================================
   Utility: Cards (Soft Brutalism)
   ======================================== */
.dm-card {
  background: var(--dm-surface-elevated);
  border: none;
  border-radius: var(--dm-radius-3xl);
  overflow: hidden;
  box-shadow: var(--dm-shadow-card);
  transition: all var(--dm-transition-base);
}

.dm-card:hover {
  box-shadow: var(--dm-shadow-card-hover);
  transform: translateY(-4px);
}

/* ========================================
   Animations
   ======================================== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.dm-animate-in {
  animation: fadeInUp 0.6s ease-out forwards;
  opacity: 0;
}

/* ========================================
   Scrollbar
   ======================================== */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--dm-surface);
}
::-webkit-scrollbar-thumb {
  background: var(--dm-border);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--dm-purple);
}

/* ========================================
   WooCommerce Overrides
   ======================================== */
.woocommerce-message,
.woocommerce-info {
  background: var(--dm-surface-elevated) !important;
  border-top-color: var(--dm-purple) !important;
  color: var(--dm-text-primary) !important;
  box-shadow: var(--dm-shadow-card);
  border-radius: var(--dm-radius-md);
}

.woocommerce-error {
  background: #fff0f0 !important;
  border-top-color: #ef4444 !important;
  color: var(--dm-text-primary) !important;
}

.woocommerce .quantity .qty {
  background: transparent;
  color: var(--dm-text-primary);
  border: none;
  border-bottom: 2px solid var(--dm-border);
  border-radius: 0;
  padding: 8px 12px;
}
.woocommerce .quantity .qty:focus {
  border-bottom-color: var(--dm-purple);
  outline: none;
}

/* ================================================================
   Semantic Typography Utilities — Design System v2.0
   Matches the canonical tokens in the Donna Maromba Design System.
   Use these classes alongside Tailwind for consistent typography.
   ================================================================ */

.dm-display,
.dm-h1,
.dm-h2,
.dm-h3,
.dm-h4 {
  font-family: var(--dm-font-display);
  font-weight: 900;
  letter-spacing: var(--dm-tracking-tight);
  color: var(--dm-darker);
  line-height: 0.95;
}

.dm-display { font-size: var(--dm-text-7xl); line-height: 0.88; }
.dm-h1      { font-size: var(--dm-text-5xl); line-height: 1.05; }
.dm-h2      { font-size: var(--dm-text-4xl); line-height: 1.1; }
.dm-h3      { font-size: var(--dm-text-2xl); line-height: 1.2; }
.dm-h4      { font-size: var(--dm-text-xl);  font-weight: 800; }

.dm-italic       { font-style: italic; font-weight: 900; }
.dm-italic-light { font-style: italic; font-weight: 300; letter-spacing: normal; }

.dm-body {
  font-family: var(--dm-font-body);
  font-size: var(--dm-text-base);
  color: var(--dm-text-secondary);
  font-weight: 500;
  line-height: 1.6;
}
.dm-body-lg {
  font-family: var(--dm-font-body);
  font-size: var(--dm-text-lg);
  color: var(--dm-text-secondary);
  font-weight: 500;
  line-height: 1.6;
}

/* Micro-label — uppercase magenta eyebrow */
.dm-eyebrow {
  font-family: var(--dm-font-body);
  font-size: var(--dm-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--dm-tracking-widest);
  color: var(--dm-purple);
}
.dm-eyebrow-mega {
  font-family: var(--dm-font-body);
  font-size: var(--dm-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--dm-tracking-mega);
  color: var(--dm-purple);
}

/* Form label / micro-caps label — muted secondary */
.dm-label {
  font-family: var(--dm-font-body);
  font-size: 0.625rem;           /* 10px at 87.5% base */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--dm-tracking-widest);
  color: var(--dm-text-secondary);
}