/* =============================================
   THE CONSTANTINOPLE — Base Stylesheet
   Core Layout, Variables, Dark/Light Mode
   ============================================= */

/* ---------- CSS Custom Properties (Light Mode — Default) ---------- */
:root {
    /* Brand Colors */
    --gold-primary: #c9a84c;
    --gold-light: #e2cc7a;
    --gold-dark: #8a6d1b;
    --ivory: #fefdf5;

    /* Semantic Colors */
    --bg-primary: #fefdf5;
    --bg-secondary: #f8f4e8;
    --bg-card: #faf6ee;
    --bg-nav: rgba(30, 100, 200, 0.3);
    --bg-footer: #1a1a2e;

    /* Text Colors */
    --text-dark: #2c2418;
    --text-mid: #5a4e3f;
    --text-light: rgba(255, 255, 255, 0.9);

    /* Borders & Shadows */
    --border-gold: rgba(201, 168, 76, 0.25);
    --border-card: #b8860b;
    --shadow-soft: rgba(0, 0, 0, 0.08);
    --shadow-gold: rgba(201, 168, 76, 0.3);

    /* Status Colors */
    --color-success: #2ecc71;
    --color-success-dark: #27ae60;
    --color-error: #e74c3c;
    --color-error-bg: rgba(231, 76, 60, 0.1);
    --color-error-border: rgba(231, 76, 60, 0.3);
    --color-info: #3498db;
    --color-warning: #f39c12;

    /* UI Colors */
    --color-google: #4285f4;
    --color-google-bg: #ffffff;
    --color-google-text: #444444;
    --color-google-border: #dddddd;
    --color-apple: #000000;
    --color-apple-text: #ffffff;
    --color-phone: #25D366;
    --color-divider: rgba(201, 168, 76, 0.2);
    --text-on-gold: #ffffff;
    --text-on-dark-bg: #ffffff;

    /* Hero / Section Colors */
    --hero-gradient-start: #1565c0;
    --hero-gradient-end: #e3f2fd;
    --cloud-color: #fff;
    --inv-hero-title: #f5e6c8;
    --inv-hero-subtitle: rgba(245, 230, 200, 0.65);

    /* Misc */
    --overlay-bg: rgba(10, 10, 20, 0.75);
    --cat-treasure-bg: rgba(34, 139, 34, 0.1);
    --cat-treasure-text: #2e7d32;
    --cat-mystery-bg: rgba(103, 58, 183, 0.1);
    --cat-mystery-text: #5e35b1;
    --cat-corporate-bg: rgba(30, 136, 229, 0.1);
    --cat-corporate-text: #1565c0;

    /* Typography */
    --font-hero: 'Cinzel Decorative', 'Cinzel', serif;
    --font-heading: 'Cinzel', serif;
    --font-body: 'Inter', sans-serif;
    --nav-height: 72px;

    /* Z-Index Scale */
    --z-base: 1;
    --z-sticky: 50;
    --z-fixed: 500;
    --z-navbar: 1000;
    --z-hamburger: 1001;
    --z-modal-overlay: 9999;
    --z-modal: 10000;
    --z-tab-bar: 9998;
}

/* ---------- Dark Mode ---------- */
[data-theme="dark"] {
    --bg-primary: #0d1117;
    --bg-secondary: #161b22;
    --bg-card: #1c2333;
    --bg-nav: rgba(13, 17, 23, 0.85);
    --bg-footer: #0a0e14;
    --ivory: #0d1117;

    --text-dark: #e6edf3;
    --text-mid: #a0aec0;
    --text-light: rgba(255, 255, 255, 0.95);

    --border-gold: rgba(201, 168, 76, 0.3);
    --border-card: #c9a84c;
    --shadow-soft: rgba(0, 0, 0, 0.3);
    --shadow-gold: rgba(201, 168, 76, 0.2);

    --color-success: #2ecc71;
    --color-success-dark: #27ae60;
    --color-error: #ff6b6b;
    --color-error-bg: rgba(255, 107, 107, 0.15);
    --color-error-border: rgba(255, 107, 107, 0.3);
    --color-info: #64b5f6;
    --color-warning: #ffca28;
    --color-google: #4285f4;
    --color-google-bg: #2d333b;
    --color-google-text: #e6edf3;
    --color-google-border: #444c56;
    --color-apple: #ffffff;
    --color-apple-text: #000000;
    --color-phone: #25D366;
    --color-divider: rgba(201, 168, 76, 0.25);
    --text-on-gold: #ffffff;
    --text-on-dark-bg: #ffffff;

    --hero-gradient-start: #0d1117;
    --hero-gradient-end: #161b22;
    --cloud-color: rgba(255, 255, 255, 0.05);
    --inv-hero-title: #f5e6c8;
    --inv-hero-subtitle: rgba(245, 230, 200, 0.55);

    --overlay-bg: rgba(0, 0, 0, 0.85);
    --cat-treasure-bg: rgba(34, 139, 34, 0.15);
    --cat-treasure-text: #66bb6a;
    --cat-mystery-bg: rgba(103, 58, 183, 0.15);
    --cat-mystery-text: #b39ddb;
    --cat-corporate-bg: rgba(30, 136, 229, 0.15);
    --cat-corporate-text: #64b5f6;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    color: var(--text-dark);
    background: var(--bg-primary);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.4s ease, color 0.4s ease;
}

body.no-scroll {
    overflow: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

/* ---------- Theme Toggle Button ---------- */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.theme-toggle:hover {
    border-color: var(--gold-primary);
    background: rgba(201, 168, 76, 0.15);
    transform: rotate(15deg);
}

.theme-toggle .theme-icon {
    font-size: 1.1rem;
    line-height: 1;
    transition: transform 0.4s ease, opacity 0.3s ease;
}

/* Sun/Moon transition */
[data-theme="dark"] .theme-toggle .theme-icon {
    transform: rotate(360deg);
}

/* ---------- Smooth Section Transitions ---------- */
section,
.footer {
    transition: background-color 0.4s ease;
}