/* 
========================================
   CONTACTPILOT PRO - FRONTEND THEMES
========================================
   Scoped classes for individual forms.
   Maps absolute theme values to functional variables
   used by frontend-form.css.

   Usage: <div class="cp-form-container cp-theme-liquid">...</div>
*/

/* ---------------------------------------------------- */
/* 1. LIQUID GLASS */
/* ---------------------------------------------------- */
.cp-theme-liquid {
    /* Define Base Theme Vars */
    --cp-bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --cp-glass-bg: rgba(255, 255, 255, 0.15);
    --cp-glass-border: rgba(255, 255, 255, 0.4);
    --cp-glass-blur: 12px;
    --cp-glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
    --cp-text-main: #ffffff;
    --cp-text-muted: rgba(255, 255, 255, 0.7);
    --cp-card-radius: 20px;
    --cp-primary: #ffffff;
    --cp-btn-text: #764ba2;

    /* Map to Frontend Functional Vars */
    --cp-container-bg: var(--cp-bg-gradient);
    --cp-container-padding: 30px;
    --cp-container-border: 1px solid var(--cp-glass-border);
    --cp-container-shadow: var(--cp-glass-shadow);
    --cp-border-radius: var(--cp-card-radius);

    --cp-label-color: var(--cp-text-main);
    --cp-label-weight: bold;

    --cp-input-bg: var(--cp-glass-bg);
    --cp-input-color: var(--cp-text-main);
    --cp-input-border: 1px solid var(--cp-glass-border);
    --cp-input-placeholder: var(--cp-text-muted);

    --cp-submit-bg: var(--cp-primary);
    --cp-submit-color: var(--cp-btn-text);

    /* Glass Effect Hook */
    backdrop-filter: blur(var(--cp-glass-blur));
    -webkit-backdrop-filter: blur(var(--cp-glass-blur));
}

