/* Global Theme Variables and Base Settings */
:root {
    /* Brand Accent Colors (Soft Pastel Indigos) */
    --color-brand-50: #f5f8ff;
    --color-brand-100: #e0e7ff;
    --color-brand-200: #c7d2fe;
    --color-brand-300: #a5b4fc;
    --color-brand-500: #6366f1;
    --color-brand-800: #3730a3;
    --color-brand-900: #1e1b4b;

    /* Base Neutrals (Zinc Pastel Palette) */
    --color-zinc-50: #fafafa;
    --color-zinc-100: #f4f4f5;
    --color-zinc-200: #e4e4e7;
    --color-zinc-300: #d4d4d8;
    --color-zinc-400: #a1a1aa;
    --color-zinc-500: #71717a;
    --color-zinc-600: #52525b;
    --color-zinc-900: #18181b;

    /* Typography mappings */
    --font-heading: 'Lora', Georgia, Cambria, "Times New Roman", Times, serif;
    --font-body: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    /* Layout Constants */
    --header-height: 4.5rem;
    --container-max-width: 1200px;
    --border-radius-sm: 0.375rem;
    --border-radius-md: 0.75rem;
    --border-radius-lg: 1.25rem;
    
    /* Transitions */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

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

body {
    background-color: var(--color-zinc-50);
    color: var(--color-zinc-600);
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Typography Base */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-zinc-900);
    font-weight: 600;
    line-height: 1.35;
}

a {
    color: inherit;
    text-decoration: none;
    transition: all var(--transition-fast);
}

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

::selection {
    background-color: var(--color-brand-100);
    color: var(--color-brand-900);
}

.hidden {
    display: none !important;
}

/* Utility Helpers */
.text-zinc-400 { color: var(--color-zinc-400); }
.text-zinc-500 { color: var(--color-zinc-500); }
.text-zinc-600 { color: var(--color-zinc-600); }
.text-zinc-900 { color: var(--color-zinc-900); }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }