/**
 * Prince Albert Theme - Color Variants
 *
 * This file defines all color variables and theme variants.
 * Use ?v=modern, ?v=warm, or ?v=dark to switch variants.
 * Default is 'classic' (current design).
 */

/* ==========================================================================
   Default Theme (Classic) - Current Prince Albert Design
   ========================================================================== */

:root {
    /* Primary Colors */
    --color-primary: #4A5D4A;           /* Dark green - main brand color */
    --color-primary-light: #6B7B6B;     /* Lighter green for body text */
    --color-primary-dark: #3a4a3a;      /* Darker green for hover states */

    /* Accent Colors */
    --color-accent: #8A9A6E;            /* Sage green - buttons, highlights */
    --color-accent-hover: #6d7d5a;      /* Darker sage for hover */
    --color-accent-light: rgba(138, 154, 110, 0.1);  /* Light accent for backgrounds */

    /* Background Colors */
    --color-background-light: #F2F0E9;  /* Warm cream - main background */
    --color-background-dark: #4A5D4A;   /* Dark green - footer, dark sections */
    --color-background-alt: #ffffff;    /* White - cards, alternative sections */

    /* Text Colors */
    --color-text-dark: #4A5D4A;         /* Dark text on light backgrounds */
    --color-text-light: #ffffff;        /* Light text on dark backgrounds */
    --color-text-muted: rgba(255, 255, 255, 0.7);  /* Muted text on dark */
    --color-text-body: #6B7B6B;         /* Body text, descriptions */

    /* Subtitle/Label Colors */
    --color-subtitle: #8a9a6e;          /* Subtitles and labels */

    /* Legacy aliases (for backwards compatibility) */
    --color-gold: #8A9A6E;
    --color-gold-hover: #6d7d5a;

    /* Border Colors */
    --color-border-light: rgba(74, 93, 74, 0.1);
    --color-border-medium: rgba(74, 93, 74, 0.15);
    --color-border-dark: rgba(74, 93, 74, 0.2);
    --color-border-on-dark: rgba(255, 255, 255, 0.1);
    --color-border-on-dark-medium: rgba(255, 255, 255, 0.2);
    --color-border-on-dark-strong: rgba(255, 255, 255, 0.3);

    /* Overlay Colors */
    --color-overlay-light: rgba(255, 255, 255, 0.05);
    --color-overlay-medium: rgba(0, 0, 0, 0.3);
    --color-overlay-dark: rgba(0, 0, 0, 0.5);
    --color-overlay-very-dark: rgba(0, 0, 0, 0.7);
    --color-overlay-header: rgba(26, 26, 26, 0.95);

    /* Shadow Colors */
    --color-shadow-light: rgba(0, 0, 0, 0.1);
    --color-shadow-medium: rgba(0, 0, 0, 0.15);
    --color-shadow-dark: rgba(0, 0, 0, 0.3);

    /* Typography */
    --font-primary: 'Playfair Display', Georgia, serif;
    --font-secondary: 'Mulish', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Spacing */
    --header-height: 80px;
    --split-ratio-left: 60%;
    --split-ratio-right: 40%;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease;
}


/* ==========================================================================
   Modern Variant - Contemporary & Minimalist
   ========================================================================== */

html.theme-modern {
    /* Primary Colors */
    --color-primary: #2C3E50;           /* Deep navy blue */
    --color-primary-light: #5D6D7E;     /* Medium slate */
    --color-primary-dark: #1A252F;      /* Darker navy */

    /* Accent Colors */
    --color-accent: #E67E22;            /* Vibrant orange */
    --color-accent-hover: #D35400;      /* Darker orange */
    --color-accent-light: rgba(230, 126, 34, 0.1);

    /* Background Colors */
    --color-background-light: #FAFAFA;  /* Clean white-gray */
    --color-background-dark: #2C3E50;   /* Navy blue */
    --color-background-alt: #ffffff;

    /* Text Colors */
    --color-text-dark: #2C3E50;
    --color-text-light: #ffffff;
    --color-text-muted: rgba(255, 255, 255, 0.75);
    --color-text-body: #5D6D7E;

    /* Subtitle/Label Colors */
    --color-subtitle: #63708e;

    /* Legacy aliases */
    --color-gold: #E67E22;
    --color-gold-hover: #D35400;

    /* Border Colors */
    --color-border-light: rgba(44, 62, 80, 0.1);
    --color-border-medium: rgba(44, 62, 80, 0.15);
    --color-border-dark: rgba(44, 62, 80, 0.2);
    --color-border-on-dark: rgba(255, 255, 255, 0.1);
    --color-border-on-dark-medium: rgba(255, 255, 255, 0.2);
    --color-border-on-dark-strong: rgba(255, 255, 255, 0.3);

    /* Overlay Colors */
    --color-overlay-header: rgba(44, 62, 80, 0.95);

    /* Typography - use more modern sans-serif */
    --font-primary: 'Mulish', -apple-system, sans-serif;
}

