/**
 * Vkard Elementor Widgets — Shared Color Variables
 *
 * Defines the Tailwind v4 / CSS Color Level 4 lab() color palette as
 * CSS custom properties available to every widget in this plugin.
 *
 * The @supports block ensures these values only override the sRGB fallbacks
 * in browsers that natively understand lab() (Chrome 111+, Safari 15+, FF 113+).
 */

/* ── Fallback sRGB values (all modern browsers) ───────────────────────── */
:root,
:host {
    /* Red */
    --color-red-500: #ef4444;

    /* Orange */
    --color-orange-50: #fff7ed;
    --color-orange-400: #fb923c;
    --color-orange-500: #f97316;

    /* Amber */
    --color-amber-300: #fcd34d;
    --color-amber-400: #fbbf24;
    --color-amber-500: #f59e0b;

    /* Yellow */
    --color-yellow-400: #facc15;

    /* Emerald */
    --color-emerald-50: #ecfdf5;
    --color-emerald-100: #d1fae5;
    --color-emerald-400: #34d399;
    --color-emerald-500: #10b981;
    --color-emerald-600: #059669;
    --color-emerald-700: #047857;

    /* Teal */
    --color-teal-500: #14b8a6;
    --color-teal-600: #0d9488;

    /* Sky */
    --color-sky-50: #f0f9ff;
    --color-sky-100: #e0f2fe;
    --color-sky-200: #bae6fd;
    --color-sky-300: #7dd3fc;
    --color-sky-500: #0ea5e9;
    --color-sky-600: #0284c7;

    /* Blue */
    --color-blue-400: #60a5fa;
    --color-blue-500: #3b82f6;

    /* Indigo */
    --color-indigo-500: #6366f1;

    /* Violet */
    --color-violet-50: #f5f3ff;
    --color-violet-500: #8b5cf6;

    /* Pink */
    --color-pink-400: #f472b6;

    /* Rose */
    --color-rose-500: #f43f5e;

    /* Slate */
    --color-slate-300: #cbd5e1;
    --color-slate-500: #64748b;
    --color-slate-700: #334155;

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

    /* Zinc */
    --color-zinc-50: #fafafa;
    --color-zinc-900: #18181b;
    --color-zinc-950: #09090b;

    /* Neutral */
    --color-neutral-300: #d4d4d4;
    --color-neutral-400: #a3a3a3;
    --color-neutral-600: #525252;
    --color-neutral-700: #404040;
    --color-neutral-800: #262626;

    /* ── Typography — font size ───────────────────────────────────────────── */
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --text-7xl: 4.5rem;
    --text-7xl--line-height: 1;

    /* ── Typography — font weight ─────────────────────────────────────────── */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* ── Typography — tracking & leading ─────────────────────────────────── */
    --tracking-tight: -.025em;
    --tracking-wide: .025em;
    --leading-tight: 1.25;
    --leading-relaxed: 1.625;

    /* ── Easing ───────────────────────────────────────────────────────────── */
    --ease-in: cubic-bezier(.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);

    /* ── Animation ────────────────────────────────────────────────────────── */
    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;

    /* ── Blur ─────────────────────────────────────────────────────────────── */
    --blur-sm: 8px;
    --blur-md: 12px;
    --blur-xl: 24px;
    --blur-2xl: 40px;
    --blur-3xl: 64px;

    /* ── Aspect ratio ─────────────────────────────────────────────────────── */
    --aspect-video: 16 / 9;

    /* ── Default transition ───────────────────────────────────────────────── */
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);

    /* ── Default fonts ────────────────────────────────────────────────────── */
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-geist-mono);
}

/* ── Wide-gamut lab() override (browsers with CSS Color Level 4 support) ── */
@supports (color: lab(0% 0 0)) {
    :root,
    :host {
        --color-red-500: lab(55.4814% 75.0732 48.8528);

        --color-orange-50: lab(97.7008% 1.53735 5.90649);
        --color-orange-400: lab(70.0429% 42.5156 75.8207);
        --color-orange-500: lab(64.272% 57.1788 90.3583);

        --color-amber-300: lab(86.4156% 6.13147 78.3961);
        --color-amber-400: lab(80.1641% 16.6016 99.2089);
        --color-amber-500: lab(72.7183% 31.8672 97.9407);

        --color-yellow-400: lab(83.2664% 8.65132 106.895);

        --color-emerald-50: lab(97.8462% -6.94966 1.85487);
        --color-emerald-100: lab(94.9004% -17.0769 5.63836);
        --color-emerald-400: lab(75.0771% -60.7313 19.4147);
        --color-emerald-500: lab(66.9756% -58.27 19.5419);
        --color-emerald-600: lab(55.0481% -49.9246 15.93);
        --color-emerald-700: lab(44.4871% -41.0396 11.0361);

        --color-teal-500: lab(67.3859% -49.0983 -2.63511);
        --color-teal-600: lab(55.0223% -41.0774 -3.90277);

        --color-sky-50: lab(97.3623% -2.33802 -4.13098);
        --color-sky-100: lab(94.3709% -4.56053 -8.23453);
        --color-sky-200: lab(88.6983% -11.3978 -16.8488);
        --color-sky-300: lab(80.3307% -20.2945 -31.385);
        --color-sky-500: lab(63.3038% -18.433 -51.0407);
        --color-sky-600: lab(51.7754% -11.4712 -49.8349);

        --color-blue-400: lab(65.0361% -1.42065 -56.9802);
        --color-blue-500: lab(54.1736% 13.3369 -74.6839);

        --color-indigo-500: lab(48.295% 38.3129 -81.9673);

        --color-violet-50: lab(96.2416% 2.28849 -5.51657);
        --color-violet-500: lab(49.9355% 55.1776 -81.8963);

        --color-pink-400: lab(64.5597% 64.3615 -12.7988);

        --color-rose-500: lab(56.101% 79.4328 31.4532);

        --color-slate-300: lab(84.7652% -1.94535 -7.93337);
        --color-slate-500: lab(48.0876% -2.03595 -16.5814);
        --color-slate-700: lab(26.9569% -1.47016 -15.6993);

        --color-gray-50: lab(98.2596% -0.247031 -0.706708);
        --color-gray-100: lab(96.1596% -0.0823438 -1.13575);
        --color-gray-200: lab(91.6229% -0.159115 -2.26791);
        --color-gray-300: lab(85.1236% -0.612259 -3.7138);
        --color-gray-400: lab(65.9269% -0.832707 -8.17473);
        --color-gray-500: lab(47.7841% -0.393182 -10.0268);
        --color-gray-600: lab(35.6337% -1.58697 -10.8425);
        --color-gray-700: lab(27.1134% -0.956401 -12.3224);
        --color-gray-800: lab(16.1051% -1.18239 -11.7533);
        --color-gray-900: lab(8.11897% 0.811279 -12.254);

        --color-zinc-50: lab(98.26% 0 0);
        --color-zinc-900: lab(8.30603% 0.618205 -2.16572);
        --color-zinc-950: lab(2.51107% 0.242703 -0.886115);

        --color-neutral-300: lab(84.92% 0 -0.0000119209);
        --color-neutral-400: lab(66.128% -0.0000298023 0.0000119209);
        --color-neutral-600: lab(34.924% 0 0);
        --color-neutral-700: lab(27.036% 0 0);
        --color-neutral-800: lab(15.204% 0 -0.00000596046);
    }
}