@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Epilogue:ital,wght@0,100..900;1,100..900&family=Space+Grotesk:wght@300..700&display=swap');
@import "tailwindcss";

@theme {
    /* Obsidian Reportage Light Color Palette */
    --color-primary: #C9A25A;
    --color-secondary: #F8F8F8;
    --color-neutral: #FFFFFF;
    --color-tertiary: #666666;

    /* Semantic Mapping */
    --color-surface: var(--color-neutral);
    --color-on-surface: #1A1A1A;
    --color-primary-accent: var(--color-primary);
    --color-secondary-gray: var(--color-tertiary);
    --color-surface-container: #F4F2EE;

    /* Typography */
    --font-display: "DM Sans", ui-sans-serif, system-ui, sans-serif;
    --font-body: "Epilogue", ui-sans-serif, system-ui, sans-serif;
    --font-label: "Space Grotesk", ui-monospace, SFMono-Regular, monospace;

    --font-size-hero: 3.5rem;

    /* Radii */
    --radius-xl: 1.5rem;
    --radius-lg: 1rem;
    --radius-md: 0.75rem;
}

@layer base {
    body {
        @apply bg-surface text-on-surface font-body selection:bg-primary-accent selection:text-white antialiased;
    }

    h1, h2, h3, h4, h5, h6, .hero-title {
        @apply font-display font-medium tracking-tight;
    }

    .micro-label {
        @apply font-label uppercase text-[0.75rem] tracking-[0.15em] text-secondary-gray;
    }
}

/* Card Style based on Obsidian Reportage */
.obsidian-card {
    @apply bg-surface rounded-xl border border-on-surface/5 shadow-sm overflow-hidden;
    transition: transform 0.3s ease, shadow 0.3s ease;
}

/* Button Styles based on Obsidian Reportage */
.btn-primary {
    @apply bg-primary text-white font-label font-bold uppercase tracking-[0.1em] text-[0.75rem] py-4 px-8 rounded-md transition-all hover:bg-primary/90 active:scale-95;
}

.btn-secondary {
    @apply bg-surface-container text-on-surface font-label font-bold uppercase tracking-[0.1em] text-[0.75rem] py-4 px-8 rounded-md transition-all hover:bg-surface-container/80;
}

.btn-inverted {
    @apply bg-on-surface text-surface font-label font-bold uppercase tracking-[0.1em] text-[0.75rem] py-4 px-8 rounded-md transition-all hover:opacity-90;
}

.btn-outlined {
    @apply border border-on-surface/10 text-on-surface font-label font-bold uppercase tracking-[0.1em] text-[0.75rem] py-4 px-8 rounded-md transition-all hover:border-on-surface;
}

.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    filter: blur(8px);
    transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}

.scroll-reveal.visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.portfolio-image {
    @apply transition-all duration-700 ease-out;
}

.portfolio-image:hover {
    @apply scale-105;
}