/* DESIGN-R Theme: Ocean Dark */
/* Moalboal Dive Center — Navy + Yellow, dive industry */

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800&family=Poppins:wght@200;300;400;500&display=swap');

:root {
    /* Brand palette */
    --primary: #152040;
    --primary-mid: #505870;
    --primary-light: #2F4890;
    --accent: #FFDC21;
    --accent-dark: #D8B600;
    --highlight: #11A6A6;

    /* Backgrounds */
    --bg: #152040;
    --bg-alt: #0d1530;
    --bg-gradient: linear-gradient(135deg, #2F4890, #1a5a9e);
    --bg-light: #f8f8f8;

    /* Text */
    --text: #ffffff;
    --text-light: rgba(255, 255, 255, 0.85);
    --text-muted: rgba(255, 255, 255, 0.6);
    --text-strong: #ffffff;
    --text-dark: #152040;

    /* Cards */
    --card-bg: rgba(255, 255, 255, 0.05);
    --card-border: rgba(255, 255, 255, 0.15);
    --card-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);

    /* Typography */
    --font-body: 'Rubik', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-nav: 'Poppins', sans-serif;

    /* Headings */
    --heading-color: #FFDC21;
    --subheading-color: #AFBDE5;

    /* Hero */
    --hero-height: 717px;
    --hero-overlay: linear-gradient(180deg, rgba(21,32,64,0.4), rgba(21,32,64,0.5));
    --hero-title-color: #ffffff;
    --hero-subtitle-color: rgba(255, 255, 255, 0.9);

    /* Buttons */
    --btn-bg: #FFDC21;
    --btn-color: #152040;
    --btn-hover-bg: #D8B600;
    --btn-radius: 50px;

    /* Tables */
    --table-header-bg: #2F4890;
    --table-header-color: #ffffff;

    /* Forms (in light split section) */
    --form-label-color: #152040;
    --form-border: #ccc;
    --form-input-bg: #ffffff;
    --form-input-color: #333;

    /* Split contact */
    --split-info-bg: linear-gradient(135deg, #152040, #2F4890);
    --split-info-heading: #ffffff;
    --split-form-bg: #ffffff;

    /* Badge */
    --badge-bg: rgba(47, 72, 144, 0.2);

    /* Layout */
    --max-width: 1200px;
    --radius: 8px;
}

/* ── Theme-specific section variants ──────────────── */
.dr-section.dark {
    background: var(--bg);
}

.dr-section.gradient {
    background: var(--bg-gradient);
}

.dr-section.light {
    background: var(--bg-light);
    color: var(--text-dark);
}

.dr-section.light h2 {
    color: var(--primary);
}

.dr-section.light p {
    color: #444;
}