/* Cordella Design System — Resend-style overrides */
:root {
    --bg: #000 !important;
    --fg: #fff !important;
    --gray-1: rgba(255,255,255,0.04);
    --gray-2: rgba(255,255,255,0.06);
    --gray-3: rgba(255,255,255,0.08);
    --gray-4: rgba(255,255,255,0.1);
    --gray-5: rgba(255,255,255,0.15);
    --gray-text: rgba(255,255,255,0.5);
    --gray-text-2: rgba(255,255,255,0.35);
    --accent: #00A3FF;
    --green: #22C55E;
    --red: #EF4444;
    --radius: 12px;

    /* Override old tokens */
    --navy: #fff !important;
    --black: #000 !important;
    --gold: #00A3FF !important;
    --white: #000 !important;
    --light-gray: rgba(255,255,255,0.06) !important;
    --dark-gray: rgba(255,255,255,0.15) !important;
    --pearl: #000 !important;
    --marble-light: #000 !important;
    --marble-dark: rgba(255,255,255,0.06) !important;
    --marble-medium: rgba(255,255,255,0.06) !important;
    --metallic: rgba(255,255,255,0.15) !important;
    --border: rgba(255,255,255,0.08) !important;
    --text-dark: #fff !important;
    --text-light: rgba(255,255,255,0.5) !important;
    --text-secondary: rgba(255,255,255,0.5) !important;
    --gray-light: rgba(255,255,255,0.08) !important;
    --gray-medium: rgba(255,255,255,0.15) !important;
    --error: #EF4444 !important;
    --error-red: #EF4444 !important;
    --success: #22C55E !important;
    --success-green: #22C55E !important;
    --accent-blue: #00A3FF !important;
    --warning-yellow: #F59E0B !important;
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    background: #000 !important;
    background-image: none !important;
    color: #fff !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Fix all text to white on black */
h1, h2, h3, h4, h5, h6, p, span, label, th, td, li, a, div {
    color: inherit;
}

/* Override Cormorant Garamond with Inter everywhere */
.logo, .page-title, .section-title, .header-title,
[style*="Cormorant"] {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Header overrides */
header, .topbar {
    background: rgba(0,0,0,0.8) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: none !important;
}

.logo {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #fff !important;
    letter-spacing: -0.01em !important;
}

/* Input overrides */
input, textarea, select {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-family: 'Inter', sans-serif !important;
}

input::placeholder, textarea::placeholder {
    color: rgba(255,255,255,0.35) !important;
}

input:focus, textarea:focus, select:focus {
    border-color: #00A3FF !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Button overrides */
.btn-primary, button[type="submit"], .primary-btn {
    background: #fff !important;
    color: #000 !important;
    border: none !important;
    border-radius: 8px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    transition: all 0.15s !important;
}

.btn-primary:hover, button[type="submit"]:hover, .primary-btn:hover {
    background: rgba(255,255,255,0.85) !important;
    transform: none !important;
    box-shadow: none !important;
}

.btn-secondary, .secondary-btn {
    background: transparent !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 8px !important;
}

.btn-secondary:hover, .secondary-btn:hover {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.15) !important;
}

/* Card overrides */
.card, .section, .create-link-section, .input-section, .preview-section,
.links-section, .result-section {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

/* Table overrides */
table { border-collapse: collapse; width: 100%; }
th {
    color: rgba(255,255,255,0.5) !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    font-weight: 500 !important;
}
td {
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
    color: #fff !important;
}
tr:hover td { background: rgba(255,255,255,0.02) !important; }

/* Badge overrides */
.plan-badge, .tier-badge {
    background: rgba(255,255,255,0.06) !important;
    color: rgba(255,255,255,0.5) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}

.plan-badge.paid, .tier-badge.paid {
    background: rgba(0,163,255,0.1) !important;
    color: #00A3FF !important;
    border-color: rgba(0,163,255,0.2) !important;
}

/* Link overrides */
a {
    color: #00A3FF;
    text-decoration: none;
    transition: color 0.15s;
}
a:hover { color: #fff; }

/* Back link */
.back-link, .back-btn {
    color: rgba(255,255,255,0.5) !important;
}
.back-link:hover, .back-btn:hover {
    color: #fff !important;
}

/* Footer overrides */
footer {
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    background: transparent !important;
}

/* Toast / notification overrides */
.toast, .notification {
    background: rgba(20,20,20,0.95) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: #fff !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* Color pickers should stay visible */
input[type="color"] {
    background: transparent !important;
}

/* Select dropdown arrow fix for dark bg */
select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='rgba(255,255,255,0.5)'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    padding-right: 36px !important;
}

/* ===== DASHBOARD OVERRIDES ===== */

/* Tab navigation */
.tab-navigation {
    background: rgba(0,0,0,0.6) !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.tab-btn {
    color: rgba(255,255,255,0.4) !important;
    border-bottom-color: transparent !important;
    background: none !important;
}

.tab-btn:hover {
    color: #fff !important;
    background: rgba(255,255,255,0.04) !important;
}

.tab-btn.active {
    color: #fff !important;
    border-bottom-color: #00A3FF !important;
}

/* Tab content */
.tab-content {
    background: rgba(255,255,255,0.02) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    box-shadow: none !important;
}

/* Template cards */
.template-card {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: none !important;
}

.template-card:hover {
    background: rgba(255,255,255,0.06) !important;
    box-shadow: none !important;
    transform: none !important;
    border-color: rgba(255,255,255,0.15) !important;
}

.template-thumbnail {
    background: linear-gradient(135deg, rgba(0,163,255,0.15), rgba(0,163,255,0.05)) !important;
}

.template-name {
    font-family: 'Inter', sans-serif !important;
    color: #fff !important;
}

.template-btn {
    background: transparent !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 8px !important;
}

.template-btn:hover {
    background: #fff !important;
    color: #000 !important;
}

/* Filter buttons */
.filter-btn {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: rgba(255,255,255,0.5) !important;
}

.filter-btn.active, .filter-btn:hover {
    background: #fff !important;
    color: #000 !important;
    border-color: #fff !important;
}

/* Main container */
.main-container {
    background: transparent !important;
}

/* Dropdown menus */
.dropdown-menu {
    background: rgba(10,10,10,0.98) !important;
    backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}

.dropdown-menu a, .dropdown-menu button {
    color: rgba(255,255,255,0.7) !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}

.dropdown-menu a:hover, .dropdown-menu button:hover {
    background: rgba(255,255,255,0.06) !important;
    color: #fff !important;
}

/* Token balance */
.token-balance {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.5) !important;
}

.token-count {
    color: #00A3FF !important;
}

/* User email */
.user-email {
    color: rgba(255,255,255,0.6) !important;
}
.user-email:hover { color: #fff !important; }

/* Topbar container */
.topbar-container { color: #fff; }

/* Contract / paywall / modal overrides */
.modal, .paywall, .overlay-content, .contract-card, .step-card {
    background: rgba(10,10,10,0.98) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: #fff !important;
}

.modal-overlay, .paywall-overlay {
    background: rgba(0,0,0,0.7) !important;
}

/* Progress bars */
.progress-bar, .step-indicator {
    background: rgba(255,255,255,0.06) !important;
}

.progress-fill, .step-indicator.active {
    background: #00A3FF !important;
}

/* Status badges */
.status-badge, .badge {
    border-radius: 100px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

/* ===== PDF EDITOR OVERRIDES ===== */

/* Toolbar */
.toolbar, .pdf-toolbar {
    background: rgba(0,0,0,0.9) !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.toolbar button, .pdf-toolbar button, .tool-btn {
    background: transparent !important;
    color: rgba(255,255,255,0.6) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 6px !important;
}

.toolbar button:hover, .tool-btn:hover {
    background: rgba(255,255,255,0.06) !important;
    color: #fff !important;
}

.toolbar button.active, .tool-btn.active {
    background: #00A3FF !important;
    color: #fff !important;
    border-color: #00A3FF !important;
}

/* Sidebar panels */
.sidebar, .panel, .properties-panel {
    background: rgba(0,0,0,0.95) !important;
    border-left: 1px solid rgba(255,255,255,0.08) !important;
    border-right: 1px solid rgba(255,255,255,0.08) !important;
}

/* ===== CONTRACTS PAGE OVERRIDES ===== */

.login-screen {
    background: #000 !important;
}

.login-card {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: none !important;
}

.login-card h2, .login-card h3, .login-card p, .login-card label {
    color: #fff !important;
}

/* Hardcoded white/light background overrides — catch-all */
[style*="background: white"],
[style*="background-color: white"],
[style*="background: #fff"],
[style*="background: #FFF"],
[style*="background-color: #fff"],
[style*="background-color: #FFF"],
[style*="background: rgb(255"],
[style*="background-color: rgb(255"] {
    background: rgba(255,255,255,0.03) !important;
}

[style*="color: #1a1a1a"],
[style*="color: #0A1628"],
[style*="color: #000"] {
    color: #fff !important;
}

/* DM Sans override for contracts */
[style*="DM Sans"], [style*="DM Serif"] {
    font-family: 'Inter', sans-serif !important;
}