/**
 * CVPhotoVault - CSS Variables
 * Color scheme and design variables
 */

:root {
    /*
     * Primary Colors - aligned to the warm ivory/charcoal/gold palette
     * already used throughout the theme's Elementor demo content (#171717,
     * #C9A227, #F7F5F0). Previously this file defined a slightly different
     * gold (#d4af37 vs #C9A227) and used a blue accent as the default link
     * color - a real inconsistency in the theme's own reusable foundation,
     * independent of any specific page's content.
     */
    --color-dark: #171717;
    --color-light: #F7F5F0;
    --color-accent-gold: #C9A227;
    --color-accent-brown: #6B5B4A;
    --color-gray: #666666;
    --color-light-gray: #F5F2EA;
    --color-border: #E5E1D8;

    /* Typography */
    --font-family-heading: 'Playfair Display', serif;
    --font-family-body: 'Inter', sans-serif;
    --font-family-label: 'Montserrat', sans-serif;

    /* Font Sizes - wider contrast between display/heading tiers and body/
       label tiers is deliberate: a magazine-style hierarchy needs the jump
       to read immediately, not just a uniform step-down. */
    --font-size-display: 80px;
    --font-size-h1: 64px;
    --font-size-h2: 48px;
    --font-size-h3: 30px;
    --font-size-h4: 22px;
    --font-size-body: 17px;
    --font-size-small: 14px;
    --font-size-label: 13px;

    /* Letter spacing - the small-caps/eyebrow tracking used consistently
       across the theme's redesigned sections (kickers, nav, buttons). */
    --tracking-label: 2px;
    --tracking-wide: 0.5px;

    /* Spacing */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 48px;
    --spacing-xxl: 64px;

    /* Global layout system - every section (boxed or full-width) resolves
       its content width against these, so hero/CTA content lines up with
       the rest of the page instead of drifting to its own width. */
    --container-width: 1200px;
    --container-padding: 24px;
    --section-spacing: 100px;
    --grid-gap: 32px;

    /* Button system - one shared height/line-height pair so every button
       on the site sits on the same baseline regardless of its own font
       size or one-off padding setting. */
    --btn-height: 52px;
    --btn-padding-x: 32px;

    /* Border Radius */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;

    /* Transitions */
    --transition-default: all 0.3s ease;
    --transition-fast: all 0.15s ease;
}

/* Responsive Font Sizes */
@media (max-width: 768px) {
    :root {
        --font-size-h1: 42px;
        --font-size-h2: 32px;
        --font-size-h3: 24px;
        --font-size-h4: 18px;
    }
}