:root {
    --color-primary: #023446;
    --color-primary-light: #034a63;
    --color-secondary: #f6c144;
    --color-secondary-hover: #e5b33a;
    --color-bg-warm: #faf8f5;
    --color-bg-cream: #f5f0ea;
    --color-text-dark: #1a1a2e;
    --color-text-body: #4a5568;
    --color-text-muted: #718096;
    --color-text-light: #ffffff;
    --color-border: #e2e8f0;
    --color-input-bg: #f3f4f6;
    --color-border-light: #e2e8f0;

    --font-serif: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
    --font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;

    --shadow-sm: 0 2px 8px rgba(2, 52, 70, 0.06);
    --shadow-md: 0 8px 30px rgba(2, 52, 70, 0.10);
    --shadow-lg: 0 20px 60px rgba(2, 52, 70, 0.12);
    --shadow-card: 0 24px 60px rgba(2, 52, 70, 0.12);
    --shadow-soft: 0 14px 32px rgba(15, 23, 42, 0.08);
    --shadow-light: 0 2px 8px rgba(2, 52, 70, 0.06);
    --shadow-medium: 0 8px 30px rgba(2, 52, 70, 0.10);

    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;

    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    --container-page: 1200px;
    --container-card: 1040px;
    --sidebar-width: 280px;

    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;

    /* Compatibility aliases for existing page CSS */
    --color-dark: var(--color-text-dark);
    --color-light: var(--color-bg-warm);
    --color-cream: var(--color-bg-cream);
    --color-text: var(--color-text-body);
    --color-bg-alt: var(--color-bg-warm);

    --places-primary: var(--color-primary);
    --places-secondary: var(--color-secondary);
    --places-bg-warm: var(--color-bg-warm);
    --places-bg-cream: var(--color-bg-cream);
    --places-text-muted: var(--color-text-muted);
}