/* ==========================================================================
   Common CSS - Shared styles for Purity site
   ========================================================================== */

/* Import the main design tokens from style.css */
:root {
    /* Colors - Light Mode */
    --background: #FFE4E1; /* Light Pink */
    --foreground: #171717;
    --primary: #32CD32; /* Lime Green */
    --secondary: #FF1493; /* Saturated Pink (DeepPink) */
    --accent: #FF69B4; /* HotPink */

    /* Grays */
    --gray-50: #fdf2f8;
    --gray-100: #fce7f3;
    --gray-200: #fbcfe8;
    --gray-300: #f9a8d4;
    --gray-400: #f472b6;
    --gray-500: #ec4899;
    --gray-600: #db2777;
    --gray-700: #be185d;
    --gray-800: #9d174d;
    --gray-900: #831843;

    /* Spacing */
    --container-max: 1280px;

    /* Typography */
    --font-serif: 'Playpen Sans', cursive, sans-serif;
    --font-sans: 'Playpen Sans', cursive, sans-serif;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

    /* Border radius */
    --radius: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    :root {
        --background: #4A2B33;
        --foreground: #ededed;
        --primary: #32CD32;
        --secondary: #FF1493;
        --accent: #FF69B4;

        --gray-50: #18181b;
        --gray-100: #27272a;
        --gray-200: #3f3f46;
        --gray-300: #52525b;
        --gray-400: #71717a;
        --gray-500: #a1a1aa;
        --gray-600: #d4d4d8;
        --gray-700: #e4e4e7;
        --gray-800: #f4f4f5;
        --gray-900: #fafafa;
    }
}

/* Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-sans);
    background-color: var(--background);
    color: var(--foreground);
    line-height: 1.6;
    min-height: 100vh;
}

/* Utility classes */
.hidden {
    display: none !important;
}

.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 1rem;
}