:root {
    --ccdm-bg: #121212;
    --ccdm-surface: #1b1b1b;
    --ccdm-surface-2: #232323;
    --ccdm-text: #e8e8e8;
    --ccdm-text-soft: #b9b9b9;
    --ccdm-border: #3a3a3a;
    --ccdm-link: #7cc7ff;
    --ccdm-link-hover: #a8dcff;
    --ccdm-accent: #4db6ac;
    --ccdm-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* =========================
   Base / Toggle
========================= */
.ccdm-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    background: var(--ccdm-accent);
    color: #fff;
    box-shadow: var(--ccdm-shadow);
    line-height: 1;
    padding: 0;
}

.ccdm-toggle--floating {
    position: fixed;
}

.ccdm-toggle[data-style="square"] {
    border-radius: 10px;
}

.ccdm-toggle[data-style="pill"] {
    border-radius: 999px;
}

.ccdm-toggle .ccdm-ic {
    font-size: 18px;
    line-height: 1;
}

html[data-ccdm="light"] .ccdm-ic--moon {
    display: none;
}

html[data-ccdm="dark"] .ccdm-ic--sun {
    display: none;
}

/* =========================
   Dark Mode Root
========================= */