@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        color-scheme: light;
        --radiance-navy: #0f172a;
        --radiance-slate: #1e293b;
        --radiance-orange: #f97316;
        --radiance-orange-soft: #ffedd5;
        --radiance-sky: #0ea5c7;
        --radiance-bg: #f7f7f4;
    }

    html {
        font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        scroll-behavior: smooth;
        -webkit-text-size-adjust: 100%;
    }

    body {
        @apply text-slate-900;
        min-height: 100%;
        background:
            radial-gradient(circle at top left, rgba(249, 115, 22, 0.08), transparent 28%),
            radial-gradient(circle at top right, rgba(14, 165, 233, 0.08), transparent 24%),
            linear-gradient(180deg, #ffffff 0%, var(--radiance-bg) 100%);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        -webkit-tap-highlight-color: transparent;
        text-rendering: optimizeLegibility;
    }

    button,
    input,
    select,
    textarea {
        font: inherit;
    }
}

@layer components {
    .radiance-surface {
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(30, 41, 59, 0.98) 100%);
    }

    .radiance-accent {
        color: var(--radiance-orange);
    }
}

@layer utilities {
    .safe-bottom {
        padding-bottom: env(safe-area-inset-bottom);
    }
}