/* Shared Theme Variables (extracted from landing.hbs) */
:root {
    /* Colors HSL */
    --background: 220, 20%, 97%;
    --foreground: 220, 40%, 13%;
    --card: 0, 0%, 100%;
    --primary: 220, 60%, 20%;
    --primary-foreground: 0, 0%, 100%;
    --secondary: 210, 30%, 94%;
    --muted: 210, 20%, 93%;
    --muted-foreground: 220, 10%, 46%;
    --accent: 24, 95%, 53%;
    --accent-foreground: 0, 0%, 100%;
    --border: 220, 15%, 90%;

    /* Radius & Shadows */
    --radius: 0.75rem;
    --shadow-card: 0 4px 24px -4px hsl(220 60% 20% / 0.08);
    --shadow-elevated: 0 12px 40px -8px hsl(220 60% 20% / 0.15);
}

/* Light/Dark Toggle Support */
body.dark-mode {
    --background: 220, 40%, 10%;
    --foreground: 220, 10%, 95%;
    --card: 220, 40%, 13%;
    --secondary: 220, 40%, 15%;
    --muted: 220, 40%, 20%;
    --muted-foreground: 220, 10%, 70%;
    --border: 220, 40%, 25%;
}

/* Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* Calculated Colors */
    --c-bg: hsl(var(--background));
    --c-fg: hsl(var(--foreground));
    --c-card: hsl(var(--card));
    --c-primary: hsl(var(--primary));
    --c-primary-fg: hsl(var(--primary-foreground));
    --c-secondary: hsl(var(--secondary));
    --c-muted: hsl(var(--muted));
    --c-muted-fg: hsl(var(--muted-foreground));
    --c-accent: hsl(var(--accent));
    --c-accent-fg: hsl(var(--accent-foreground));
    --c-border: hsl(var(--border));

    font-family: 'DM Sans', sans-serif;
    background-color: var(--c-bg);
    /* Fallback */
    background-image:
        radial-gradient(at 0% 0%, hsla(253, 16%, 7%, 1) 0, transparent 50%),
        radial-gradient(at 50% 0%, hsla(225, 39%, 30%, 1) 0, transparent 50%),
        radial-gradient(at 100% 0%, hsla(339, 49%, 30%, 1) 0, transparent 50%);
    /* Light mode override below */

    color: var(--c-fg);
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
}

body:not(.dark-mode) {
    background-color: #f8fafc;
    background-image:
        radial-gradient(at 0% 0%, hsla(24, 100%, 96%, 1) 0, transparent 50%),
        radial-gradient(at 50% 0%, hsla(220, 100%, 98%, 1) 0, transparent 50%),
        radial-gradient(at 100% 0%, hsla(340, 100%, 96%, 1) 0, transparent 50%);
}

h1,
h2,
h3,
h4,
h5,
h6,
.logo,
.step-number {
    font-family: 'Space Grotesk', sans-serif;
}

a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s;
}

/* Utility Classes */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--radius);
    transition: all 0.2s;
    cursor: pointer;
    border: 1px solid transparent;
}

.btn-primary {
    background: var(--c-accent);
    color: var(--c-accent-fg);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.3);
}

.btn-outline {
    border-color: var(--c-border);
    background: transparent;
    color: var(--c-fg);
}

.btn-outline:hover {
    background: var(--c-muted);
}

/* Inputs (Added for app consistency) */
input,
select,
textarea {
    width: 100%;
    padding: 12px;
    border-radius: var(--radius);
    border: 1px solid var(--c-border);
    background: var(--c-card);
    color: var(--c-fg);
    outline: none;
    font-family: inherit;
    transition: 0.2s;
}

body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
    background: #1a2236 !important;
    color: #fff !important;
    border: 1px solid var(--c-border) !important;
}

body.dark-mode input:-webkit-autofill,
body.dark-mode input:-webkit-autofill:hover,
body.dark-mode input:-webkit-autofill:focus,
body.dark-mode input:-webkit-autofill:active,
body.dark-mode textarea:-webkit-autofill,
body.dark-mode textarea:-webkit-autofill:hover,
body.dark-mode textarea:-webkit-autofill:focus,
body.dark-mode textarea:-webkit-autofill:active {
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff;
    -webkit-box-shadow: 0 0 0 1000px #1a2236 inset !important;
    box-shadow: 0 0 0 1000px #1a2236 inset !important;
    border: 1px solid var(--c-border) !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.1);
}

/* Card */
.card {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: var(--shadow-card);
}