/**
 * DentalProMed — CSS Design System Variables
 * Paletă exactă din mockup NOVA Variant A (Clean Minimal)
 * NU modifica valorile fără a actualiza și mockup-ul aprobat.
 */

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

:root {
    /* ── Palette ─────────────────────────────────────────── */
    --dp-primary:        #65CA00; /* teal-600  */
    --dp-primary-dark:   #4FA000; /* teal-700  */
    --dp-primary-darker: #115e59; /* teal-800  */
    --dp-primary-light:  #F6FCE8; /* teal-50   */
    --dp-primary-100:    #E8FAD0; /* teal-100  */
    --dp-primary-200:    #CFF5A2; /* teal-200  */

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

    --dp-white:   #ffffff;
    --dp-black:   #000000;
    --dp-success: #16a34a;
    --dp-warning: #d97706;
    --dp-error:   #dc2626;
    --dp-amber:   #fbbf24;

    /* ── Typography ──────────────────────────────────────── */
    --dp-font:    'Inter', system-ui, -apple-system, sans-serif;

    --dp-text-xs:   0.75rem;    /* 12px */
    --dp-text-sm:   0.875rem;   /* 14px */
    --dp-text-base: 1rem;       /* 16px */
    --dp-text-lg:   1.125rem;   /* 18px */
    --dp-text-xl:   1.25rem;    /* 20px */
    --dp-text-2xl:  1.5rem;     /* 24px */
    --dp-text-3xl:  1.875rem;   /* 30px */
    --dp-text-4xl:  2.25rem;    /* 36px */
    --dp-text-5xl:  3rem;       /* 48px */
    --dp-text-6xl:  3.75rem;    /* 60px */
    --dp-text-7xl:  clamp(2.5rem, 6vw, 4.5rem); /* responsive */

    /* ── Spacing (4px base scale) ────────────────────────── */
    --dp-s1:  0.25rem;   /* 4   */
    --dp-s2:  0.5rem;    /* 8   */
    --dp-s3:  0.75rem;   /* 12  */
    --dp-s4:  1rem;      /* 16  */
    --dp-s5:  1.25rem;   /* 20  */
    --dp-s6:  1.5rem;    /* 24  */
    --dp-s8:  2rem;      /* 32  */
    --dp-s10: 2.5rem;    /* 40  */
    --dp-s12: 3rem;      /* 48  */
    --dp-s16: 4rem;      /* 64  */
    --dp-s20: 5rem;      /* 80  */
    --dp-s24: 6rem;      /* 96  */
    --dp-s32: 8rem;      /* 128 */

    /* ── Border radius ───────────────────────────────────── */
    --dp-r-sm:   0.25rem;
    --dp-r-md:   0.5rem;
    --dp-r-lg:   0.75rem;
    --dp-r-xl:   1rem;
    --dp-r-2xl:  1.5rem;
    --dp-r-pill: 9999px;

    /* ── Shadows ─────────────────────────────────────────── */
    --dp-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05);
    --dp-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .10), 0 1px 2px -1px rgb(0 0 0 / .10);
    --dp-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .10), 0 2px 4px -2px rgb(0 0 0 / .10);
    --dp-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .10), 0 4px 6px -4px rgb(0 0 0 / .10);
    --dp-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .10), 0 8px 10px -6px rgb(0 0 0 / .10);

    /* ── Transitions ─────────────────────────────────────── */
    --dp-dur-fast: 150ms;
    --dp-dur-base: 250ms;
    --dp-dur-slow: 400ms;
    --dp-ease:     cubic-bezier(.4,0,.2,1);

    /* ── Z-index ─────────────────────────────────────────── */
    --dp-z-dropdown: 1000;
    --dp-z-sticky:   1020;
    --dp-z-overlay:  1030;
    --dp-z-modal:    1050;
    --dp-z-toast:    1080;

    /* ── Layout ──────────────────────────────────────────── */
    --dp-container:    1320px;
    --dp-header-h:     72px;
    --dp-topbar-h:     40px;
    --dp-section-py:   var(--dp-s24);

    /* ── Breakpoints (reference for JS) ─────────────────── */
    --bp-sm:  480px;
    --bp-md:  768px;
    --bp-lg:  1024px;
    --bp-xl:  1280px;
    --bp-2xl: 1440px;
}