/* ---------------------------------------------------- */
/* 2. CRYSTAL */
/* ---------------------------------------------------- */
.cp-theme-crystal {
    --cp-bg-gradient: radial-gradient(circle at top, #eef2ff, #e0e7ff);
    --cp-glass-bg: rgba(255, 255, 255, 0.65);
    --cp-glass-border: rgba(255, 255, 255, 0.9);
    --cp-glass-blur: 20px;
    --cp-glass-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    --cp-text-main: #1e293b;
    --cp-text-muted: #64748b;
    --cp-card-radius: 24px;
    --cp-primary: #3b82f6;
    --cp-btn-text: #ffffff;

    /* Functional Mapping */
    --cp-container-bg: var(--cp-bg-gradient);
    --cp-container-padding: 30px;
    --cp-container-border: 1px solid var(--cp-glass-border);
    --cp-container-shadow: var(--cp-glass-shadow);
    --cp-border-radius: var(--cp-card-radius);

    --cp-label-color: var(--cp-text-main);
    --cp-label-weight: bold;

    --cp-input-bg: var(--cp-glass-bg);
    --cp-input-color: var(--cp-text-main);
    --cp-input-border: 1px solid var(--cp-glass-border);

    --cp-submit-bg: var(--cp-primary);
    --cp-submit-color: var(--cp-btn-text);

    backdrop-filter: blur(var(--cp-glass-blur));
    -webkit-backdrop-filter: blur(var(--cp-glass-blur));
}

/* ---------------------------------------------------- */
/* 3. PRISM */
/* ---------------------------------------------------- */
.cp-theme-prism {
    --cp-bg-gradient: #0f172a;
    --cp-glass-bg: rgba(15, 23, 42, 0.6);
    --cp-glass-border: rgba(255, 255, 255, 0.1);
    --cp-glass-blur: 16px;
    --cp-glass-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    --cp-text-main: #ffffff;
    --cp-text-muted: #94a3b8;
    --cp-card-radius: 16px;
    --cp-primary: #a855f7;
    --cp-btn-text: #ffffff;

    /* Functional Mapping */
    --cp-container-bg: var(--cp-bg-gradient);
    --cp-container-padding: 25px;
    --cp-container-border: 1px solid var(--cp-glass-border);
    --cp-container-shadow: var(--cp-glass-shadow);
    --cp-border-radius: var(--cp-card-radius);

    --cp-label-color: var(--cp-text-main);
    --cp-label-weight: bold;

    --cp-input-bg: var(--cp-glass-bg);
    --cp-input-color: var(--cp-text-main);
    --cp-input-border: 1px solid var(--cp-glass-border);

    --cp-submit-bg: var(--cp-primary);
    --cp-submit-color: var(--cp-btn-text);

    backdrop-filter: blur(var(--cp-glass-blur));
    -webkit-backdrop-filter: blur(var(--cp-glass-blur));
}

/* ---------------------------------------------------- */
/* 4. FROSTED */
/* ---------------------------------------------------- */
.cp-theme-frosted {
    --cp-bg-gradient: #f1f5f9;
    --cp-glass-bg: rgba(255, 255, 255, 0.8);
    --cp-glass-border: transparent;
    --cp-glass-blur: 40px;
    --cp-glass-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    --cp-text-main: #0f172a;
    --cp-text-muted: #64748b;
    --cp-card-radius: 12px;
    --cp-primary: #000000;
    --cp-btn-text: #ffffff;

    /* Functional Mapping */
    --cp-container-bg: var(--cp-bg-gradient);
    --cp-container-padding: 20px;
    --cp-container-border: none;
    --cp-container-shadow: var(--cp-glass-shadow);
    --cp-border-radius: var(--cp-card-radius);

    --cp-label-color: var(--cp-text-main);
    --cp-label-weight: 600;

    --cp-input-bg: var(--cp-glass-bg);
    --cp-input-color: var(--cp-text-main);
    --cp-input-border: 1px solid #cbd5e1;

    --cp-submit-bg: var(--cp-primary);
    --cp-submit-color: var(--cp-btn-text);

    backdrop-filter: blur(var(--cp-glass-blur));
    -webkit-backdrop-filter: blur(var(--cp-glass-blur));
}

/* ---------------------------------------------------- */
/* 5. MIDNIGHT */
/* ---------------------------------------------------- */
.cp-theme-midnight {
    --cp-bg-gradient: linear-gradient(to bottom, #0f172a, #1e293b);
    --cp-glass-bg: #1e293b;
    --cp-glass-border: #334155;
    --cp-glass-blur: 0px;
    --cp-glass-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    --cp-text-main: #f8fafc;
    --cp-text-muted: #94a3b8;
    --cp-card-radius: 8px;
    --cp-primary: #3b82f6;
    --cp-btn-text: #ffffff;

    /* Functional Mapping */
    --cp-container-bg: var(--cp-bg-gradient);
    --cp-container-padding: 20px;
    --cp-container-border: 1px solid var(--cp-glass-border);
    --cp-container-shadow: var(--cp-glass-shadow);
    --cp-border-radius: var(--cp-card-radius);

    --cp-label-color: var(--cp-text-main);
    --cp-label-weight: 500;

    --cp-input-bg: var(--cp-glass-bg);
    --cp-input-color: var(--cp-text-main);
    --cp-input-border: 1px solid var(--cp-glass-border);

    --cp-submit-bg: var(--cp-primary);
    --cp-submit-color: var(--cp-btn-text);
}

/* ---------------------------------------------------- */
/* 6. OBSIDIAN */
/* ---------------------------------------------------- */
.cp-theme-obsidian {
    --cp-bg-gradient: #000000;
    --cp-glass-bg: #111111;
    --cp-glass-border: #333333;
    --cp-glass-blur: 0px;
    --cp-glass-shadow: none;
    --cp-text-main: #e5e5e5;
    --cp-text-muted: #737373;
    --cp-card-radius: 12px;
    --cp-primary: #ffffff;
    --cp-btn-text: #000000;

    /* Functional Mapping */
    --cp-container-bg: var(--cp-bg-gradient);
    --cp-container-padding: 24px;
    --cp-container-border: 1px solid var(--cp-glass-border);
    --cp-container-shadow: none;
    --cp-border-radius: var(--cp-card-radius);

    --cp-label-color: var(--cp-text-main);
    --cp-label-weight: bold;

    --cp-input-bg: var(--cp-glass-bg);
    --cp-input-color: var(--cp-text-main);
    --cp-input-border: 1px solid var(--cp-glass-border);

    --cp-submit-bg: var(--cp-primary);
    --cp-submit-color: var(--cp-btn-text);
}

/* ---------------------------------------------------- */
/* 7. NEON */
/* ---------------------------------------------------- */
.cp-theme-neon {
    --cp-bg-gradient: radial-gradient(circle at 50% 50%, #1a0b2e, #000000);
    --cp-glass-bg: rgba(20, 10, 30, 0.7);
    --cp-glass-border: #ff00ff;
    --cp-glass-blur: 10px;
    --cp-glass-shadow: 0 0 15px rgba(255, 0, 255, 0.3);
    --cp-text-main: #ffffff;
    --cp-text-muted: #d1d5db;
    --cp-card-radius: 16px;
    --cp-primary: #00ffff;
    --cp-btn-text: #000000;

    /* Functional Mapping */
    --cp-container-bg: var(--cp-bg-gradient);
    --cp-container-padding: 30px;
    --cp-container-border: 1px solid var(--cp-glass-border);
    --cp-container-shadow: var(--cp-glass-shadow);
    --cp-border-radius: var(--cp-card-radius);

    --cp-label-color: var(--cp-text-main);
    --cp-label-weight: bold;

    --cp-input-bg: var(--cp-glass-bg);
    --cp-input-color: var(--cp-text-main);
    --cp-input-border: 1px solid var(--cp-glass-border);

    --cp-submit-bg: var(--cp-primary);
    --cp-submit-color: var(--cp-btn-text);
}

/* ---------------------------------------------------- */
/* 8. CYBERPUNK */
/* ---------------------------------------------------- */
.cp-theme-cyberpunk {
    --cp-bg-gradient: repeating-linear-gradient(45deg, #facc15 0, #facc15 10px, #eab308 10px, #eab308 20px);
    --cp-glass-bg: #18181b;
    --cp-glass-border: #facc15;
    --cp-glass-blur: 0px;
    --cp-glass-shadow: 10px 10px 0px #000000;
    --cp-text-main: #facc15;
    --cp-text-muted: #ffffff;
    --cp-card-radius: 0px;
    --cp-primary: #facc15;
    --cp-btn-text: #000000;

    /* Functional Mapping */
    --cp-container-bg: var(--cp-bg-gradient);
    --cp-container-padding: 24px;
    --cp-container-border: 2px solid var(--cp-glass-border);
    --cp-container-shadow: var(--cp-glass-shadow);
    --cp-border-radius: var(--cp-card-radius);

    --cp-label-color: var(--cp-text-main);
    --cp-label-weight: 800;

    --cp-input-bg: var(--cp-glass-bg);
    --cp-input-color: var(--cp-text-main);
    --cp-input-border: 1px solid var(--cp-glass-border);

    --cp-submit-bg: var(--cp-primary);
    --cp-submit-color: var(--cp-btn-text);
}

/* ---------------------------------------------------- */
/* 9. CORPORATE */
/* ---------------------------------------------------- */
.cp-theme-corporate {
    --cp-bg-gradient: #f0f4f8;
    --cp-glass-bg: #ffffff;
    --cp-glass-border: #d9e2ec;
    --cp-glass-blur: 0px;
    --cp-glass-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    --cp-text-main: #102a43;
    --cp-text-muted: #486581;
    --cp-card-radius: 4px;
    --cp-primary: #0052cc;
    --cp-btn-text: #ffffff;

    /* Functional Mapping */
    --cp-container-bg: var(--cp-bg-gradient);
    --cp-container-padding: 24px;
    --cp-container-border: 1px solid var(--cp-glass-border);
    --cp-container-shadow: var(--cp-glass-shadow);
    --cp-border-radius: var(--cp-card-radius);

    --cp-label-color: var(--cp-text-main);
    --cp-label-weight: 600;

    --cp-input-bg: var(--cp-glass-bg);
    --cp-input-color: var(--cp-text-main);
    --cp-input-border: 1px solid var(--cp-glass-border);

    --cp-submit-bg: var(--cp-primary);
    --cp-submit-color: var(--cp-btn-text);
}

/* ---------------------------------------------------- */
/* 10. SLATE */
/* ---------------------------------------------------- */
.cp-theme-slate {
    --cp-bg-gradient: #f8fafc;
    --cp-glass-bg: #f1f5f9;
    --cp-glass-border: #e2e8f0;
    --cp-glass-blur: 0;
    --cp-glass-shadow: none;
    --cp-text-main: #334155;
    --cp-text-muted: #94a3b8;
    --cp-card-radius: 8px;
    --cp-primary: #475569;
    --cp-btn-text: #ffffff;

    /* Functional Mapping */
    --cp-container-bg: var(--cp-bg-gradient);
    --cp-container-padding: 24px;
    --cp-container-border: 1px solid var(--cp-glass-border);
    --cp-container-shadow: none;
    --cp-border-radius: var(--cp-card-radius);

    --cp-label-color: var(--cp-text-main);
    --cp-label-weight: 500;

    --cp-input-bg: #ffffff;
    --cp-input-color: var(--cp-text-main);
    --cp-input-border: 1px solid var(--cp-glass-border);

    --cp-submit-bg: var(--cp-primary);
    --cp-submit-color: var(--cp-btn-text);
}

/* ---------------------------------------------------- */
/* 11. CERAMIC */
/* ---------------------------------------------------- */
.cp-theme-ceramic {
    --cp-bg-gradient: #e0e5ec;
    --cp-glass-bg: #e0e5ec;
    --cp-glass-border: transparent;
    --cp-glass-blur: 0;
    --cp-glass-shadow: 9px 9px 16px rgb(163, 177, 198), -9px -9px 16px rgba(255, 255, 255, 0.5);
    --cp-text-main: #4a5568;
    --cp-text-muted: #718096;
    --cp-card-radius: 20px;
    --cp-primary: #a0aec0;
    --cp-btn-text: #2d3748;

    /* Functional Mapping */
    --cp-container-bg: var(--cp-bg-gradient);
    --cp-container-padding: 24px;
    --cp-container-border: none;
    --cp-container-shadow: var(--cp-glass-shadow);
    --cp-border-radius: var(--cp-card-radius);

    --cp-label-color: var(--cp-text-main);
    --cp-label-weight: 600;

    --cp-input-bg: var(--cp-glass-bg);
    --cp-input-color: var(--cp-text-main);
    /* Inset shadow for inputs for neumorphism */
    --cp-input-border: none;

    --cp-submit-bg: var(--cp-primary);
    --cp-submit-color: var(--cp-btn-text);
}

/* Special Fix for Ceramic Inputs */
.cp-theme-ceramic .cp-form-control {
    box-shadow: inset 5px 5px 10px #b8b9be, inset -5px -5px 10px #ffffff;
}

/* ---------------------------------------------------- */
/* 12. MINIMAL */
/* ---------------------------------------------------- */
.cp-theme-minimal {
    --cp-bg-gradient: #ffffff;
    --cp-glass-bg: #ffffff;
    --cp-glass-border: #000000;
    --cp-glass-blur: 0;
    --cp-glass-shadow: none;
    --cp-text-main: #000000;
    --cp-text-muted: #666666;
    --cp-card-radius: 0;
    --cp-primary: #000000;
    --cp-btn-text: #ffffff;

    /* Functional Mapping */
    --cp-container-bg: var(--cp-bg-gradient);
    --cp-container-padding: 20px;
    --cp-container-border: 1px solid var(--cp-glass-border);
    --cp-container-shadow: none;
    --cp-border-radius: 0;

    --cp-label-color: var(--cp-text-main);
    --cp-label-weight: normal;
    text-transform: uppercase;
    letter-spacing: 1px;

    --cp-input-bg: var(--cp-glass-bg);
    --cp-input-color: var(--cp-text-main);
    --cp-input-border: 1px solid var(--cp-glass-border);

    --cp-submit-bg: var(--cp-primary);
    --cp-submit-color: var(--cp-btn-text);
}

/* ---------------------------------------------------- */
/* 13. AURORA */
/* ---------------------------------------------------- */
.cp-theme-aurora {
    --cp-bg-gradient: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
    --cp-glass-bg: rgba(255, 255, 255, 0.5);
    --cp-glass-border: rgba(255, 255, 255, 0.6);
    --cp-glass-blur: 24px;
    --cp-glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
    --cp-text-main: #4a1d96;
    --cp-text-muted: #6b46c1;
    --cp-card-radius: 24px;
    --cp-primary: #805ad5;
    --cp-btn-text: #ffffff;

    /* Functional Mapping */
    --cp-container-bg: var(--cp-bg-gradient);
    --cp-container-padding: 30px;
    --cp-container-border: 1px solid var(--cp-glass-border);
    --cp-container-shadow: var(--cp-glass-shadow);
    --cp-border-radius: var(--cp-card-radius);

    --cp-label-color: var(--cp-text-main);
    --cp-label-weight: 600;

    --cp-input-bg: var(--cp-glass-bg);
    --cp-input-color: var(--cp-text-main);
    --cp-input-border: 1px solid var(--cp-glass-border);

    --cp-submit-bg: var(--cp-primary);
    --cp-submit-color: var(--cp-btn-text);

    backdrop-filter: blur(var(--cp-glass-blur));
    -webkit-backdrop-filter: blur(var(--cp-glass-blur));
}

/* ---------------------------------------------------- */
/* 14. SUNSET */
/* ---------------------------------------------------- */
.cp-theme-sunset {
    --cp-bg-gradient: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
    --cp-glass-bg: rgba(255, 255, 255, 0.7);
    --cp-glass-border: rgba(255, 255, 255, 0.8);
    --cp-glass-blur: 10px;
    --cp-glass-shadow: 0 4px 6px rgba(255, 120, 80, 0.2);
    --cp-text-main: #9a3412;
    --cp-text-muted: #c2410c;
    --cp-card-radius: 16px;
    --cp-primary: #ea580c;
    --cp-btn-text: #ffffff;

    /* Functional Mapping */
    --cp-container-bg: var(--cp-bg-gradient);
    --cp-container-padding: 30px;
    --cp-container-border: 1px solid var(--cp-glass-border);
    --cp-container-shadow: var(--cp-glass-shadow);
    --cp-border-radius: var(--cp-card-radius);

    --cp-label-color: var(--cp-text-main);
    --cp-label-weight: 600;

    --cp-input-bg: var(--cp-glass-bg);
    --cp-input-color: var(--cp-text-main);
    --cp-input-border: 1px solid var(--cp-glass-border);

    --cp-submit-bg: var(--cp-primary);
    --cp-submit-color: var(--cp-btn-text);

    backdrop-filter: blur(var(--cp-glass-blur));
    -webkit-backdrop-filter: blur(var(--cp-glass-blur));
}

/* ---------------------------------------------------- */
/* 15. OCEAN */
/* ---------------------------------------------------- */
.cp-theme-ocean {
    --cp-bg-gradient: linear-gradient(to top, #00c6fb 0%, #005bea 100%);
    --cp-glass-bg: rgba(255, 255, 255, 0.2);
    --cp-glass-border: rgba(255, 255, 255, 0.3);
    --cp-glass-blur: 15px;
    --cp-glass-shadow: 0 8px 32px rgba(0, 50, 100, 0.2);
    --cp-text-main: #ffffff;
    --cp-text-muted: #e0f2fe;
    --cp-card-radius: 20px;
    --cp-primary: #ffffff;
    --cp-btn-text: #0284c7;

    /* Functional Mapping */
    --cp-container-bg: var(--cp-bg-gradient);
    --cp-container-padding: 30px;
    --cp-container-border: 1px solid var(--cp-glass-border);
    --cp-container-shadow: var(--cp-glass-shadow);
    --cp-border-radius: var(--cp-card-radius);

    --cp-label-color: var(--cp-text-main);
    --cp-label-weight: 600;

    --cp-input-bg: var(--cp-glass-bg);
    --cp-input-color: var(--cp-text-main);
    --cp-input-border: 1px solid var(--cp-glass-border);

    --cp-submit-bg: var(--cp-primary);
    --cp-submit-color: var(--cp-btn-text);

    backdrop-filter: blur(var(--cp-glass-blur));
    -webkit-backdrop-filter: blur(var(--cp-glass-blur));
}

/* ---------------------------------------------------- */
/* 16. FOREST */
/* ---------------------------------------------------- */
.cp-theme-forest {
    --cp-bg-gradient: linear-gradient(135deg, #134e4a 0%, #064e3b 100%);
    --cp-glass-bg: rgba(20, 83, 45, 0.6);
    --cp-glass-border: rgba(255, 255, 255, 0.1);
    --cp-glass-blur: 12px;
    --cp-glass-shadow: 0 10px 15px rgba(0, 0, 0, 0.3);
    --cp-text-main: #ecfdf5;
    --cp-text-muted: #a7f3d0;
    --cp-card-radius: 12px;
    --cp-primary: #10b981;
    --cp-btn-text: #ffffff;

    /* Functional Mapping */
    --cp-container-bg: var(--cp-bg-gradient);
    --cp-container-padding: 24px;
    --cp-container-border: 1px solid var(--cp-glass-border);
    --cp-container-shadow: var(--cp-glass-shadow);
    --cp-border-radius: var(--cp-card-radius);

    --cp-label-color: var(--cp-text-main);
    --cp-label-weight: 500;

    --cp-input-bg: var(--cp-glass-bg);
    --cp-input-color: var(--cp-text-main);
    --cp-input-border: 1px solid var(--cp-glass-border);

    --cp-submit-bg: var(--cp-primary);
    --cp-submit-color: var(--cp-btn-text);
}

/* ---------------------------------------------------- */
/* 17. GOLD */
/* ---------------------------------------------------- */
.cp-theme-gold {
    --cp-bg-gradient: #111111;
    --cp-glass-bg: #1c1c1c;
    --cp-glass-border: #bf953f;
    --cp-glass-blur: 0px;
    --cp-glass-shadow: 0 4px 10px rgba(191, 149, 63, 0.3);
    --cp-text-main: #bf953f;
    --cp-text-muted: #aa863a;
    --cp-card-radius: 8px;
    --cp-primary: #bf953f;
    --cp-btn-text: #000000;

    /* Functional Mapping */
    --cp-container-bg: var(--cp-bg-gradient);
    --cp-container-padding: 20px;
    --cp-container-border: 1px solid var(--cp-glass-border);
    --cp-container-shadow: var(--cp-glass-shadow);
    --cp-border-radius: var(--cp-card-radius);

    --cp-label-color: var(--cp-text-main);
    --cp-label-weight: bold;

    --cp-input-bg: var(--cp-glass-bg);
    --cp-input-color: var(--cp-text-main);
    --cp-input-border: 1px solid var(--cp-glass-border);

    --cp-submit-bg: var(--cp-primary);
    --cp-submit-color: var(--cp-btn-text);
}

/* ---------------------------------------------------- */
/* 18. ROYAL */
/* ---------------------------------------------------- */
.cp-theme-royal {
    --cp-bg-gradient: #2e1065;
    --cp-glass-bg: #4c1d95;
    --cp-glass-border: #6d28d9;
    --cp-glass-blur: 0px;
    --cp-glass-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    --cp-text-main: #f3e8ff;
    --cp-text-muted: #d8b4fe;
    --cp-card-radius: 16px;
    --cp-primary: #d8b4fe;
    --cp-btn-text: #4c1d95;

    /* Functional Mapping */
    --cp-container-bg: var(--cp-bg-gradient);
    --cp-container-padding: 30px;
    --cp-container-border: 1px solid var(--cp-glass-border);
    --cp-container-shadow: var(--cp-glass-shadow);
    --cp-border-radius: var(--cp-card-radius);

    --cp-label-color: var(--cp-text-main);
    --cp-label-weight: 500;

    --cp-input-bg: var(--cp-glass-bg);
    --cp-input-color: var(--cp-text-main);
    --cp-input-border: 1px solid var(--cp-glass-border);

    --cp-submit-bg: var(--cp-primary);
    --cp-submit-color: var(--cp-btn-text);
}

/* ---------------------------------------------------- */
/* 19. PEARL */
/* ---------------------------------------------------- */
.cp-theme-pearl {
    --cp-bg-gradient: linear-gradient(135deg, #fff1eb 0%, #ace0f9 100%);
    --cp-glass-bg: rgba(255, 255, 255, 0.4);
    --cp-glass-border: rgba(255, 255, 255, 0.8);
    --cp-glass-blur: 24px;
    --cp-glass-shadow: 0 10px 30px rgba(179, 206, 230, 0.5);
    --cp-text-main: #475569;
    --cp-text-muted: #64748b;
    --cp-card-radius: 30px;
    --cp-primary: #ffffff;
    --cp-btn-text: #0ea5e9;

    /* Functional Mapping */
    --cp-container-bg: var(--cp-bg-gradient);
    --cp-container-padding: 30px;
    --cp-container-border: 1px solid var(--cp-glass-border);
    --cp-container-shadow: var(--cp-glass-shadow);
    --cp-border-radius: var(--cp-card-radius);

    --cp-label-color: var(--cp-text-main);
    --cp-label-weight: 600;

    --cp-input-bg: var(--cp-glass-bg);
    --cp-input-color: var(--cp-text-main);
    --cp-input-border: 1px solid var(--cp-glass-border);

    --cp-submit-bg: var(--cp-primary);
    --cp-submit-color: var(--cp-btn-text);

    backdrop-filter: blur(var(--cp-glass-blur));
    -webkit-backdrop-filter: blur(var(--cp-glass-blur));
}

/* ---------------------------------------------------- */
/* 20. COFFEE */
/* ---------------------------------------------------- */
.cp-theme-coffee {
    --cp-bg-gradient: #3f2e21;
    --cp-glass-bg: #5d4037;
    --cp-glass-border: #795548;
    --cp-glass-blur: 0px;
    --cp-glass-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
    --cp-text-main: #efebe9;
    --cp-text-muted: #bcaaa4;
    --cp-card-radius: 12px;
    --cp-primary: #d7ccc8;
    --cp-btn-text: #3e2723;

    /* Functional Mapping */
    --cp-container-bg: var(--cp-bg-gradient);
    --cp-container-padding: 20px;
    --cp-container-border: 1px solid var(--cp-glass-border);
    --cp-container-shadow: var(--cp-glass-shadow);
    --cp-border-radius: var(--cp-card-radius);

    --cp-label-color: var(--cp-text-main);
    --cp-label-weight: normal;

    --cp-input-bg: var(--cp-glass-bg);
    --cp-input-color: var(--cp-text-main);
    --cp-input-border: 1px solid var(--cp-glass-border);

    --cp-submit-bg: var(--cp-primary);
    --cp-submit-color: var(--cp-btn-text);
}