/*
 * Design tokens for the Bulk Price Editor marketing site.
 *
 * Source of truth for brand colors, spacing, radii, shadows, and typography.
 * Phase 2 (home redesign) consumes these. Safe to include now: tokens only,
 * no element-level rules that could clash with existing Bootstrap/Tailwind CDN output.
 */

:root {
    /* Brand palette - locked, not negotiable in the SEO refonte */
    --bpe-color-indigo-50:  #eef2ff;
    --bpe-color-indigo-100: #e0e7ff;
    --bpe-color-indigo-200: #c7d2fe;
    --bpe-color-indigo-300: #a5b4fc;
    --bpe-color-indigo-400: #818cf8;
    --bpe-color-indigo-500: #6366f1;
    --bpe-color-indigo-600: #4f46e5;
    --bpe-color-indigo-700: #4338ca;
    --bpe-color-indigo-800: #3730a3;
    --bpe-color-indigo-900: #312e81;

    --bpe-color-purple-500: #a855f7;
    --bpe-color-purple-600: #9333ea;

    --bpe-color-emerald-400: #34d399;
    --bpe-color-emerald-500: #10b981;
    --bpe-color-emerald-600: #059669;

    --bpe-color-amber-400: #fbbf24;
    --bpe-color-amber-500: #f59e0b;

    --bpe-color-rose-500: #f43f5e;
    --bpe-color-rose-600: #e11d48;

    /* Neutrals */
    --bpe-color-charcoal: #333333;
    --bpe-color-off-white: #f4f7f6;
    --bpe-color-white: #ffffff;
    --bpe-color-gray-50:  #f9fafb;
    --bpe-color-gray-100: #f3f4f6;
    --bpe-color-gray-200: #e5e7eb;
    --bpe-color-gray-300: #d1d5db;
    --bpe-color-gray-400: #9ca3af;
    --bpe-color-gray-500: #6b7280;
    --bpe-color-gray-600: #4b5563;
    --bpe-color-gray-700: #374151;
    --bpe-color-gray-800: #1f2937;
    --bpe-color-gray-900: #111827;

    /* Semantic aliases */
    --bpe-color-primary:        var(--bpe-color-indigo-600);
    --bpe-color-primary-hover:  var(--bpe-color-indigo-700);
    --bpe-color-primary-soft:   var(--bpe-color-indigo-50);
    --bpe-color-accent:         var(--bpe-color-purple-600);
    --bpe-color-cta:            var(--bpe-color-emerald-500);
    --bpe-color-cta-hover:      var(--bpe-color-emerald-600);
    --bpe-color-text:           var(--bpe-color-charcoal);
    --bpe-color-text-muted:     var(--bpe-color-gray-600);
    --bpe-color-text-subtle:    var(--bpe-color-gray-500);
    --bpe-color-bg:             var(--bpe-color-white);
    --bpe-color-bg-soft:        var(--bpe-color-off-white);
    --bpe-color-border:         var(--bpe-color-gray-200);

    /* Gradients */
    --bpe-gradient-primary: linear-gradient(135deg, var(--bpe-color-indigo-500) 0%, var(--bpe-color-purple-600) 100%);
    --bpe-gradient-soft:    linear-gradient(135deg, var(--bpe-color-indigo-50) 0%, var(--bpe-color-purple-500) 200%);

    /* Spacing scale (Tailwind-compatible 4px base) */
    --bpe-space-0:  0;
    --bpe-space-1:  0.25rem;
    --bpe-space-2:  0.5rem;
    --bpe-space-3:  0.75rem;
    --bpe-space-4:  1rem;
    --bpe-space-5:  1.25rem;
    --bpe-space-6:  1.5rem;
    --bpe-space-8:  2rem;
    --bpe-space-10: 2.5rem;
    --bpe-space-12: 3rem;
    --bpe-space-16: 4rem;
    --bpe-space-20: 5rem;
    --bpe-space-24: 6rem;

    /* Border radii */
    --bpe-radius-sm:   0.25rem;
    --bpe-radius-md:   0.5rem;
    --bpe-radius-lg:   0.75rem;
    --bpe-radius-xl:   1rem;
    --bpe-radius-2xl:  1.5rem;
    --bpe-radius-full: 9999px;

    /* Shadows */
    --bpe-shadow-sm:   0 1px 2px 0 rgb(0 0 0 / 0.05);
    --bpe-shadow-md:   0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.05);
    --bpe-shadow-lg:   0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.05);
    --bpe-shadow-xl:   0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.05);
    --bpe-shadow-glow: 0 0 0 4px rgb(99 102 241 / 0.15);

    /* Typography */
    --bpe-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --bpe-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

    --bpe-text-xs:   0.75rem;
    --bpe-text-sm:   0.875rem;
    --bpe-text-base: 1rem;
    --bpe-text-lg:   1.125rem;
    --bpe-text-xl:   1.25rem;
    --bpe-text-2xl:  1.5rem;
    --bpe-text-3xl:  1.875rem;
    --bpe-text-4xl:  2.25rem;
    --bpe-text-5xl:  3rem;
    --bpe-text-6xl:  3.75rem;

    --bpe-leading-tight:   1.25;
    --bpe-leading-snug:    1.375;
    --bpe-leading-normal:  1.5;
    --bpe-leading-relaxed: 1.625;

    --bpe-weight-normal:    400;
    --bpe-weight-medium:    500;
    --bpe-weight-semibold:  600;
    --bpe-weight-bold:      700;
    --bpe-weight-extrabold: 800;

    /* Layout */
    --bpe-container-max:  1200px;
    --bpe-container-wide: 1400px;

    /* Z-index scale */
    --bpe-z-base:    0;
    --bpe-z-overlay: 100;
    --bpe-z-modal:   200;
    --bpe-z-toast:   300;
    --bpe-z-tooltip: 400;
}