/**
 * Roost Chicken — Design Tokens
 *
 * Sistema de variables CSS globales del tema.
 * Fuente de verdad para colores, tipografía, espaciados y breakpoints.
 *
 * Se encola antes que cualquier otro CSS del tema (como dependencia)
 * para garantizar disponibilidad en toda la cascada.
 *
 * Nomenclatura: --rc-{categoria}-{nombre}-{modificador}
 *
 * @package RoosterGourmet
 * @since   B2.1
 */

:root {
    /* ========================================================================
       COLORES — MARCA
       ======================================================================== */
    --rc-color-primary: #F80000;           /* Rojo Roost Chicken */
    --rc-color-primary-dark: #C50000;      /* Rojo hover/active */
    --rc-color-primary-light: #FF3333;     /* Rojo suave */

    --rc-color-accent-green: #61CE70;      /* Verde destacados */
    --rc-color-accent-yellow: #FDE047;     /* Amarillo etiquetas */
    --rc-color-accent-yellow-dark: #EAB308;
    --rc-color-accent-gold: #B0935E;       /* Dorado carta */

    /* ========================================================================
       COLORES — NEUTROS
       ======================================================================== */
    --rc-color-black: #000000;
    --rc-color-bg-dark: #23232B;           /* Casi negro, fondos oscuros */
    --rc-color-text: #333333;              /* Texto principal */
    --rc-color-text-muted: #7A7A7A;        /* Texto secundario */
    --rc-color-text-light: #54595F;        /* Gris medio */
    --rc-color-border: #495057;
    --rc-color-bg-light: #F8F8F8;          /* Fondo claro */
    --rc-color-bg-soft: #E9ECEF;           /* Fondo más suave */
    --rc-color-white: #FFFFFF;

    /* ========================================================================
       COLORES — SEMÁNTICOS
       ======================================================================== */
    --rc-color-link: var(--rc-color-primary);
    --rc-color-link-hover: var(--rc-color-primary-dark);
    --rc-color-overlay-dark: rgba(0, 0, 0, 0.55);
    --rc-color-overlay-darker: rgba(0, 0, 0, 0.75);

    /* ========================================================================
       TIPOGRAFÍA — FAMILIAS
       ========================================================================
       Familia principal: "Metropolis Font Family", cargada desde Elementor
       Pro → Custom Fonts. Incluye todos los weights 100-900 con sus
       variantes italic, en wp-content/uploads/2025/07/Metropolis-*.woff2.

       Histórico: existía además un @font-face huérfano en style.css que
       declaraba una familia 'Metropolis' (sin "Font Family") apuntando
       solo al peso 900 (Black). Como el stack empezaba por esa familia,
       cualquier texto en pesos 100-800 se renderizaba en Black por el
       único archivo disponible. Además usaba URL absoluta a
       roostchicken.es (CORS en local, 404 para el .woff que no existe).
       Esa familia huérfana fue eliminada; ahora el tema usa una sola
       familia consistente en todo el CSS.

       --rc-font-display : titulares y acentos, toda la escala de weights.
       --rc-font-body    : cuerpo, stack del sistema. Se mantiene como
                           fallback seguro para textos largos.
       ======================================================================== */
    --rc-font-display: 'Metropolis Font Family', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    --rc-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* ========================================================================
       TIPOGRAFÍA — PESOS
       ======================================================================== */
    --rc-font-weight-regular: 400;
    --rc-font-weight-medium: 500;
    --rc-font-weight-semibold: 600;
    --rc-font-weight-bold: 700;
    --rc-font-weight-black: 900;

    /* ========================================================================
       TIPOGRAFÍA — ESCALA (modular, ratio ~1.25)
       ======================================================================== */
    --rc-font-size-xs: 0.75rem;      /* 12px — meta, caption */
    --rc-font-size-sm: 0.875rem;     /* 14px — small */
    --rc-font-size-base: 1rem;       /* 16px — body */
    --rc-font-size-md: 1.125rem;     /* 18px — lead */
    --rc-font-size-lg: 1.25rem;      /* 20px — H4 */
    --rc-font-size-xl: 1.5rem;       /* 24px — H3 */
    --rc-font-size-2xl: 1.875rem;    /* 30px — H2 */
    --rc-font-size-3xl: 2.25rem;     /* 36px — H1 */
    --rc-font-size-4xl: 3rem;        /* 48px — Hero title desktop */
    --rc-font-size-5xl: 4rem;        /* 64px — Hero XL */

    /* ========================================================================
       TIPOGRAFÍA — LINE-HEIGHTS
       ======================================================================== */
    --rc-line-height-tight: 1.15;    /* titulares */
    --rc-line-height-snug: 1.35;
    --rc-line-height-normal: 1.6;    /* cuerpo de lectura */
    --rc-line-height-relaxed: 1.75;

    /* ========================================================================
       ESPACIADOS — ESCALA 4px base
       ======================================================================== */
    --rc-space-3xs: 0.25rem;         /* 4px */
    --rc-space-2xs: 0.5rem;          /* 8px */
    --rc-space-xs: 0.75rem;          /* 12px */
    --rc-space-sm: 1rem;             /* 16px */
    --rc-space-md: 1.5rem;           /* 24px */
    --rc-space-lg: 2rem;             /* 32px */
    --rc-space-xl: 3rem;             /* 48px */
    --rc-space-2xl: 4rem;            /* 64px */
    --rc-space-3xl: 6rem;            /* 96px */

    /* ========================================================================
       LAYOUT
       ======================================================================== */
    --rc-container-max: 1400px;              /* ancho wrapper máximo */
    --rc-container-reading: 720px;           /* ancho columna de lectura */
    --rc-container-padding: var(--rc-space-sm);

    /* ========================================================================
       BORDER RADIUS
       ======================================================================== */
    --rc-radius-none: 0;
    --rc-radius-sm: 4px;
    --rc-radius-md: 8px;
    --rc-radius-lg: 12px;
    --rc-radius-xl: 20px;
    --rc-radius-pill: 999px;
    --rc-radius-full: 50%;

    /* ========================================================================
       SOMBRAS
       ======================================================================== */
    --rc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --rc-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --rc-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --rc-shadow-card: 0px 0px 20px -5px rgba(0, 0, 0, 0.18);

    /* ========================================================================
       TRANSICIONES
       ======================================================================== */
    --rc-transition-fast: 150ms ease;
    --rc-transition-base: 250ms ease;
    --rc-transition-slow: 400ms ease;

    /* ========================================================================
       Z-INDEX
       ======================================================================== */
    --rc-z-base: 1;
    --rc-z-dropdown: 100;
    --rc-z-sticky: 200;
    --rc-z-overlay: 500;
    --rc-z-modal: 1000;
}

/* ============================================================================
   BREAKPOINTS — referencia para media queries (uso manual)
   ============================================================================
   Mobile:     max-width: 480px
   Tablet:     min-width: 768px
   Laptop:     min-width: 1024px
   Desktop:    min-width: 1200px
   Wide:       min-width: 1480px
   ============================================================================ */