// Tokens de color como custom properties CSS (no variables SCSS): así el
// toggle de tema (clase .dark en <html>) los puede resolver en runtime sin
// recompilar nada — SCSS solo aporta el anidado/organización de las reglas.
:root {
    --color-page-bg: #f9fafb; // gray-50
    --color-surface: #ffffff;
    --color-surface-muted: #f9fafb; // gray-50
    --color-code-bg: #f3f4f6; // gray-100
    --color-border: #e5e7eb; // gray-200
    --color-border-strong: #d1d5db; // gray-300

    --color-text-primary: #111827; // gray-900
    --color-text-secondary: #6b7280; // gray-500
    --color-text-muted: #9ca3af; // gray-400
    --color-text-on-accent: #ffffff;

    --color-accent: #4f46e5; // indigo-600
    --color-accent-strong: #6366f1; // indigo-500
    --color-accent-soft: #eef2ff; // indigo-50
    --color-accent-soft-text: #4338ca; // indigo-700
    --gradient-accent: linear-gradient(to right, #4f46e5, #7c3aed);
    --gradient-glow: linear-gradient(to bottom right, rgb(129 140 248 / 30%), rgb(167 139 250 / 20%));

    --color-success: #059669; // emerald-600
    --color-success-dot: #10b981; // emerald-500
    --color-danger: #dc2626; // red-600

    --color-warning-border: #fcd34d; // amber-300
    --color-warning-bg: #fffbeb; // amber-50
    --color-warning-title: #92400e; // amber-800
    --color-warning-text: #78350f; // amber-900
    --color-warning-code-bg: #ffffff;

    --shadow-card: 0 1px 2px 0 rgb(0 0 0 / 4%);
    --shadow-elevated: 0 10px 25px -5px rgb(17 24 39 / 8%), 0 8px 10px -6px rgb(17 24 39 / 5%);
}

.dark {
    --color-page-bg: #09090b; // zinc-950
    --color-surface: #18181b; // zinc-900
    --color-surface-muted: rgb(255 255 255 / 5%);
    --color-code-bg: rgb(255 255 255 / 10%);
    --color-border: rgb(255 255 255 / 10%);
    --color-border-strong: rgb(255 255 255 / 15%);

    --color-text-primary: #ffffff;
    --color-text-secondary: #9ca3af; // gray-400
    --color-text-muted: #6b7280; // gray-500
    --color-text-on-accent: #ffffff;

    --color-accent: #6366f1; // indigo-500
    --color-accent-strong: #818cf8; // indigo-400
    --color-accent-soft: rgb(99 102 241 / 15%);
    --color-accent-soft-text: #a5b4fc; // indigo-300
    --gradient-accent: linear-gradient(to right, #4f46e5, #7c3aed);
    --gradient-glow: linear-gradient(to bottom right, rgb(99 102 241 / 20%), rgb(139 92 246 / 10%));

    --color-success: #34d399; // emerald-400
    --color-success-dot: #10b981;
    --color-danger: #f87171; // red-400

    --color-warning-border: rgb(245 158 11 / 30%);
    --color-warning-bg: rgb(245 158 11 / 10%);
    --color-warning-title: #fcd34d; // amber-300
    --color-warning-text: #fde68a; // amber-200
    --color-warning-code-bg: rgb(0 0 0 / 20%);

    --shadow-card: none;
    --shadow-elevated: 0 20px 25px -5px rgb(0 0 0 / 30%), 0 8px 10px -6px rgb(0 0 0 / 30%);
}