/* Design tokens — light & dark themes */
:root,
[data-theme="light"] {
    color-scheme: light;

    /* Brand */
    --color-emerald-50: #ecfdf5;
    --color-emerald-100: #d1fae5;
    --color-emerald-200: #a7f3d0;
    --color-emerald-300: #6ee7b7;
    --color-emerald-400: #34d399;
    --color-emerald-500: #10b981;
    --color-emerald-600: #059669;
    --color-emerald-700: #047857;
    --color-emerald-800: #065f46;
    --color-emerald-900: #064e3b;
    --color-gold: #c9a227;

    /* Surfaces */
    --color-bg: #ffffff;
    --color-bg-alt: var(--color-emerald-50);
    --color-surface: #ffffff;
    --color-surface-elevated: #ffffff;
    --color-header-bg: rgba(255, 255, 255, 0.97);
    --color-footer-bg: #1f4d3a;

    /* Text */
    --color-heading: #14392b;
    --color-text: #374151;
    --color-text-muted: #6b7280;
    --color-text-inverse: #ffffff;
    --color-text-footer: rgba(255, 255, 255, 0.8);
    --color-text-footer-muted: rgba(255, 255, 255, 0.72);

    /* Borders & shadows */
    --color-border: rgba(0, 0, 0, 0.06);
    --color-border-strong: rgba(0, 0, 0, 0.12);
    --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);

    /* Components */
    --color-btn-primary-bg: var(--color-emerald-700);
    --color-btn-primary-hover: var(--color-emerald-800);
    --color-btn-primary-text: #ffffff;
    --color-btn-outline-border: var(--color-emerald-600);
    --color-btn-outline-text: var(--color-emerald-700);
    --color-nav-active: var(--color-emerald-700);
    --color-placeholder-bg: linear-gradient(135deg, var(--color-emerald-100) 0%, var(--color-emerald-50) 100%);
    --color-placeholder-text: var(--color-emerald-700);
    --color-carousel-caption-bg: rgba(4, 78, 59, 0.9);
    --color-cta-gradient-from: var(--color-emerald-800);
    --color-cta-gradient-to: var(--color-emerald-700);
    --color-page-header-gradient-from: var(--color-emerald-800);
    --color-page-header-gradient-to: var(--color-emerald-700);
    --color-control-bg: var(--color-emerald-50);
    --color-control-text: var(--color-emerald-800);
    --color-control-active-bg: var(--color-emerald-700);
    --color-control-active-text: #ffffff;
    --color-accent: var(--color-emerald-600);
    --color-accent-strong: var(--color-emerald-900);
    --color-focus: var(--color-emerald-600);
    --color-whatsapp: #128c7e;
    --color-table-stripe: rgba(6, 95, 70, 0.05);
    --color-table-hover: rgba(6, 95, 70, 0.09);

    /* Layout */
    --header-height: 72px;
    --font-sans: 'Inter', system-ui, sans-serif;
    --font-display: 'Playfair Display', Georgia, serif;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 50px;
}

[data-theme="dark"] {
    color-scheme: dark;

    --color-bg: #0b1220;
    --color-bg-alt: #111827;
    --color-surface: #1f2937;
    --color-surface-elevated: #273449;
    --color-header-bg: rgba(11, 18, 32, 0.95);
    --color-footer-bg: #060d18;

    --color-heading: #f3f4f6;
    --color-text: #d1d5db;
    --color-text-muted: #9ca3af;
    --color-text-inverse: #ffffff;
    --color-text-footer: rgba(255, 255, 255, 0.75);
    --color-text-footer-muted: rgba(255, 255, 255, 0.68);

    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-strong: rgba(255, 255, 255, 0.15);
    --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);

    --color-btn-primary-bg: var(--color-emerald-700);
    --color-btn-primary-hover: var(--color-emerald-800);
    --color-btn-outline-border: var(--color-emerald-400);
    --color-btn-outline-text: var(--color-emerald-300);
    --color-nav-active: var(--color-emerald-400);
    --color-accent: var(--color-emerald-400);
    --color-accent-strong: var(--color-emerald-300);
    --color-focus: var(--color-emerald-300);
    --color-table-stripe: rgba(255, 255, 255, 0.03);
    --color-table-hover: rgba(52, 211, 153, 0.1);
    --color-placeholder-bg: linear-gradient(135deg, #1a2e28 0%, #111827 100%);
    --color-placeholder-text: var(--color-emerald-200);
    --color-carousel-caption-bg: rgba(6, 30, 24, 0.88);
    --color-cta-gradient-from: #064e3b;
    --color-cta-gradient-to: #047857;
    --color-page-header-gradient-from: #064e3b;
    --color-page-header-gradient-to: #047857;
    --color-control-bg: #1f2937;
    --color-control-text: #e5e7eb;
    --color-control-active-bg: var(--color-emerald-700);
    --color-control-active-text: #ffffff;
}