/* assets/css/variables.css */
:root {
    /* Colors */
    --color-primary: #1a1a2e;
    --color-primary-dark: #0f0f1a;
    --color-accent: #c9a84c;
    --color-accent-hover: #e0c060;
    --color-bg: #fafaf8;
    --color-surface: #ffffff;
    --color-text-primary: #1a1a1a;
    --color-text-secondary: #6b7280;
    --color-border: #e5e7eb;
    --color-success: #16a34a;
    --color-error: #dc2626;
    --color-overlay: rgba(0, 0, 0, 0.45);

    /* Typography */
    --font-heading: 'Playfair Display', serif;
    --font-body: 'DM Sans', sans-serif;
    --font-mono: 'DM Mono', monospace;

    /* Spacing (8pt grid) */
    --spacing-4: 4px;
    --spacing-8: 8px;
    --spacing-12: 12px;
    --spacing-16: 16px;
    --spacing-24: 24px;
    --spacing-32: 32px;
    --spacing-40: 40px;
    --spacing-48: 48px;
    --spacing-64: 64px;
    --spacing-80: 80px;
    --spacing-96: 96px;
    --spacing-128: 128px;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
}

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

body {
    background-color: var(--color-bg);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}