/* Theatre Panel - Dramatic & Elegant Theme */
/* Rich purple, gold accents, theatrical feel */

/* ============================================
   GOOGLE FONT IMPORT
   Cormorant Garamond - dramatic, theatrical elegant serif
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&display=swap');

/* ============================================
   COLOR & FONT VARIABLES
   ============================================ */

:root {
    /* Backgrounds */
    --niche-bg: #faf8fc;
    --niche-bg-accent: #f3e8ff;
    --niche-cream: #fdfcfe;

    /* Primary (royal purple) */
    --niche-primary: #7c3aed;
    --niche-primary-dark: #5b21b6;
    --niche-primary-light: #a78bfa;
    --niche-primary-rgb: 124, 58, 237;

    /* Accent (gold) */
    --niche-accent: #d97706;
    --niche-accent-light: #fbbf24;

    /* Sidebar (deep violet) */
    --niche-sidebar-bg: #5b21b6;
    --niche-sidebar-dark: #4c1d95;

    /* Text & Border */
    --niche-text: #1e1b4b;
    --niche-border: #ddd6fe;
    --niche-border-rgb: 221, 214, 254;

    /* Typography - Cormorant Garamond for dramatic, theatrical elegance (headings only) */
    --niche-font-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}

/* ============================================
   THEATRE-SPECIFIC: Curtain-inspired pattern
   ============================================ */

.fi-body {
    background:
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%237c3aed' fill-opacity='0.04'%3E%3Cpath d='M30 30c0-11.046-8.954-20-20-20v40c11.046 0 20-8.954 20-20zm0 0c0 11.046 8.954 20 20 20V10c-11.046 0-20 8.954-20 20z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(135deg, var(--niche-bg) 0%, var(--niche-bg-accent) 100%) !important;
    background-attachment: fixed !important;
}

/* ============================================
   THEATRE-SPECIFIC: Curtain drape pattern on sidebar
   ============================================ */

.fi-sidebar {
    background:
        url("data:image/svg+xml,%3Csvg width='60' height='80' viewBox='0 0 60 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23fbbf24' stroke-opacity='0.06' stroke-width='1.5'%3E%3Cpath d='M0 0c15 10 15 30 0 40c15 10 15 30 0 40'/%3E%3Cpath d='M20 0c15 10 15 30 0 40c15 10 15 30 0 40'/%3E%3Cpath d='M40 0c15 10 15 30 0 40c15 10 15 30 0 40'/%3E%3Cpath d='M60 0c15 10 15 30 0 40c15 10 15 30 0 40'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(180deg, var(--niche-sidebar-bg) 0%, var(--niche-sidebar-dark) 100%) !important;
    border-right: 3px solid var(--niche-accent) !important;
    box-shadow: 2px 0 15px rgba(0, 0, 0, 0.15) !important;
}