/* ═══════════════════════════════════════════════
   TechPro SA — Design Tokens
   DSTV color scheme + Asurion UX patterns
   ═══════════════════════════════════════════════ */

:root {
    /* ─── DSTV Brand Colors ─── */
    --tp-primary:       #0095DA;
    --tp-primary-dark:  #0077b3;
    --tp-primary-light: #e6f4fd;
    --tp-secondary:     #00B9AF;      /* DSTV teal/secondary-info */
    --tp-accent:        #fd7e14;      /* Orange CTA */
    --tp-accent-hover:  #e56c07;
    --tp-emergency:     #dc3545;
    --tp-success:       #28a745;
    --tp-warning:       #ffc107;
    --tp-whatsapp:      #25d366;
    --tp-info:          #263140;
    --tp-dark:          #0A121D;

    /* ─── Extended Palette ─── */
    --tp-blue:          #007bff;
    --tp-indigo:        #6610f2;
    --tp-purple:        #6f42c1;
    --tp-pink:          #e83e8c;
    --tp-red:           #dc3545;
    --tp-orange:        #fd7e14;
    --tp-yellow:        #ffc107;
    --tp-green:         #28a745;
    --tp-teal:          #20c997;
    --tp-cyan:          #17a2b8;

    /* ─── Neutrals ─── */
    --tp-black:         #0A121D;
    --tp-gray-900:      #1a2332;
    --tp-gray-800:      #263140;
    --tp-gray-700:      #343a40;
    --tp-gray-600:      #6c757d;
    --tp-gray-500:      #8c959d;
    --tp-gray-400:      #ced4da;
    --tp-gray-300:      #dee2e6;
    --tp-gray-200:      #e9ecef;
    --tp-gray-100:      #f8f9fa;
    --tp-white:         #ffffff;

    /* ─── Typography (Poppins) ─── */
    --tp-font-display:  'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --tp-font-body:     'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --tp-font-mono:     SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    /* Scale (fluid) */
    --tp-text-xs:    clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
    --tp-text-sm:    clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);
    --tp-text-base:  clamp(0.9375rem, 0.88rem + 0.3vw, 1rem);
    --tp-text-lg:    clamp(1.0625rem, 1rem + 0.35vw, 1.125rem);
    --tp-text-xl:    clamp(1.1875rem, 1.1rem + 0.5vw, 1.3125rem);
    --tp-text-2xl:   clamp(1.4375rem, 1.2rem + 1vw, 1.75rem);
    --tp-text-3xl:   clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);
    --tp-text-4xl:   clamp(2rem, 1.5rem + 2.5vw, 3rem);
    --tp-text-5xl:   clamp(2.5rem, 1.8rem + 3.5vw, 4rem);

    /* ─── Spacing ─── */
    --tp-space-xs:    0.25rem;
    --tp-space-sm:    0.5rem;
    --tp-space-md:    1rem;
    --tp-space-lg:    1.5rem;
    --tp-space-xl:    2rem;
    --tp-space-2xl:   3rem;
    --tp-space-3xl:   4rem;
    --tp-space-4xl:   6rem;
    --tp-space-5xl:   8rem;

    /* ─── Layout ─── */
    --tp-max-width:   1280px;
    --tp-max-narrow:  960px;
    --tp-max-wide:    1440px;
    --tp-gutter:      clamp(1rem, 2vw, 2rem);
    --tp-radius:      0.5rem;
    --tp-radius-lg:   0.75rem;
    --tp-radius-xl:   1rem;
    --tp-radius-full: 9999px;

    /* ─── Breakpoints ─── */
    --tp-breakpoint-sm:  576px;
    --tp-breakpoint-md:  768px;
    --tp-breakpoint-lg:  992px;
    --tp-breakpoint-xl:  1200px;
    --tp-breakpoint-xxl: 1500px;

    /* ─── Shadows ─── */
    --tp-shadow-sm:   0 1px 2px rgba(10, 18, 29, 0.05);
    --tp-shadow-md:   0 4px 6px -1px rgba(10, 18, 29, 0.07), 0 2px 4px -2px rgba(10, 18, 29, 0.05);
    --tp-shadow-lg:   0 10px 15px -3px rgba(10, 18, 29, 0.08), 0 4px 6px -4px rgba(10, 18, 29, 0.04);
    --tp-shadow-xl:   0 20px 25px -5px rgba(10, 18, 29, 0.1), 0 8px 10px -6px rgba(10, 18, 29, 0.04);

    /* ─── Transitions ─── */
    --tp-ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --tp-duration:    200ms;
    --tp-duration-md: 300ms;
    --tp-duration-lg: 500ms;

    /* ─── Legacy Compatibility (maps to component CSS) ─── */
    --color-primary:       var(--tp-primary);
    --color-primary-dark:  var(--tp-primary-dark);
    --color-primary-light: var(--tp-primary-light);
    --color-secondary:     var(--tp-secondary);
    --color-accent:        var(--tp-accent);
    --color-dark:          var(--tp-dark);
    --color-info:          var(--tp-info);
}