:root, .light {
  --color-primary: #1A8FE3;
  --color-primary-dim: #1577C0;
  --color-primary-text: #0E6BAF;
  --color-background: #ffffff;
  --color-on-background: #0A1628;
  --color-surface: #ffffff;
  --color-on-surface: #0A1628;
  --color-surface-dim: #E8EDF4;
  --color-surface-container: #F0F3F8;
  --color-surface-container-low: #F5F7FB;
  --color-surface-container-high: #E8EDF4;
  --color-on-surface-variant: #3B4859;
  --color-outline: #6B7B8D;
  --color-outline-variant: #C0C8D4;
}

.dark {
  --color-primary: #6ad6ff;
  --color-primary-dim: #3bbfee;
  --color-primary-text: #8de3ff;
  --color-background: #0a0f13;
  --color-on-background: #f1f4fa;
  --color-surface: #0a0f13;
  --color-on-surface: #f1f4fa;
  --color-surface-dim: #0f151a;
  --color-surface-container: #151a1f;
  --color-surface-container-low: #0f151a;
  --color-surface-container-high: #1c2530;
  --color-on-surface-variant: #a8abb1;
  --color-outline: #6B7B8D;
  --color-outline-variant: #3B4859;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.tech-gradient {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dim) 100%);
}

.glass-panel {
    backdrop-filter: blur(12px);
    border: 1px solid rgba(26, 143, 227, 0.1);
}

.circuit-bg {
    background-image: radial-gradient(circle at 2px 2px, rgba(26, 143, 227, 0.05) 1px, transparent 0);
    background-size: 24px 24px;
}

/* CMS Styles */
.cms-editable {
    position: relative;
    outline: 2px dashed transparent;
    transition: outline 0.2s;
}

.cms-editable:hover {
    outline: 2px dashed var(--color-primary);
}

/* Edit button shown only to admins */
.cms-edit-btn {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--color-primary);
    color: #000;
    font-size: 12px;
    padding: 2px 6px;
    z-index: 100;
    cursor: pointer;
    display: none;
    border-radius: 4px;
    transform: translate(50%, -50%);
}

.cms-editable:hover .cms-edit-btn {
    display: block;
}

/* CMS Modal */
#cms-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(4px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

#cms-modal.active {
    display: flex;
}

.cms-modal-content {
    background: var(--color-surface);
    color: var(--color-on-surface);
    padding: 24px;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    border: 1px solid var(--color-primary);
}

.cms-modal-content textarea {
    width: 100%;
    height: 150px;
    margin: 16px 0;
    background: var(--color-surface-container-low);
    color: var(--color-on-surface);
    border: 1px solid var(--color-outline);
    padding: 8px;
    border-radius: 4px;
}