/* Modern Header Styles */
html.theme-modern .site-header {
    background: #2b3f56;
}

html.theme-modern .site-header.scrolled {
    background: #2b3f56;
}

html.theme-modern .header__actions > a {
    background-color: #63708e;
    color: #ffffff;
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    font-weight: 500;
}

html.theme-modern .header__actions > a:hover,
html.theme-modern .header__actions > a:focus {
    background-color: #525e78;
    color: #ffffff;
}

html.theme-modern .header__menu-link.active,
html.theme-modern .header__menu a:hover,
html.theme-modern .header__menu a:focus {
    color: #ffffff;
}


/* ==========================================================================
   Warm Variant - Luxurious Gold & Burgundy
   ========================================================================== */

html.theme-warm {
    /* Primary Colors */
    --color-primary: #5D4037;           /* Rich brown */
    --color-primary-light: #795548;     /* Medium brown */
    --color-primary-dark: #3E2723;      /* Dark brown */

    /* Accent Colors */
    --color-accent: #C9A227;            /* Luxurious gold */
    --color-accent-hover: #A68523;      /* Darker gold */
    --color-accent-light: rgba(201, 162, 39, 0.1);

    /* Background Colors */
    --color-background-light: #FDF8F3;  /* Warm cream */
    --color-background-dark: #5D4037;   /* Rich brown */
    --color-background-alt: #FFFAF5;    /* Warm white */

    /* Text Colors */
    --color-text-dark: #5D4037;
    --color-text-light: #FFFAF5;
    --color-text-muted: rgba(255, 250, 245, 0.75);
    --color-text-body: #795548;

    /* Subtitle/Label Colors */
    --color-subtitle: #C9A227;

    /* Legacy aliases */
    --color-gold: #C9A227;
    --color-gold-hover: #A68523;

    /* Border Colors */
    --color-border-light: rgba(93, 64, 55, 0.1);
    --color-border-medium: rgba(93, 64, 55, 0.15);
    --color-border-dark: rgba(93, 64, 55, 0.2);
    --color-border-on-dark: rgba(255, 250, 245, 0.1);
    --color-border-on-dark-medium: rgba(255, 250, 245, 0.2);
    --color-border-on-dark-strong: rgba(255, 250, 245, 0.3);

    /* Overlay Colors */
    --color-overlay-header: rgba(62, 39, 35, 0.95);
}


/* ==========================================================================
   Dark Variant - Elegant Dark Mode
   ========================================================================== */

html.theme-dark {
    /* Primary Colors */
    --color-primary: #E0E0E0;           /* Light gray for text */
    --color-primary-light: #B0B0B0;     /* Medium gray */
    --color-primary-dark: #FFFFFF;      /* White for emphasis */

    /* Accent Colors */
    --color-accent: #90CAF9;            /* Soft blue */
    --color-accent-hover: #64B5F6;      /* Brighter blue */
    --color-accent-light: rgba(144, 202, 249, 0.1);

    /* Background Colors */
    --color-background-light: #1A1A1A;  /* Dark charcoal */
    --color-background-dark: #121212;   /* Near black */
    --color-background-alt: #2D2D2D;    /* Slightly lighter dark */

    /* Text Colors */
    --color-text-dark: #E0E0E0;         /* Light text on dark */
    --color-text-light: #E0E0E0;        /* Same for consistency */
    --color-text-muted: rgba(224, 224, 224, 0.6);
    --color-text-body: #B0B0B0;

    /* Subtitle/Label Colors */
    --color-subtitle: #90CAF9;

    /* Legacy aliases */
    --color-gold: #90CAF9;
    --color-gold-hover: #64B5F6;

    /* Border Colors */
    --color-border-light: rgba(255, 255, 255, 0.08);
    --color-border-medium: rgba(255, 255, 255, 0.12);
    --color-border-dark: rgba(255, 255, 255, 0.16);
    --color-border-on-dark: rgba(255, 255, 255, 0.08);
    --color-border-on-dark-medium: rgba(255, 255, 255, 0.12);
    --color-border-on-dark-strong: rgba(255, 255, 255, 0.2);

    /* Overlay Colors */
    --color-overlay-light: rgba(255, 255, 255, 0.03);
    --color-overlay-medium: rgba(0, 0, 0, 0.4);
    --color-overlay-dark: rgba(0, 0, 0, 0.6);
    --color-overlay-very-dark: rgba(0, 0, 0, 0.8);
    --color-overlay-header: rgba(18, 18, 18, 0.98);

    /* Shadow Colors */
    --color-shadow-light: rgba(0, 0, 0, 0.3);
    --color-shadow-medium: rgba(0, 0, 0, 0.4);
    --color-shadow-dark: rgba(0, 0, 0, 0.5);
}


