/* ══════════════════════════════════════════════════════════════
   Lumafy Design System — Tokens
   Single source of truth for colors, typography, spacing.
   All HTML files reference this via <link>.
   ══════════════════════════════════════════════════════════════ */

:root {
    /* ── Lumafy Platform Brand (violet) ── */
    --lm-brand-50:  #f5f3ff;
    --lm-brand-100: #ede9fe;
    --lm-brand-200: #ddd6fe;
    --lm-brand-300: #c4b5fd;
    --lm-brand-400: #a78bfa;
    --lm-brand-500: #8b5cf6;
    --lm-brand-600: #7c3aed;
    --lm-brand-700: #6d28d9;
    --lm-brand-800: #5b21b6;
    --lm-brand-900: #4c1d95;

    /* ── Neutrals ── */
    --lm-gray-50:  #f9fafb;
    --lm-gray-100: #f3f4f6;
    --lm-gray-200: #e5e7eb;
    --lm-gray-300: #d1d5db;
    --lm-gray-400: #9ca3af;
    --lm-gray-500: #6b7280;
    --lm-gray-600: #4b5563;
    --lm-gray-700: #374151;
    --lm-gray-800: #1f2937;
    --lm-gray-900: #111827;

    /* ── Semantic ── */
    --lm-success: #22c55e;
    --lm-warning: #f59e0b;
    --lm-danger:  #ef4444;
    --lm-whatsapp: #25D366;

    /* ── Per-template theme (overridden by .theme-* classes) ── */
    --lm-theme-50:  var(--lm-brand-50);
    --lm-theme-100: var(--lm-brand-100);
    --lm-theme-200: var(--lm-brand-200);
    --lm-theme-300: var(--lm-brand-300);
    --lm-theme-400: var(--lm-brand-400);
    --lm-theme-500: var(--lm-brand-500);
    --lm-theme-600: var(--lm-brand-600);
    --lm-theme-700: var(--lm-brand-700);
    --lm-theme-800: var(--lm-brand-800);
    --lm-theme-900: var(--lm-brand-900);

    /* ── Typography ── */
    --lm-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --lm-font-serif: Georgia, Cambria, serif;

    /* ── Spacing ── */
    --lm-section-py: 5rem;
    --lm-section-px: 1.5rem;
    --lm-max-w: 72rem;

    /* ── Border Radius ── */
    --lm-radius-sm: 0.5rem;
    --lm-radius-md: 0.75rem;
    --lm-radius-lg: 1rem;
    --lm-radius-xl: 1.5rem;
    --lm-radius-full: 9999px;

    /* ── Shadows ── */
    --lm-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --lm-shadow-md: 0 4px 6px rgba(0,0,0,0.07);
    --lm-shadow-lg: 0 8px 32px rgba(0,0,0,0.12);

    /* ── Touch targets ── */
    --lm-touch-min: 44px;

    /* ── Widget ── */
    --lm-widget-accent: var(--lm-brand-600);
}

/* ── Template A: Clarity (violet — default brand) ── */
.theme-clarity {
    --lm-theme-50:  #f5f3ff;
    --lm-theme-100: #ede9fe;
    --lm-theme-200: #ddd6fe;
    --lm-theme-300: #c4b5fd;
    --lm-theme-400: #a78bfa;
    --lm-theme-500: #8b5cf6;
    --lm-theme-600: #7c3aed;
    --lm-theme-700: #6d28d9;
    --lm-theme-800: #5b21b6;
    --lm-theme-900: #4c1d95;
}

/* ── Template B: Warmth (amber) ── */
.theme-warmth {
    --lm-theme-50:  #fffbeb;
    --lm-theme-100: #fef3c7;
    --lm-theme-200: #fde68a;
    --lm-theme-300: #fcd34d;
    --lm-theme-400: #fbbf24;
    --lm-theme-500: #f59e0b;
    --lm-theme-600: #d97706;
    --lm-theme-700: #b45309;
    --lm-theme-800: #92400e;
    --lm-theme-900: #78350f;
}

/* ── Template C: Prestige (indigo) ── */
.theme-prestige {
    --lm-theme-50:  #eef2ff;
    --lm-theme-100: #e0e7ff;
    --lm-theme-200: #c7d2fe;
    --lm-theme-300: #a5b4fc;
    --lm-theme-400: #818cf8;
    --lm-theme-500: #6366f1;
    --lm-theme-600: #4f46e5;
    --lm-theme-700: #4338ca;
    --lm-theme-800: #3730a3;
    --lm-theme-900: #312e81;
}

/* ── Focus visible (keyboard a11y) ── */
:focus-visible {
    outline: 2px solid var(--lm-brand-500);
    outline-offset: 2px;
}

/* ── Component Conventions (Tailwind class reference) ──
 *
 * Buttons:
 *   Primary:   bg-brand-600 hover:bg-brand-700 text-white rounded-lg px-5 py-2.5 font-medium transition
 *   Secondary: border border-gray-200 text-gray-600 hover:bg-gray-50 rounded-lg px-5 py-2.5 transition
 *   Danger:    bg-red-600 hover:bg-red-700 text-white rounded-lg px-5 py-2.5 font-medium transition
 *
 * Cards:
 *   bg-white rounded-xl border border-gray-200 p-6
 *   hover: hover:shadow-lg hover:border-brand-200 transition
 *
 * Inputs:
 *   w-full px-4 py-2.5 rounded-lg border border-gray-200 text-sm
 *   focus:ring-2 focus:ring-brand-500 focus:outline-none
 *   min-height: 44px (touch target)
 *
 * Sections:
 *   py-20 px-6 max-w-6xl mx-auto
 *
 * Icons:
 *   Phosphor Icons — text-lg (nav), text-xl (cards), text-2xl (hero)
 *
 * Responsive grids:
 *   grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6
 */