/* ============================================
   Mom Maker — WordPress Theme Design Tokens
   Paleta Armónica: Verdes Bosque & Cafés Tierra
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── Neutral Earth (Tonos Tierra y Cafés Orgánicos) ── */
  --p-50:  #fcfaf6; /* Crema Orgánico Claro / Fondo Principal */
  --p-100: #f4eee3; /* Arena Suave */
  --p-200: #e7dac9;
  --p-300: #d5c3af;
  --p-400: #bfab96;
  --p-500: #a58e78;
  --p-600: #8a725d;
  --p-700: #6e5743; /* Café Cuero Profundo */
  --p-800: #513e2e;
  --p-900: #33251a; /* Carbón Orgánico */
  --p-950: #1b120c;

  /* ── Accent Greens (Verdes Orgánicos en Armonía y Consistencia) ── */
  --a-50:  #f4f7f4; /* Verde Menta Pálido */
  --a-100: #e4ece4; /* Verde Claro para Badges */
  --a-200: #cadbc9;
  --a-300: #a7c1a6;
  --a-400: #7da07c; /* Verde Musgo Medio */
  --a-500: #5d825c;
  --a-600: #466745; /* Verde Bosque / Acento Primario */
  --a-700: #375136; /* Verde Pino Oscuro */
  --a-800: #2b3d2b;
  --a-900: #1f2a1e;

  /* ── Impact Highlights ── */
  --accent-terracotta: #b55e45; /* Terracota para contraste social */
  --accent-terracotta-light: rgba(181, 94, 69, 0.08);

  /* ── Derived Tokens ── */
  --bg-primary: var(--p-50);
  --bg-secondary: var(--p-100);
  --bg-tertiary: var(--p-200);
  --bg-card: #ffffff;
  --bg-card-hover: var(--p-50);
  --bg-glass: rgba(252, 250, 246, 0.90);
  --bg-dark-glass: rgba(27, 18, 12, 0.94);
  --bg-overlay: rgba(27, 18, 12, 0.60);
  --bg-input: #ffffff;

  /* Text colors */
  --text-primary: var(--p-900);
  --text-secondary: var(--p-700);
  --text-tertiary: var(--p-500);
  --text-inverse: #ffffff;

  /* Brand Accent Map (Verde Armónico) */
  --accent: var(--a-600);
  --accent-light: var(--a-400);
  --accent-dark: var(--a-700);
  --accent-deep: var(--a-800);
  --accent-bg: var(--a-100);
  --accent-success: #3c6e57;
  --accent-error: #b94a4a;

  /* Gradients */
  --gradient-hero: linear-gradient(135deg, #1b261b 0%, #141d14 50%, #0c120c 100%);
  --gradient-accent: linear-gradient(135deg, var(--a-700) 0%, var(--a-600) 100%);
  --gradient-card: linear-gradient(145deg, #ffffff 0%, var(--p-50) 100%);
  --gradient-text: linear-gradient(135deg, var(--a-700) 0%, var(--a-600) 50%, var(--a-800) 100%);
  --gradient-cta: linear-gradient(135deg, var(--a-800) 0%, var(--a-700) 100%);
  --gradient-footer: linear-gradient(180deg, #141d14 0%, #090d09 100%);

  /* Borders */
  --border: rgba(27, 18, 12, 0.08);
  --border-hover: var(--a-300);
  --border-active: var(--a-600);
  --border-input: var(--p-300);
  --border-input-focus: var(--a-600);

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(27, 18, 12, 0.02), 0 1px 2px rgba(27, 18, 12, 0.01);
  --shadow-md: 0 4px 14px rgba(27, 18, 12, 0.03);
  --shadow-lg: 0 10px 30px rgba(27, 18, 12, 0.04);
  --shadow-xl: 0 20px 50px rgba(27, 18, 12, 0.06);
  --shadow-glow: 0 4px 20px rgba(70, 103, 69, 0.08);

  /* Typography */
  --font-heading: 'Playfair Display', serif;
  --font-subheading: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --fs-display: clamp(3.2rem, 7vw, 5.5rem);
  --fs-h1: clamp(2.4rem, 5.5vw, 4.2rem);
  --fs-h2: clamp(1.8rem, 4vw, 2.8rem);
  --fs-h3: clamp(1.3rem, 2.8vw, 1.8rem);
  --fs-h4: clamp(1.1rem, 2vw, 1.35rem);
  --fs-body: 1rem;
  --fs-body-lg: 1.125rem;
  --fs-small: 0.875rem;
  --fs-caption: 0.75rem;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --lh-tight: 1.15;
  --lh-heading: 1.25;
  --lh-body: 1.7;
  --lh-relaxed: 1.9;

  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.05em;
  --ls-wider: 0.1em;

  /* Spacing (Fluid Scale) */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6.5rem;
  --space-section: clamp(4.5rem, 12vw, 9rem);

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 840px;
  --container-wide: 1440px;
  --container-padding: clamp(1.2rem, 5vw, 3rem);
  --navbar-height: 90px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 200ms;
  --dur-normal: 350ms;
  --dur-slow: 600ms;

  /* Z-index */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 500;
  --z-navbar: 1000;
  --z-toast: 1100;

  /* Glass */
  --glass-blur: blur(25px);
}