@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

:root {
    --primary: #3A5A40;
    --primary-dark: #263c2a;
    --primary-light: #588157;
    --background-light: #F2EBE3;
    --background-dark: #1a1c1a;
    --text-main: #344E41;
    --stone: #DAD7CD;
    --stone-dark: #444643;
    --shadow-light: #d1c6b8;
    --shadow-white: #ffffff;
    --shadow-dark-1: #0d0e0d;
    --shadow-dark-2: #272a27;
}

@layer base {
    body {
        font-family: 'Inter', sans-serif;
        background-color: var(--background-light);
        color: var(--text-main);
    }

    .dark body {
        background-color: var(--background-dark);
        color: #f3f4f6;
        /* stone-100 */
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: 'Playfair Display', serif;
    }
}

@layer components {
    .smooth-transition {
        transition: all 0.3s ease-out;
    }

    .neu-extruded {
        background: var(--background-light);
        box-shadow: 9px 9px 18px var(--shadow-light), -9px -9px 18px var(--shadow-white);
        border: 1px solid rgba(255, 255, 255, 0.4);
    }

    .dark .neu-extruded {
        background: var(--background-dark);
        box-shadow: 8px 8px 16px var(--shadow-dark-1), -8px -8px 16px var(--shadow-dark-2);
    }

    .neu-pressed {
        background: var(--background-light);
        box-shadow: inset 6px 6px 12px var(--shadow-light), inset -6px -6px 12px var(--shadow-white);
    }

    .dark .neu-pressed {
        background: var(--background-dark);
        box-shadow: inset 6px 6px 12px var(--shadow-dark-1), inset -6px -6px 12px var(--shadow-dark-2);
    }

    .neu-button-primary {
        background: var(--primary);
        box-shadow: 6px 6px 12px var(--shadow-light), -6px -6px 12px var(--shadow-white);
    }

    .dark .neu-button-primary {
        background: var(--primary);
        box-shadow: 6px 6px 12px var(--shadow-dark-1), -6px -6px 12px var(--shadow-dark-2);
    }

    .neu-card-sm {
        background: var(--background-light);
        box-shadow: 5px 5px 10px var(--shadow-light), -5px -5px 10px var(--shadow-white);
    }

    .editorial-overlay {
        background: linear-gradient(to top, rgba(26, 28, 26, 0.9) 0%, rgba(26, 28, 26, 0) 100%);
    }

    .text-shadow-sm {
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }
}