/* =========================================================
   Spazio Vitale - Design Tokens
   Toda la identidad visual se controla desde aqui.
   Paleta derivada del logo: verde lima + verde profundo + lila.
   ========================================================= */

:root {
    /* ---- Colores de marca ---- */
    --color-primary: #6FB52C;          /* verde lima de la figura */
    --color-primary-dark: #4F8F1F;     /* verde profundo (hover, contraste) */
    --color-primary-light: #A6D922;    /* verde claro acento */
    --color-secondary: #C98FD6;        /* lila de los petalos */
    --color-secondary-dark: #A86BB8;
    --color-accent: #A6D922;           /* highlight / CTA secundario */

    /* ---- Superficies y fondo ---- */
    --color-bg: #FAFBF7;               /* fondo general, verde-blanco muy suave */
    --color-surface: #FFFFFF;          /* cards, paneles */
    --color-surface-alt: #F2F5EC;      /* secciones alternas */
    --color-border: #E3E7DC;

    /* ---- Texto ---- */
    --color-text: #1F2419;             /* texto principal */
    --color-text-muted: #6E7568;       /* texto secundario / tagline */
    --color-text-invert: #FFFFFF;

    /* ---- Estados ---- */
    --color-success: #4F8F1F;
    --color-warning: #E0A800;
    --color-danger: #D14343;
    --color-info: #3A86C8;

    /* ---- Tipografia ---- */
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --text-sm: 0.875rem;     /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg: 1.25rem;      /* 20px */
    --text-xl: 1.75rem;      /* 28px */
    --text-hero: 3rem;       /* 48px */

    /* ---- Espaciados ---- */
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 2rem;
    --space-xl: 4rem;

    /* ---- Radios y sombras ---- */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 24px;
    --shadow: 0 4px 16px rgba(31, 36, 25, 0.08);

    /* ---- Layout ---- */
    --container-max: 1140px;
}