/* 
 * base.css
 * Purpose: Reset, Root Variables, and Typography 
 */

:root {
    /* Color Palette - To be defined based on "Islamic/Serene" theme */
    --color-primary: #006d5b; /* Example Green */
    --color-secondary: #d4a017; /* Example Gold/Bronze */
    --color-bg: #f8f9fa;
    --color-text: #333333;
    --color-white: #ffffff;
    
    /* Spacing */
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 2rem;
    
    /* Typography */
    --font-primary: sans-serif;
    
    /* Animation / Motion */
    --ease-out-smooth: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --duration-short: 300ms;
    --duration-medium: 600ms;
    --duration-long: 1000ms;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-primary);
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}