/* ==========================================================================
   Ocean Variant - Coastal & Serene
   ========================================================================== */

html.theme-ocean {
    /* Primary Colors */
    --color-primary: #1E3A5F;           /* Deep ocean blue */
    --color-primary-light: #3D5A80;     /* Medium blue */
    --color-primary-dark: #0D1B2A;      /* Very dark blue */

    /* Accent Colors */
    --color-accent: #48CAE4;            /* Bright aqua */
    --color-accent-hover: #00B4D8;      /* Deeper aqua */
    --color-accent-light: rgba(72, 202, 228, 0.1);

    /* Background Colors */
    --color-background-light: #F0F7FA;  /* Soft blue-white */
    --color-background-dark: #1E3A5F;   /* Deep blue */
    --color-background-alt: #ffffff;

    /* Text Colors */
    --color-text-dark: #1E3A5F;
    --color-text-light: #ffffff;
    --color-text-muted: rgba(255, 255, 255, 0.75);
    --color-text-body: #3D5A80;

    /* Subtitle/Label Colors */
    --color-subtitle: #48CAE4;

    /* Legacy aliases */
    --color-gold: #48CAE4;
    --color-gold-hover: #00B4D8;

    /* Border Colors */
    --color-border-light: rgba(30, 58, 95, 0.1);
    --color-border-medium: rgba(30, 58, 95, 0.15);
    --color-border-dark: rgba(30, 58, 95, 0.2);
    --color-border-on-dark: rgba(255, 255, 255, 0.1);
    --color-border-on-dark-medium: rgba(255, 255, 255, 0.2);
    --color-border-on-dark-strong: rgba(255, 255, 255, 0.3);

    /* Overlay Colors */
    --color-overlay-header: rgba(30, 58, 95, 0.95);
}


/* ==========================================================================
   Classy Variant - Elegant & Timeless with Strong Serif Typography
   ========================================================================== */

html.theme-classy {
    /* Primary Colors */
    --color-primary: #2C2C2C;           /* Rich charcoal */
    --color-primary-light: #4A4A4A;     /* Medium gray */
    --color-primary-dark: #1A1A1A;      /* Near black */

    /* Accent Colors */
    --color-accent: #B8860B;            /* Dark goldenrod - classic gold */
    --color-accent-hover: #996F0A;      /* Deeper gold */
    --color-accent-light: rgba(184, 134, 11, 0.1);

    /* Background Colors */
    --color-background-light: #FAF9F6;  /* Warm off-white / ivory */
    --color-background-dark: #2C2C2C;   /* Rich charcoal */
    --color-background-alt: #FFFFFF;

    /* Text Colors */
    --color-text-dark: #2C2C2C;
    --color-text-light: #FAF9F6;
    --color-text-muted: rgba(250, 249, 246, 0.75);
    --color-text-body: #4A4A4A;

    /* Subtitle/Label Colors */
    --color-subtitle: #B8860B;

    /* Legacy aliases */
    --color-gold: #B8860B;
    --color-gold-hover: #996F0A;

    /* Border Colors */
    --color-border-light: rgba(44, 44, 44, 0.1);
    --color-border-medium: rgba(44, 44, 44, 0.15);
    --color-border-dark: rgba(44, 44, 44, 0.2);
    --color-border-on-dark: rgba(250, 249, 246, 0.1);
    --color-border-on-dark-medium: rgba(250, 249, 246, 0.2);
    --color-border-on-dark-strong: rgba(250, 249, 246, 0.3);

    /* Overlay Colors */
    --color-overlay-header: rgba(28, 28, 28, 0.95);

    /* Typography - Elegant Handwritten Script */
    --font-primary: 'Corinthia', 'Playfair Display', cursive;
    --font-secondary: 'Libre Baskerville', 'Georgia', serif;

    /* Font Size Adjustments for Script Font (needs to be larger) */
    --font-scale: 3.9;
}

/* Classy Theme - Enlarged titles for script font readability */
html.theme-classy h1,
html.theme-classy h2,
html.theme-classy h3,
html.theme-classy h4,
html.theme-classy .hero__left-tagline,
html.theme-classy .carousel-section__title,
html.theme-classy .rooms-title,
html.theme-classy .story-quote,
html.theme-classy .faq-section__title,
html.theme-classy .place-section__title {
    font-size: calc(var(--font-scale) * 1em);
    font-weight: 400;
    letter-spacing: 0.02em;
}

/* Room card titles - keep original scale */
html.theme-classy .room-card__title {
    font-size: calc(3 * 1em);
}

/* Remove uppercase from dynamic calendar header in classy theme */
html.theme-classy .dyncal_header h4 {
    text-transform: none;
}