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

:root {
    --radius: 0.75rem; /* 12px */
    --font-geist-sans: "Geist", "Inter", "SF Pro Display", -apple-system,
        BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-geist-mono: "Geist Mono", "SFMono-Regular", "Menlo", "Monaco",
        "Consolas", monospace;

    /* Green - Primary */
    --green-primary-50: #f5ffe1;
    --green-primary-100: #efffcd;
    --green-primary-200: #d3f6ad;
    --green-primary-300: #b6f174;
    --green-primary-400: #3f9444;
    --green-primary-500: #134f1a;
    --green-primary-600: #0d4213;
    --green-primary-700: #07310b;

    /* Gray - Text */
    --gray-text-50: #f6f6f6;
    --gray-text-100: #eeeeee;
    --gray-text-200: #e2e2e2;
    --gray-text-300: #cbcbcb;
    --gray-text-400: #afafaf;
    --gray-text-500: #757575;
    --gray-text-600: #545454;
    --gray-text-700: #333333;

    /* Black & White */
    --black: #141414;
    --white: #ffffff;

    /* Subjective Colors */
    --outrageous-orange: #fd693f;
    --cornflower-blue: #7196fe;
    --zorba: #a49d93;
    --green-lite: #e2efe3;

    /* Red - Alert/Error */
    --red-alert-50: #fef3f2;
    --red-alert-100: #fee4e2;
    --red-alert-200: #fecdca;
    --red-alert-300: #fda29b;
    --red-alert-400: #f97066;
    --red-alert-500: #f04438;
    --red-alert-600: #d92d20;
    --red-alert-700: #b42318;

    /* Seance - Supportive */
    --seance-50: #f8eefe;
    --seance-100: #ead2fb;
    --seance-200: #e1bff9;
    --seance-300: #d6a5f7;
    --seance-400: #c47ff3;
    --seance-500: #752a9f;

    /* Prairie Sand - Supportive */
    --sand-50: #ffe9e2;
    --sand-100: #fecabc;
    --sand-200: #feb49f;
    --sand-300: #fe9679;
    --sand-400: #fd693f;
    --sand-500: #993c27;

    /* Corn Harvest - Supportive */
    --corn-50: #fef3dd;
    --corn-100: #fde2b0;
    --corn-200: #fbd58d;
    --corn-300: #fac560;
    --corn-400: #f8ac1c;
    --corn-500: #8e6a0c;

    /* Chambray - Supportive */
    --chambray-50: #eaefff;
    --chambray-100: #dbe5ff;
    --chambray-200: #b8cbff;
    --chambray-300: #9cb6fe;
    --chambray-400: #7196fe;
    --chambray-500: #404b9d;

    /* Chicago - Supportive */
    --chicago-50: #fefaf4;
    --chicago-100: #f4eee8;
    --chicago-200: #e8e0d7;
    --chicago-300: #cec5b9;
    --chicago-400: #a49d93;
    --chicago-500: #5c5550;

    /* Mapped to Tailwind/shadcn theme variables */
    --background: var(--white);
    --foreground: var(--gray-text-700);
    --card: var(--white);
    --card-foreground: var(--gray-text-700);
    --popover: var(--white);
    --popover-foreground: var(--gray-text-700);
    --primary: var(--green-primary-400);
    --primary-foreground: var(--white);
    --secondary: var(--gray-text-100);
    --secondary-foreground: var(--gray-text-700);
    --muted: var(--gray-text-100);
    --muted-foreground: var(--gray-text-500);
    --accent: var(--green-primary-100);
    --accent-foreground: var(--green-primary-700);
    --destructive: var(--red-alert-500);
    --border: var(--gray-text-200);
    --input: var(--gray-text-200);
    --ring: var(--green-primary-400);
    --chart-1: var(--corn-400);
    --chart-2: var(--chambray-400);
    --chart-3: var(--seance-400);
    --chart-4: var(--sand-400);
    --chart-5: var(--green-primary-300);
    --sidebar: var(--white);
    --sidebar-foreground: var(--gray-text-700);
    --sidebar-primary: var(--green-primary-500);
    --sidebar-primary-foreground: var(--white);
    --sidebar-accent: var(--green-primary-50);
    --sidebar-accent-foreground: var(--green-primary-700);
    --sidebar-border: var(--gray-text-200);
    --sidebar-ring: var(--green-primary-400);
}

/* Global styles */
html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    font-family: "Inter", sans-serif;
    margin: 0;
}

/* Custom styles to match shadcn/ui and project specifics */
.input-focus:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000;
}

/* Loader animation */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.animate-spin {
    animation: spin 1s linear infinite;
}

/* OTP input styles */
.otp-input-group {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin: 1rem 0;
}

.otp-digit {
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    border: 2px solid var(--gray-text-200);
    border-radius: 8px;
    background: white;
    transition: all 0.3s ease;
}

.otp-digit:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(63, 148, 68, 0.1);
}

.otp-digit.filled {
    border-color: var(--green-primary-400);
    background: rgba(63, 148, 68, 0.1);
}

/* Step indicator */
.step-indicator {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

.step {
    display: flex;
    align-items: center;
}

.step.active {
    font-weight: 600;
}

.step-number {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid currentColor;
    margin-right: 0.5rem;
    font-size: 0.875rem;
    font-weight: bold;
}

.step.active .step-number {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--primary-foreground);
}

.step:not(:last-child)::after {
    content: '';
    width: 50px;
    height: 2px;
    background: var(--gray-text-200);
    margin: 0 1rem;
}

/* Responsive design */
@media (max-width: 576px) {
    .otp-digit {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }

    .step-indicator {
        flex-direction: column;
        gap: 1rem;
    }

    .step:not(:last-child)::after {
        display: none;
    }
}