/**
 * NANO ANTI AGE — DESIGN TOKENS
 * Metodología: /frontend-design & /frontend-ui-engineering
 * Basado estrictamente en FRONTEND_DESIGN.md
 */

:root {
  /* ==========================================================================
     1. PALETA CROMÁTICA SEMÁNTICA (WCAG 2.1 AA COMPLIANT)
     ========================================================================== */
  
  /* Fondos y Superficies */
  --color-bg-base: #FFFFFF;
  --color-bg-subtle: #F8FAFC;      /* Slate 50 - alternancia visual limpia */
  --color-bg-card: #FFFFFF;
  --color-bg-card-subtle: #F1F5F9; /* Slate 100 - tarjetas de contraste neutral */
  --color-bg-dark: #0B1727;        /* Azul Prusia Obsidiana - TopBar y Footer */
  --color-bg-highlight: #FDF2F4;   /* Açai Berry 50 - Luz frutal sutil */

  /* Bordes y Líneas */
  --color-border-default: #E2E8F0; /* Slate 200 - líneas finas de 1px */
  --color-border-subtle: #F1F5F9;
  --color-border-accent: #FBCFE8;  /* Pink 200 - realces sutiles de producto */
  --color-border-dark: #1E293B;

  /* Acentos de Marca */
  --color-primary: #A21D4C;        /* Açai Berry Primario (Contraste 5.2:1 vs blanco) */
  --color-primary-hover: #881337;  /* Açai Berry Intenso */
  --color-primary-active: #701A35;
  --color-primary-light: #FCE7F3;

  /* Autoridad y Tipografía */
  --color-authority: #0B1727;      /* Azul Prusia Obsidiana (H1, H2, Tablas) */
  --color-text-main: #0B1727;      /* Contraste 16.8:1 sobre blanco */
  --color-text-body: #1E293B;      /* Slate 800 - Contraste 12.6:1 */
  --color-text-muted: #475569;     /* Slate 600 - Contraste 6.5:1 */
  --color-text-light: #94A3B8;

  /* Micro-Acentos Biotecnológicos y Regulatorios */
  --color-tech: #0284C7;           /* Sky 600 - Agua GRANDER y nano-hidrólisis */
  --color-tech-bg: #F0F9FF;        /* Sky 50 */
  --color-success: #15803D;        /* Green 700 - SENASAG y Checks de pureza */
  --color-success-bg: #F0FDF4;     /* Green 50 */
  --color-warning: #D97706;        /* Amber 600 - Alertas objetivas */
  --color-warning-bg: #FFFBEB;

  /* ==========================================================================
     2. SISTEMA TIPOGRÁFICO
     ========================================================================== */
  
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'Plus Jakarta Sans', monospace;

  /* Escala Móvil por defecto (Viewport < 768px) */
  --text-h1: 1.625rem;       /* 26px */
  --line-h1: 1.18;
  --tracking-h1: -0.025em;

  --text-h2: 1.375rem;       /* 22px */
  --line-h2: 1.25;
  --tracking-h2: -0.02em;

  --text-h3: 1.125rem;       /* 18px */
  --line-h3: 1.35;
  --tracking-h3: -0.01em;

  --text-h4: 1.000rem;       /* 16px */
  --line-h4: 1.4;

  --text-body-lg: 1.000rem;  /* 16px */
  --line-body-lg: 1.6;

  --text-body-base: 0.9375rem; /* 15px */
  --line-body-base: 1.6;

  --text-body-sm: 0.8125rem; /* 13px */
  --line-body-sm: 1.5;

  --text-micro: 0.6875rem;   /* 11px */
  --tracking-micro: 0.05em;

  /* ==========================================================================
     3. ESCALA DE ESPACIADO MODULAR (BASE 4px / 8px)
     ========================================================================== */
  
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.50rem;   /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1.00rem;   /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.50rem;   /* 24px */
  --space-8: 2.00rem;   /* 32px */
  --space-10: 2.50rem;  /* 40px */
  --space-12: 3.00rem;  /* 48px */
  --space-16: 4.00rem;  /* 64px */
  --space-20: 5.00rem;  /* 80px */

  /* ==========================================================================
     4. RADIOS DE ESQUINA (CALIBRADOS - SIN BORDES INFANTILES)
     ========================================================================== */
  
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;     /* Micro-badges, chips */
  --radius-lg: 12px;    /* Tarjetas principales y botones */
  --radius-xl: 16px;    /* Contenedores de oferta */
  --radius-full: 9999px;/* Botones píldora */

  /* ==========================================================================
     5. SOMBRAS VOLUMÉTRICAS CLÍNICAS (SIN SOMBRAS NEGRAS PESADAS)
     ========================================================================== */
  
  --shadow-subtle: 0 1px 2px 0 rgba(11, 23, 39, 0.04);
  --shadow-card: 0 1px 3px 0 rgba(11, 23, 39, 0.05), 0 1px 2px -1px rgba(11, 23, 39, 0.05);
  --shadow-card-elevated: 0 10px 25px -5px rgba(162, 29, 76, 0.06), 0 8px 10px -6px rgba(11, 23, 39, 0.03);
  --shadow-cta: 0 4px 14px 0 rgba(162, 29, 76, 0.28);
  --shadow-sticky: 0 -4px 16px 0 rgba(11, 23, 39, 0.06);

  /* ==========================================================================
     6. TRANSICIONES Y MOVIMIENTO INTENCIONAL
     ========================================================================== */
  
  --transition-fast: 120ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-base: 200ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   ESCALA DE ESCRITORIO (VIEWPORT ≥ 1024px)
   ========================================================================== */
@media (min-width: 1024px) {
  :root {
    --text-h1: 2.75rem;       /* 44px */
    --line-h1: 1.15;

    --text-h2: 2.000rem;      /* 32px */
    --line-h2: 1.25;

    --text-h3: 1.375rem;      /* 22px */
    --line-h3: 1.35;

    --text-h4: 1.125rem;      /* 18px */
    --line-h4: 1.4;

    --text-body-lg: 1.125rem; /* 18px */
    --line-body-lg: 1.65;

    --text-body-base: 1.000rem; /* 16px */
    --line-body-base: 1.65;

    --text-body-sm: 0.875rem; /* 14px */
    --line-body-sm: 1.55;

    --text-micro: 0.75rem;    /* 12px */
  }
}