@font-face {
    font-family: 'Alvarado';
    src: url('/static/fonts/Alvarado-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Alvarado';
    src: url('/static/fonts/Alvarado-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Alvarado';
    src: url('/static/fonts/Alvarado-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Alvarado';
    src: url('/static/fonts/Alvarado-RegularItalic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Alvarado';
    src: url('/static/fonts/Alvarado-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Alvarado';
    src: url('/static/fonts/Alvarado-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Alvarado';
    src: url('/static/fonts/Alvarado-BoldItalic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
}

:root {
    --gd-bg: #000000;
    --gd-surface: #070707;
    --gd-surface-2: #111111;
    --gd-surface-3: #1a1a1a;
    --gd-text: #ffffff;
    --gd-muted: #d0d0d0;
    --gd-border: #555555;
    --gd-border-soft: rgba(85, 85, 85, 0.6);
    --gd-focus: rgba(255, 255, 255, 0.22);
}

html,
body {
    background: var(--gd-bg) !important;
    background-color: var(--gd-bg) !important;
    background-image: none !important;
    color: var(--gd-text) !important;
    font-family: 'Alvarado', Georgia, serif !important;
}

body,
button,
input,
select,
textarea,
a,
label,
p,
h1,
h2,
h3,
h4,
h5,
h6,
span,
div {
    font-family: 'Alvarado', Georgia, serif !important;
}

a,
nav a,
.header-links a,
.form-links a,
.footer-links a {
    color: var(--gd-text) !important;
}

header,
footer,
.dashboard-header,
.main-header,
.header-content,
.sidebar,
.toolbar,
.properties-panel,
.profile-menu .dropdown-content,
.menu-dropdown-content,
.tool-submenu,
.shape-select-content,
.pulldown-content,
.auth-container,
.signup-container,
.verify-container,
.card,
.project-card,
.project-info,
.feature-card,
.benefit-item,
.cta-section,
.features,
.showcase,
.how-it-works,
.hero {
    background: var(--gd-bg) !important;
    background-color: var(--gd-bg) !important;
    background-image: none !important;
    color: var(--gd-text) !important;
    border-color: var(--gd-border-soft) !important;
    box-shadow: none !important;
}

.hero::before,
.cta-section::before,
.features::before,
.how-it-works::before {
    background: none !important;
    background-image: none !important;
}

.auth-container,
.signup-container,
.verify-container,
.project-card,
.feature-card,
.benefit-item {
    border: 1px solid var(--gd-border-soft) !important;
}

.signup-benefits .benefit-item {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.tutorials-button:hover {
    color: #000 !important;
}

.hero-image img,
.project-preview,
#preview-canvas {
    background: var(--gd-bg) !important;
    background-color: var(--gd-bg) !important;
    border: 1px solid var(--gd-border-soft) !important;
    box-shadow: none !important;
}

.feature-icon,
.step-number,
.error-icon {
    background: var(--gd-bg) !important;
    background-color: var(--gd-bg) !important;
    background-image: none !important;
    border: 1px solid var(--gd-border) !important;
    color: var(--gd-text) !important;
}

.projects-list {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
}

.project-item {
    width: min(180px, 100%) !important;
    box-sizing: border-box !important;
    padding: 6px 8px !important;
    margin-bottom: 0 !important;
    border: 1px solid var(--gd-border-soft) !important;
    border-radius: 6px !important;
    color: var(--gd-text) !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
}

.project-item h3,
.project-item p {
    margin: 0 !important;
    color: inherit !important;
    line-height: 1.15 !important;
}

.project-item h3 {
    font-size: 13px !important;
    font-weight: 600 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.project-item p {
    margin-top: 3px !important;
    font-size: 10px !important;
    opacity: 0.75 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.project-item:hover {
    background-color: var(--gd-surface-2) !important;
    transform: none !important;
}

.project-item.active,
.project-item.active:hover,
.project-item.active:focus {
    background: var(--gd-text) !important;
    background-color: var(--gd-text) !important;
    color: var(--gd-bg) !important;
    border-color: var(--gd-text) !important;
    font-weight: 600 !important;
    transform: none !important;
}

.project-item.active h3,
.project-item.active p,
.project-item.active:hover h3,
.project-item.active:hover p,
.project-item.active:focus h3,
.project-item.active:focus p {
    color: var(--gd-bg) !important;
}

button,
.btn,
.btn-primary,
.btn-secondary,
.sign-up,
.sign-in,
.dropdown-toggle,
.toolbar button,
.toolbar-button,
.submenu-button,
.menu-button,
.project-actions button {
    background: var(--gd-bg) !important;
    background-color: var(--gd-bg) !important;
    background-image: none !important;
    border: 1px solid var(--gd-border) !important;
    color: var(--gd-text) !important;
    box-shadow: none !important;
}

button:hover,
.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.sign-up:hover,
.dropdown-toggle:hover,
.toolbar button:hover,
.submenu-button:hover,
.menu-button:hover {
    background: var(--gd-text) !important;
    color: var(--gd-bg) !important;
}

/* The timeline resize handle is a grab strip, not a themed button:
   keep its outline black and don't invert it on hover. */
.timeline-resize-handle,
.timeline-resize-handle:hover {
    background: var(--gd-bg) !important;
    border-color: #000000 !important;
}

/* Submenu rows share the hover look for their touch-highlight and
   selected states so every tool submenu behaves identically. */
.submenu-button.hover-active,
.submenu-button.active {
    background: var(--gd-text) !important;
    background-color: var(--gd-text) !important;
    color: var(--gd-bg) !important;
}

.auth-buttons .sign-in {
    background: rgba(255, 255, 255, 0.08) !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.32) !important;
    color: var(--gd-text) !important;
}

.auth-buttons .sign-in:hover {
    background: rgba(255, 255, 255, 0.16) !important;
    background-color: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(255, 255, 255, 0.58) !important;
    color: var(--gd-text) !important;
}

.auth-buttons .sign-up {
    background: var(--gd-text) !important;
    background-color: var(--gd-text) !important;
    border-color: var(--gd-text) !important;
    color: var(--gd-bg) !important;
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.18) !important;
}

.auth-buttons .sign-up:hover {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--gd-text) !important;
}

button.active,
.toolbar button.active,
.submenu-button.active,
.active-gravity {
    background: var(--gd-text) !important;
    color: var(--gd-bg) !important;
    border-color: var(--gd-text) !important;
}

#gravity-switch + .toggle-label,
.toggle-label {
    background-color: var(--gd-bg) !important;
    background-image: none !important;
    border: 1px solid var(--gd-border) !important;
}

#gravity-switch + .toggle-label::before,
.toggle-label::before {
    background-color: var(--gd-text) !important;
}

#gravity-switch:checked + .toggle-label,
.toggle-switch input:checked + .toggle-label,
input:checked + .toggle-label {
    background: var(--gd-text) !important;
    background-color: var(--gd-text) !important;
    background-image: none !important;
    border-color: var(--gd-text) !important;
}

#gravity-switch:checked + .toggle-label::before,
.toggle-switch input:checked + .toggle-label::before,
input:checked + .toggle-label::before {
    background-color: var(--gd-bg) !important;
}

#gravity-switch:checked + .toggle-label .toggle-button,
.toggle-switch input:checked + .toggle-label .toggle-button,
input:checked + .toggle-label .toggle-button {
    background-color: var(--gd-bg) !important;
}

input,
select,
textarea {
    background: var(--gd-bg) !important;
    background-color: var(--gd-bg) !important;
    border: 1px solid var(--gd-border) !important;
    color: var(--gd-text) !important;
    box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--gd-text) !important;
    box-shadow: 0 0 0 3px var(--gd-focus) !important;
    outline: none !important;
}

input::placeholder,
textarea::placeholder,
.muted,
.text-muted,
.auth-header p,
.hero-text p,
.feature-card p,
.benefit-text p,
.divider,
.project-date {
    color: var(--gd-muted) !important;
}

.feature-card p {
    color: var(--gd-text) !important;
}

.password-requirements {
    color: var(--gd-text) !important;
}

.divider::before,
.divider::after {
    background-color: var(--gd-border-soft) !important;
}

.main-container,
.canvas-container {
    background: var(--gd-bg) !important;
    background-color: var(--gd-bg) !important;
}

#canvas {
    background-color: var(--gd-bg);
}

.canvas-container {
    border-color: var(--gd-border-soft) !important;
}

.properties-panel,
.toolbar {
    border-color: var(--gd-border-soft) !important;
}

.properties-panel input[type="color"],
input[type="color"] {
    background: var(--gd-bg) !important;
    border-color: var(--gd-border) !important;
}

.alert {
    background: var(--gd-surface-2) !important;
    border: 1px solid var(--gd-border-soft) !important;
    color: var(--gd-text) !important;
}

svg,
img {
    color: var(--gd-text);
}