/* Local Fonts Definition */
@font-face {
    font-family: 'Young Serif';
    src: url('../fonts/young-serif-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Space Grotesk';
    src: url('../fonts/space-grotesk-300.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Space Grotesk';
    src: url('../fonts/space-grotesk-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Space Grotesk';
    src: url('../fonts/space-grotesk-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Space Grotesk';
    src: url('../fonts/space-grotesk-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Space Grotesk';
    src: url('../fonts/space-grotesk-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Theme 1: Great Wave (Default) */
:root, html[data-theme="great-wave"] {
    --color-bg: rgba(248, 240, 227, 0.20);
    /* Option 2: 75% transparent container for maximum glass refraction */
    --color-outer-bg: #F8F0E3;
    /* Outer background base (#F8F0E3) */
    --color-text: #1C1C1C;
    /* Primary text (#1C1C1C Deep Ink Black) */
    --color-grid: #6C8EA4;
    /* Grid lines color (Muted Ocean Slate) */
    --grid-spacing: 18px;

    --color-light-sand: rgba(255, 255, 255, 0.6);
    /* Input/Toast glass background */
    --color-placeholder: #7B99AA;
    /* Ocean Slate Placeholder */
    --color-cta: #487BC3;
    /* Great Wave Hokusai Blue CTA */
    --color-cta-hover: #3565AA;
    /* Deep Hokusai Blue hover */
    --color-dot: #A3C1AD;
    /* Sea Glass Green canvas physics dot */
    --color-checkered-1: rgba(235, 225, 210, 0.12);
    --color-checkered-2: rgba(225, 213, 196, 0.18);
    --color-focus-bg: rgba(255, 255, 255, 0.85);
    --color-grid-rgb: 108, 142, 164;

    /* Glassmorphism Specs - Light Glass Guide Default */
    --glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.75) 0%, rgba(248, 240, 227, 0.45) 100%);
    --glass-blur: 12px;
    --glass-saturate: 130%;
    --glass-border-top: rgba(255, 255, 255, 0.95);
    --glass-border-left: rgba(255, 255, 255, 0.95);
    --glass-border-bottom: rgba(255, 255, 255, 0.35);
    --glass-border-right: rgba(255, 255, 255, 0.35);
    --glass-shadow: 0 16px 40px rgba(72, 123, 195, 0.08), 0 4px 12px rgba(0, 0, 0, 0.03);
    --glass-inner-bevel: inset 0 2px 6px rgba(255, 255, 255, 0.9), inset 0 -1px 2px rgba(255, 255, 255, 0.4);
    --bg-gradient-1: rgba(72, 123, 195, 0.35);
    --bg-gradient-2: rgba(163, 193, 173, 0.4);
    --bg-gradient-3: rgba(220, 231, 225, 0.6);
    --cta-gradient: linear-gradient(135deg, #487BC3 0%, #3565AA 100%);
    --cta-hover-gradient: linear-gradient(135deg, #5C8FD7 0%, #487BC3 100%);
}

/* Theme 2: Off-White (Warm Oasis Cream Glass) */
html[data-theme="off-white"] {
    --color-bg: rgba(245, 241, 224, 0.68);
    --color-outer-bg: #F0EAD2;
    --color-text: #5C4B40;
    --color-grid: #A98467;
    --color-light-sand: rgba(250, 248, 242, 0.6);
    --color-placeholder: #A28F82;
    --color-cta: #C85A32;
    --color-cta-hover: #B24A24;
    --color-dot: #C9BCAE;
    --color-checkered-1: rgba(229, 222, 200, 0.5);
    --color-checkered-2: rgba(232, 228, 211, 0.7);
    --color-focus-bg: rgba(255, 255, 255, 0.85);
    --color-grid-rgb: 169, 132, 103;
    --glass-blur: 16px;
    --glass-border: rgba(255, 255, 255, 0.75);
    --glass-shadow: 0 8px 32px 0 rgba(108, 88, 76, 0.08);
    --bg-gradient-1: rgba(245, 224, 185, 0.4);
    --bg-gradient-2: rgba(232, 212, 192, 0.4);
    --bg-gradient-3: rgba(240, 234, 210, 0.5);
    --cta-gradient: linear-gradient(135deg, #C85A32 0%, #B24A24 100%);
    --cta-hover-gradient: linear-gradient(135deg, #DC6C43 0%, #C85A32 100%);
}

/* Theme 3: Light Neutral (Studio Slate Glass) */
html[data-theme="light-neutral"] {
    --color-bg: rgba(255, 255, 255, 0.55);
    --color-outer-bg: #EBECEE;
    --color-text: #1E2022;
    --color-grid: #8E95A0;
    --color-light-sand: rgba(240, 242, 245, 0.6);
    --color-placeholder: #9EA5B0;
    --color-cta: #2B2D31;
    --color-cta-hover: #111214;
    --color-dot: #C5C9D0;
    --color-checkered-1: rgba(230, 232, 235, 0.5);
    --color-checkered-2: rgba(220, 223, 228, 0.7);
    --color-focus-bg: rgba(255, 255, 255, 0.85);
    --color-grid-rgb: 142, 149, 160;
    --glass-blur: 16px;
    --glass-border: rgba(255, 255, 255, 0.8);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.06);
    --bg-gradient-1: rgba(210, 215, 225, 0.35);
    --bg-gradient-2: rgba(230, 233, 238, 0.5);
    --bg-gradient-3: rgba(200, 205, 215, 0.3);
    --cta-gradient: linear-gradient(135deg, #2B2D31 0%, #111214 100%);
    --cta-hover-gradient: linear-gradient(135deg, #3F4248 0%, #2B2D31 100%);
}

/* Theme 4: Dark Grey (Midnight Graphite Glass) */
html[data-theme="dark-grey"] {
    --color-bg: rgba(30, 32, 38, 0.65);
    --color-outer-bg: #141619;
    --color-text: #F1F5F9;
    --color-grid: #64748B;
    --color-light-sand: rgba(255, 255, 255, 0.07);
    --color-placeholder: #94A3B8;
    --color-cta: #38BDF8;
    --color-cta-hover: #0EA5E9;
    --color-dot: #475569;
    --color-checkered-1: rgba(25, 28, 34, 0.6);
    --color-checkered-2: rgba(36, 40, 48, 0.8);
    --color-focus-bg: rgba(255, 255, 255, 0.12);
    --color-grid-rgb: 100, 116, 139;
    --glass-blur: 18px;
    --glass-border: rgba(255, 255, 255, 0.14);
    --glass-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.5);
    --bg-gradient-1: rgba(56, 189, 248, 0.12);
    --bg-gradient-2: rgba(139, 92, 246, 0.12);
    --bg-gradient-3: rgba(15, 23, 42, 0.8);
    --cta-gradient: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%);
    --cta-hover-gradient: linear-gradient(135deg, #38BDF8 0%, #0EA5E9 100%);
}

/* Theme 5: Lavender / Violet (Glass OS Initial) */
html[data-theme="lavender"] {
    --color-bg: rgba(255, 255, 255, 0.42);
    --color-outer-bg: #EAE6F2;
    --color-text: #2D2B3D;
    --color-grid: #8B7EC8;
    --color-light-sand: rgba(255, 255, 255, 0.45);
    --color-placeholder: #8E89A8;
    --color-cta: #6C5CE7;
    --color-cta-hover: #5A4AD1;
    --color-dot: #C2BCD8;
    --color-checkered-1: rgba(230, 226, 242, 0.5);
    --color-checkered-2: rgba(222, 217, 237, 0.7);
    --color-focus-bg: rgba(255, 255, 255, 0.75);
    --color-grid-rgb: 139, 126, 200;
    --glass-blur: 16px;
    --glass-border: rgba(255, 255, 255, 0.65);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.08);
    --bg-gradient-1: rgba(218, 206, 247, 0.6);
    --bg-gradient-2: rgba(255, 218, 214, 0.5);
    --bg-gradient-3: rgba(204, 232, 248, 0.5);
    --cta-gradient: linear-gradient(135deg, #7C3AED 0%, #6366F1 100%);
    --cta-hover-gradient: linear-gradient(135deg, #7E6FEF 0%, #6C5CE7 100%);
}

/* Glass Variation 1: Guide (Light Glass Guide Default) */
html[data-glass="guide"], html[data-glass="v1"] {
    --glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.75) 0%, rgba(248, 240, 227, 0.45) 100%);
    --glass-blur: 12px;
    --glass-saturate: 130%;
    --glass-border-top: rgba(255, 255, 255, 0.95);
    --glass-border-left: rgba(255, 255, 255, 0.95);
    --glass-border-bottom: rgba(255, 255, 255, 0.3);
    --glass-border-right: rgba(255, 255, 255, 0.3);
    --glass-shadow: 0 16px 40px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.03);
    --glass-inner-bevel: inset 0 2px 6px rgba(255, 255, 255, 0.9), inset 0 -1px 2px rgba(255, 255, 255, 0.4);
}

/* Glass Variation 2: Glowing Edge & Vivid Refraction */
html[data-glass="glowing"], html[data-glass="v2"] {
    --glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.65) 0%, rgba(220, 235, 245, 0.35) 100%);
    --glass-blur: 32px;
    --glass-saturate: 165%;
    --glass-border-top: rgba(255, 255, 255, 1);
    --glass-border-left: rgba(255, 255, 255, 1);
    --glass-border-bottom: rgba(255, 255, 255, 0.5);
    --glass-border-right: rgba(255, 255, 255, 0.5);
    --glass-shadow: 0 0 30px rgba(255, 255, 255, 0.7), 0 20px 48px rgba(72, 123, 195, 0.16);
    --glass-inner-bevel: inset 0 3px 8px rgba(255, 255, 255, 0.95), inset 0 -2px 4px rgba(255, 255, 255, 0.5);
}

/* Glass Variation 3: Crystal Translucency & Thin Edge */
html[data-glass="crystal"], html[data-glass="v3"] {
    --glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.52) 0%, rgba(255, 255, 255, 0.22) 100%);
    --glass-blur: 16px;
    --glass-saturate: 120%;
    --glass-border-top: rgba(255, 255, 255, 0.85);
    --glass-border-left: rgba(255, 255, 255, 0.85);
    --glass-border-bottom: rgba(255, 255, 255, 0.4);
    --glass-border-right: rgba(255, 255, 255, 0.4);
    --glass-shadow: 0 10px 28px rgba(0, 0, 0, 0.05);
    --glass-inner-bevel: inset 0 1.5px 3px rgba(255, 255, 255, 0.85);
}

/* Background Grid Transparency Variations */
/* 1. Existing #F8F0E3 at 50% Opacity */
html[data-bg="f8-50"] {
    --color-bg: rgba(248, 240, 227, 0.42);
    --color-checkered-1: rgba(235, 225, 210, 0.25);
    --color-checkered-2: rgba(225, 213, 196, 0.35);
}

/* 2. Existing #F8F0E3 at 25% Opacity (75% Transparent) */
html[data-bg="f8-25"] {
    --color-bg: rgba(248, 240, 227, 0.20);
    --color-checkered-1: rgba(235, 225, 210, 0.12);
    --color-checkered-2: rgba(225, 213, 196, 0.18);
}

/* 3. Subtle Neutral Off-White #F3F3F1 at 50% Opacity */
html[data-bg="f3-50"] {
    --color-outer-bg: #F3F3F1;
    --color-bg: rgba(243, 243, 241, 0.45);
    --color-checkered-1: rgba(230, 230, 228, 0.25);
    --color-checkered-2: rgba(220, 220, 218, 0.35);
}

/* 4. Subtle Neutral Off-White #F3F3F1 at 25% Opacity (75% Transparent) */
html[data-bg="f3-25"] {
    --color-outer-bg: #F3F3F1;
    --color-bg: rgba(243, 243, 241, 0.22);
    --color-checkered-1: rgba(230, 230, 228, 0.12);
    --color-checkered-2: rgba(220, 220, 218, 0.18);
}