/*
Theme Name:   Marien Del Canto — Child
Theme URI:    https://mariendelcanto.com/
Description:  Tema hijo para el portfolio artístico de Marien Del Canto Fernández.
              Basado en Kadence. Fotografía, escritura y tienda.
Author:       Marien Del Canto Fernández
Template:     kadence
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  marien-child
Tags:         portfolio, photography, woocommerce, literary
*/

/* =============================================================
   VARIABLES CSS — Paleta "Atardecer Artístico"
   ============================================================= */
:root {
    /* Colores */
    --color-bg:          #F8F5F0;
    --color-surface:     #FFFFFF;
    --color-primary:     #1C1C2E;
    --color-secondary:   #2D4A6E;
    --color-accent:      #C9A96E;
    --color-accent-alt:  #8B5E52;
    --color-text:        #1C1C2E;
    --color-text-muted:  #6B7280;
    --color-border:      #E5E0D8;

    /* Tipografía */
    --font-heading:  'Cormorant Garamond', Georgia, serif;
    --font-body:     'Inter', system-ui, sans-serif;
    --font-literary: 'Playfair Display', Georgia, serif;

    --font-size-xs:   0.75rem;   /* 12px */
    --font-size-sm:   0.875rem;  /* 14px */
    --font-size-base: 1rem;      /* 16px */
    --font-size-lg:   1.125rem;  /* 18px */
    --font-size-xl:   1.25rem;   /* 20px */
    --font-size-2xl:  1.5rem;    /* 24px */
    --font-size-3xl:  1.875rem;  /* 30px */
    --font-size-4xl:  2.25rem;   /* 36px */
    --font-size-5xl:  3rem;      /* 48px */
    --font-size-6xl:  3.75rem;   /* 60px */

    /* Espaciado */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* Layout */
    --container-max:    1280px;
    --container-narrow: 768px;
    --container-wide:   1440px;

    /* Bordes */
    --radius-sm:  0.25rem;
    --radius-md:  0.5rem;
    --radius-lg:  1rem;
    --radius-full: 9999px;

    /* Sombras */
    --shadow-sm:  0 1px 2px 0 rgba(28, 28, 46, 0.05);
    --shadow-md:  0 4px 6px -1px rgba(28, 28, 46, 0.1), 0 2px 4px -1px rgba(28, 28, 46, 0.06);
    --shadow-lg:  0 10px 15px -3px rgba(28, 28, 46, 0.1), 0 4px 6px -2px rgba(28, 28, 46, 0.05);
    --shadow-xl:  0 20px 25px -5px rgba(28, 28, 46, 0.1), 0 10px 10px -5px rgba(28, 28, 46, 0.04);

    /* Transiciones */
    --transition-fast:   0.15s ease;
    --transition-base:   0.25s ease;
    --transition-slow:   0.4s ease;

    /* Z-index */
    --z-below:   -1;
    --z-base:     0;
    --z-above:    10;
    --z-nav:      100;
    --z-overlay:  200;
    --z-modal:    300;

    /* =============================================================
       TOKENS SEMÁNTICOS — referencian la paleta base
       Cambiar un token aquí propaga el cambio a todos los componentes
       ============================================================= */

    /* Header */
    --color-header-bg:          var(--color-surface);
    --color-header-home-bg:     var(--color-primary);        /* home: fondo oscuro */
    --color-header-border:      var(--color-border);
    --color-header-text:        var(--color-primary);
    --color-header-text-inv:    var(--color-surface);        /* sobre fondo oscuro */

    /* Footer */
    --color-footer-bg:          var(--color-primary);
    --color-footer-text:        rgba(248, 245, 240, 0.80);
    --color-footer-text-muted:  rgba(248, 245, 240, 0.50);
    --color-footer-border:      rgba(255, 255, 255, 0.12);

    /* Secciones */
    --color-section-light:      var(--color-bg);
    --color-section-alt:        #EDE8E0;                     /* escritura / beige suave */
    --color-section-dark:       var(--color-primary);        /* hero, tienda, footer */
    --color-section-dark-alt:   #232336;                     /* variante ligeramente más clara */

    /* Interacción */
    --color-link:               var(--color-secondary);
    --color-link-hover:         var(--color-accent);
    --color-focus-ring:         var(--color-accent);
    --color-selection-bg:       rgba(201, 169, 110, 0.25);
    --color-selection-text:     var(--color-primary);

    /* Botones — primario (dorado) */
    --btn-primary-bg:           var(--color-accent);
    --btn-primary-text:         var(--color-primary);
    --btn-primary-hover-bg:     #B89A5F;
    --btn-primary-shadow:       0 4px 14px rgba(201, 169, 110, 0.35);

    /* Botones — ghost sobre fondo claro */
    --btn-ghost-border:         var(--color-border);
    --btn-ghost-text:           var(--color-text);
    --btn-ghost-hover-bg:       rgba(28, 28, 46, 0.06);

    /* Botones — ghost sobre fondo oscuro */
    --btn-ghost-inv-border:     rgba(255, 255, 255, 0.55);
    --btn-ghost-inv-text:       var(--color-surface);
    --btn-ghost-inv-hover-bg:   rgba(255, 255, 255, 0.12);

    /* Formularios */
    --color-input-bg:           var(--color-surface);
    --color-input-border:       var(--color-border);
    --color-input-border-focus: var(--color-accent);
    --color-input-text:         var(--color-text);
    --color-placeholder:        var(--color-text-muted);

    /* Estados */
    --color-error:              #C0392B;
    --color-error-light:        #FDECEA;
    --color-success:            #27AE60;
    --color-success-light:      #E8F5E9;
    --color-warning:            #E67E22;
    --color-info:               var(--color-secondary);

    /* Overlays (para usar sobre imágenes) */
    --overlay-dark-sm:          rgba(28, 28, 46, 0.35);
    --overlay-dark-md:          rgba(28, 28, 46, 0.60);
    --overlay-dark-lg:          rgba(28, 28, 46, 0.82);
    --overlay-accent:           rgba(201, 169, 110, 0.18);   /* dorado suave */

    /* =============================================================
       OVERRIDE KADENCE GLOBALS
       Kadence usa estas variables en su CSS inline; al redefinirlas
       aquí (nuestro stylesheet carga después) las sobreescribimos.
       ============================================================= */
    --global-body-font-family:       'Inter', system-ui, sans-serif;
    --global-heading-font-family:    'Cormorant Garamond', Georgia, serif;
    --global-primary-nav-font-family:'Cormorant Garamond', Georgia, serif;
    --global-palette8:               #F8F5F0;   /* body background */
    --global-palette3:               #1C1C2E;   /* heading color principal */
    --global-palette4:               #1C1C2E;   /* body text color */
}