@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700&display=swap');

/* Default slate-blue is the implicit baseline, no overrides needed */

/* Forest Green */
html[data-theme="forest-green"] {
    --cw-font-sans: "Inter", sans-serif;
    --font-sans: "Inter", sans-serif;
    --color-brand-50: #ecfdf5;
    --color-brand-100: #d1fae5;
    --color-brand-200: #a7f3d0;
    --color-brand-300: #6ee7b7;
    --color-brand-400: #34d399;
    --color-brand-500: #10b981;
    --color-brand-600: #059669;
    --color-brand-700: #047857;
    --color-brand-800: #065f46;
    --color-brand-900: #064e3b;
    --color-brand-950: #022c22;
    --cw-brand-500: #10b981;
    --cw-brand-600: #059669;
    --cw-brand-700: #047857;
    --cw-accent-500: #f59e0b;
    --color-orange-500: #f59e0b;
    
    /* Gray Scale mapping to Forest Green shades */
    --color-gray-50: #f0fdf4;
    --color-gray-100: #dcfce7;
    --color-gray-200: #bbf7d0;
    --color-gray-300: #86efac;
    --color-gray-400: #4ade80;
    --color-gray-500: #22c55e;
    --color-gray-600: #16a34a;
    --color-gray-700: #15803d;
    --color-gray-800: #166534;
    --color-gray-900: #14532d;
    --color-gray-950: #052e16;
}

/* Amber Slate */
html[data-theme="amber-slate"] {
    --cw-font-sans: "Outfit", sans-serif;
    --font-sans: "Outfit", sans-serif;
    --color-brand-50: #fffbeb;
    --color-brand-100: #fef3c7;
    --color-brand-200: #fde68a;
    --color-brand-300: #fcd34d;
    --color-brand-400: #fbbf24;
    --color-brand-500: #f59e0b;
    --color-brand-600: #d97706;
    --color-brand-700: #b45309;
    --color-brand-800: #92400e;
    --color-brand-900: #78350f;
    --color-brand-950: #451a03;
    --cw-brand-500: #f59e0b;
    --cw-brand-600: #d97706;
    --cw-brand-700: #b45309;
    --cw-accent-500: #10b981;
    --color-orange-500: #10b981;
    
    /* Gray Scale mapping to Slate shades */
    --color-gray-50: #f8fafc;
    --color-gray-100: #f1f5f9;
    --color-gray-200: #e2e8f0;
    --color-gray-300: #cbd5e1;
    --color-gray-400: #94a3b8;
    --color-gray-500: #64748b;
    --color-gray-600: #475569;
    --color-gray-700: #334155;
    --color-gray-800: #1e293b;
    --color-gray-900: #0f172a;
    --color-gray-950: #020617;
}

/* Light Basic */
html[data-theme="light-basic"] {
    --cw-font-sans: "Inter", sans-serif;
    --font-sans: "Inter", sans-serif;
    --color-brand-50: #eff6ff;
    --color-brand-100: #dbeafe;
    --color-brand-200: #bfdbfe;
    --color-brand-300: #93c5fd;
    --color-brand-400: #60a5fa;
    --color-brand-500: #3b82f6;
    --color-brand-600: #2563eb;
    --color-brand-700: #1d4ed8;
    --color-brand-800: #1e40af;
    --color-brand-900: #1e3a8a;
    --color-brand-950: #172554;
    --cw-brand-500: #3b82f6;
    --cw-brand-600: #2563eb;
    --cw-brand-700: #1d4ed8;
    --cw-accent-500: #f43f5e;
    --color-orange-500: #f43f5e;
    
    /* Gray Scale mapping to Zinc shades */
    --color-gray-50: #fafafa;
    --color-gray-100: #f4f4f5;
    --color-gray-200: #e4e4e7;
    --color-gray-300: #d4d4d8;
    --color-gray-400: #a1a1aa;
    --color-gray-500: #71717a;
    --color-gray-600: #52525b;
    --color-gray-700: #3f3f46;
    --color-gray-800: #27272a;
    --color-gray-900: #18181b;
    --color-gray-950: #09090b;
}

/* Map surface tokens dynamically based on the preset */
body.dark {
    /* No overrides needed, tailwind transparency works perfectly */
}

body {
    font-family: var(--cw-font-sans, var(--font-sans, "Outfit", sans-serif));
}