/* DebsHost Cart — Order Form custom.css
 * Same design tokens as the system theme so the cart matches the client area.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ==========================================================================
   Light Mode
   ========================================================================== */

:root {
    --primary-50: #e8f0fb;
    --primary-100: #c5d9f5;
    --primary-200: #9fbfed;
    --primary-300: #78a4e4;
    --primary-400: #5a8fdb;
    --primary-500: #3066be;
    --primary-600: #2553a4;
    --primary-700: #1e4a8f;
    --primary-800: #163a73;
    --primary-900: #0f2a57;
    --primary-950: #091b3d;

    --primary: #3066be;
    --primary-lifted: #2553a4;
    --primary-accented: #1e4a8f;

    --secondary: #64748b;
    --secondary-lifted: #475569;
    --secondary-accented: #334155;

    --white: #ffffff;
    --bg: #ffffff;
    --bg-muted: #f8fafc;
    --bg-lifted: #f1f5f9;
    --bg-accented: #e2e8f0;
    --bg-inverted: #0f172a;

    --text: #0f172a;
    --text-inverted: #ffffff;
    --text-muted: #94a3b8;
    --text-lifted: #64748b;
    --text-accented: #475569;

    --border-muted: #f1f5f9;
    --border: #e2e8f0;
    --border-lifted: #cbd5e1;
    --border-accented: #94a3b8;

    --neutral-50: #f8fafc;
    --neutral-100: #f1f5f9;
    --neutral-200: #e2e8f0;
    --neutral-300: #cbd5e1;
    --neutral-400: #94a3b8;
    --neutral-500: #64748b;
    --neutral-600: #475569;
    --neutral-700: #334155;
    --neutral-800: #1e293b;
    --neutral-900: #0f172a;
    --neutral-950: #020617;

    --success: #16a34a;
    --success-lifted: #15803d;
    --success-accented: #166534;

    --info: #3066be;
    --info-lifted: #2553a4;
    --info-accented: #1e4a8f;

    --warning: #f59e0b;
    --warning-lifted: #d97706;
    --warning-accented: #b45309;

    --error: #dc2626;
    --error-lifted: #b91c1c;
    --error-accented: #991b1b;

    --rounding-sm: 0.5rem;
    --rounding-md: 0.75rem;
    --rounding-lg: 1rem;

    --letter-spacing: -0.01em;
}

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

@media (prefers-color-scheme: dark) {
    :root {
        --primary: #a5c7ff;
        --primary-lifted: #87b5ff;
        --primary-accented: #6aa0f5;

        --bg: #0b0f19;
        --bg-muted: #111827;
        --bg-lifted: #121826;
        --bg-accented: #1e293b;
        --bg-inverted: #e4edff;

        --text: #e4edff;
        --text-inverted: #0b0f19;
        --text-muted: #64748b;
        --text-lifted: #94a3b8;
        --text-accented: #cbd5e1;

        --border-muted: #1e293b;
        --border: #1e293b;
        --border-lifted: #334155;
        --border-accented: #475569;

        --neutral-50: #0b0f19;
        --neutral-100: #111827;
        --neutral-200: #1e293b;
        --neutral-300: #334155;
        --neutral-400: #475569;
        --neutral-500: #64748b;
        --neutral-600: #94a3b8;
        --neutral-700: #cbd5e1;
        --neutral-800: #e2e8f0;
        --neutral-900: #e4edff;
        --neutral-950: #f8fafc;

        --info: #a5c7ff;
        --info-lifted: #87b5ff;
        --info-accented: #6aa0f5;

        --white: #0b0f19;
    }
}

[data-theme="dark"],
html.dark {
    --primary: #a5c7ff;
    --primary-lifted: #87b5ff;
    --primary-accented: #6aa0f5;

    --bg: #0b0f19;
    --bg-muted: #111827;
    --bg-lifted: #121826;
    --bg-accented: #1e293b;
    --bg-inverted: #e4edff;

    --text: #e4edff;
    --text-inverted: #0b0f19;
    --text-muted: #64748b;
    --text-lifted: #94a3b8;
    --text-accented: #cbd5e1;

    --border-muted: #1e293b;
    --border: #1e293b;
    --border-lifted: #334155;
    --border-accented: #475569;

    --neutral-50: #0b0f19;
    --neutral-100: #111827;
    --neutral-200: #1e293b;
    --neutral-300: #334155;
    --neutral-400: #475569;
    --neutral-500: #64748b;
    --neutral-600: #94a3b8;
    --neutral-700: #cbd5e1;
    --neutral-800: #e2e8f0;
    --neutral-900: #e4edff;
    --neutral-950: #f8fafc;

    --info: #a5c7ff;
    --info-lifted: #87b5ff;
    --info-accented: #6aa0f5;

    --white: #0b0f19;
}

/* ==========================================================================
   Typography + Polish
   ========================================================================== */

body,
.app-body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    letter-spacing: -0.02em;
}

.btn {
    border-radius: var(--rounding-md);
    font-weight: 500;
}

.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    border-radius: var(--rounding-md);
    font-weight: 600;
}

.btn-primary:hover {
    background-color: var(--primary-lifted);
    border-color: var(--primary-lifted);
}

.card,
.panel {
    border-radius: var(--rounding-lg);
    border: 1px solid var(--border);
}

.form-control {
    border-radius: var(--rounding-md);
    border: 2px solid var(--border);
}

.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(48, 102, 190, 0.15);
}

a {
    color: var(--primary);
}

a:hover {
    color: var(--primary-lifted);
    text-decoration: none;
}

::selection {
    background: rgba(48, 102, 190, 0.2);
    color: var(--text);
}