/*
=========================================================
MACETA Y CORTAFRÍO
Design System v0.2
=========================================================
*/

:root{

/* =====================================================
   COLORES PRINCIPALES
===================================================== */

--color-primary:#1f2937;
--color-primary-light:#374151;

--color-secondary:#c59d2f;
--color-secondary-dark:#a88420;
--color-gold-text:#765b16;

--color-dark:#161513;
--color-dark-light:#232019;

--color-accent:#d97706;

--color-success:#15803d;
--color-warning:#d97706;
--color-danger:#dc2626;


/* =====================================================
   NEUTROS
===================================================== */

--white:#ffffff;
--black:#111827;

--gray-50:#f9fafb;
--gray-100:#f3f4f6;
--gray-200:#e5e7eb;
--gray-300:#d1d5db;
--gray-400:#9ca3af;
--gray-500:#6b7280;
--gray-600:#4b5563;
--gray-700:#374151;
--gray-800:#1f2937;
--gray-900:#111827;


/* =====================================================
   FONDOS
===================================================== */

--background:var(--white);

--surface:#fafafa;

--surface-dark:#f4f4f4;


/* =====================================================
   TEXTO
===================================================== */

--text-color:var(--gray-900);

--text-light:var(--gray-600);

--heading-color:var(--gray-900);


/* =====================================================
   TIPOGRAFÍA
===================================================== */

--font-primary:
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Helvetica,
Arial,
sans-serif;

/*
 * Serif de titulares (estilo editorial, como en el boceto).
 * Pendiente: alojar la fuente localmente en /assets/fonts/
 * (evitar Google Fonts por rendimiento y por el riesgo de
 * incumplimiento de RGPD al servir IPs a un tercero desde la UE).
 * Mientras tanto cae en una serif de sistema equivalente.
 */
--font-display:
"Playfair Display",
Georgia,
"Times New Roman",
serif;

--font-size-xs:.75rem;
--font-size-sm:.875rem;
--font-size-md:1rem;
--font-size-lg:1.125rem;
--font-size-xl:1.25rem;
--font-size-2xl:1.5rem;
--font-size-3xl:2rem;
--font-size-4xl:2.8rem;
--font-size-5xl:4rem;


/* =====================================================
   GROSOR
===================================================== */

--weight-regular:400;
--weight-medium:500;
--weight-semibold:600;
--weight-bold:700;


/* =====================================================
   CONTENEDORES
===================================================== */

--container-width:1320px;

--container-small:960px;


/* =====================================================
   ESPACIADOS
===================================================== */

--space-1:.25rem;
--space-2:.5rem;
--space-3:.75rem;
--space-4:1rem;
--space-5:1.5rem;
--space-6:2rem;
--space-7:3rem;
--space-8:4rem;
--space-9:5rem;
--space-10:6rem;


/* =====================================================
   BORDES
===================================================== */

--radius-sm:6px;
--radius-md:10px;
--radius-lg:18px;
--radius-xl:28px;
--radius-pill:999px;


/* =====================================================
   SOMBRAS
===================================================== */

--shadow-sm:

0 2px 8px rgba(0,0,0,.05);

--shadow-md:

0 10px 25px rgba(0,0,0,.08);

--shadow-lg:

0 20px 50px rgba(0,0,0,.12);


/* =====================================================
   TRANSICIONES
===================================================== */

--transition-fast:.2s ease;

--transition:.3s ease;

--transition-slow:.45s ease;


/* =====================================================
   HEADER
===================================================== */

--header-height:90px;


/* =====================================================
   Z-INDEX
===================================================== */

--z-header:1000;

--z-fixed:900;

--z-menu:1100;

--z-modal:2000;

}