/**
 * Typography Variables - Theme-First CSS Variables
 * 
 * This file defines CSS variables extracted from the active theme's design system.
 * These variables ensure Gutenberg editor and frontend typography consistency.
 * 
 * DO NOT modify these values directly - they should match your theme's existing
 * font families, colors, and spacing defined in functions.php or theme.json.
 */

:root {
    /* Typography - Font Families */
    /* Inherited from theme: Lexend font family */
    --wp--typography--font-family: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    
    /* Typography - Base Styles */
    /* Matches body font settings from style.css */
    --wp--typography--font-size--base: 1rem;
    --wp--typography--line-height--base: 1.75;
    
    /* Typography - Colors */
    /* Extracted from Tailwind config in functions.php */
    --wp--color--text-main: #0d171c;        /* text-main */
    --wp--color--text-secondary: #48819d;   /* text-secondary */
    --wp--color--primary: #c41230;          /* primary brand color */
    --wp--color--background: #ffffff;        /* surface-light */
    --wp--color--background-dark: #0d171c;   /* text-main (used for dark mode) */
    
    /* Typography - Heading Sizes */
    /* Based on Tailwind scale used in templates */
    --wp--typography--font-size--h1: 4.5rem;      /* text-7xl equivalent */
    --wp--typography--font-size--h2: 3rem;        /* text-4xl equivalent */
    --wp--typography--font-size--h3: 2.25rem;      /* text-3xl equivalent */
    --wp--typography--font-size--h4: 1.875rem;    /* text-2xl equivalent */
    --wp--typography--font-size--h5: 1.5rem;      /* text-xl equivalent */
    --wp--typography--font-size--h6: 1.25rem;     /* text-lg equivalent */
    
    /* Typography - Heading Properties */
    /* Matches frontend heading styles (font-black, uppercase, tracking-tighter) */
    --wp--typography--font-weight--heading: 900;
    --wp--typography--text-transform--heading: uppercase;
    --wp--typography--letter-spacing--heading: -0.05em;
    --wp--typography--line-height--heading: 1.1;
    --wp--typography--line-height--h1: 0.9;
    
    /* Typography - Spacing */
    /* Paragraph and list spacing for consistent block spacing */
    --wp--spacing--paragraph--bottom: 1.75rem;
    --wp--spacing--heading--top: 2.5rem;
    --wp--spacing--heading--bottom: 1.25rem;
    --wp--spacing--heading--top--first: 0;
    --wp--spacing--list--top: 1.25rem;
    --wp--spacing--list--bottom: 1.25rem;
    --wp--spacing--list--left: 2rem;
    --wp--spacing--list-item--bottom: 0.5rem;
    --wp--spacing--list-item--left: 0.5rem;
    --wp--spacing--nested-list--top: 0.5rem;
    --wp--spacing--nested-list--bottom: 0.5rem;
    
    /* Typography - Links */
    --wp--color--link: var(--wp--color--primary);
    --wp--typography--font-weight--link: 600;
    
    /* Typography - Blockquote */
    --wp--color--blockquote--border: var(--wp--color--primary);
    --wp--spacing--blockquote--border-width: 0.25rem;
    --wp--spacing--blockquote--left: 1.5rem;
    --wp--spacing--blockquote--vertical: 2.5rem;
    --wp--color--blockquote--text: #475569;
    
    /* Typography - Horizontal Rule */
    --wp--color--hr: #e2e8f0;
    --wp--spacing--hr--vertical: 3rem;
    
    /* Dark Mode Support */
    --wp--color--text-main--dark: #ffffff;
    --wp--color--text-secondary--dark: #cbd5e1;
    --wp--color--background--dark: #0d171c;
    --wp--color--blockquote--text--dark: #94a3b8;
    --wp--color--hr--dark: #1e293b;
}

/* Dark Mode Variables */
.is-dark-theme,
.dark {
    --wp--color--text-main: var(--wp--color--text-main--dark);
    --wp--color--text-secondary: var(--wp--color--text-secondary--dark);
    --wp--color--background: var(--wp--color--background--dark);
    --wp--color--blockquote--text: var(--wp--color--blockquote--text--dark);
    --wp--color--hr: var(--wp--color--hr--dark);
}