/* ==========================================================================
   Justine 2026 — Design Tokens
   Paper & book aesthetic design system for e-dicciones Justine.
   ========================================================================== */

:root {
    /* ----------------------------------------------------------------------
       Color palette: Papel & Libro
       ---------------------------------------------------------------------- */
    --papel-cream: #FAF6F0;
    --papel-bone: #F5F0E8;
    --papel-white: #FFFFFF;
    --tinta-black: #1C1C1C;
    --tinta-gray: #5A5652;
    --lacre: #8B2500;
    --naranja-justine: #E86A10;
    --borde-lomo: #D4CFC7;
    --negro-encuadernacion: #2C2825;
    --sepia: #8B7355;

    /* Derived translucent tones. */
    --lacre-semi: rgba(139, 37, 0, 0.85);
    --naranja-semi: rgba(232, 106, 16, 0.85);
    --sombra-negra: rgba(44, 40, 37, 0.08);
    --sombra-negra-fuerte: rgba(44, 40, 37, 0.16);

    /* ----------------------------------------------------------------------
       Typography
       ---------------------------------------------------------------------- */
    --font-editorial: 'EB Garamond', Georgia, 'Times New Roman', serif;
    --font-body: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* ----------------------------------------------------------------------
       Spacing: based on generous book margins.
       ---------------------------------------------------------------------- */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-page: clamp(1.5rem, 5vw, 4rem);
    --space-section: clamp(2rem, 6vw, 5rem);
    --space-content: clamp(1rem, 3vw, 2rem);

    /* ----------------------------------------------------------------------
       Layout widths
       ---------------------------------------------------------------------- */
    --content-width: 720px;
    --content-wide: 960px;
    --content-full: 1200px;

    /* ----------------------------------------------------------------------
       Effects
       ---------------------------------------------------------------------- */
    --shadow-page: 0 1px 3px rgba(44, 40, 37, 0.06), 0 4px 12px rgba(44, 40, 37, 0.04);
    --shadow-hover: 0 2px 8px rgba(44, 40, 37, 0.1), 0 8px 24px rgba(44, 40, 37, 0.06);
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    --radius-page: 2px;
    --radius-pill: 9999px;
    --transition-page: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* ----------------------------------------------------------------------
       Overridden Themify variables (reinforced via higher specificity)
       ---------------------------------------------------------------------- */
    --theme_accent: var(--naranja-justine);
    --theme_accent_semi: var(--naranja-semi);
    --theme_accent_hover: var(--lacre);
    --theme_rounded: var(--radius-page);
    --theme_btn_rounded: var(--radius-pill);
}