/* ═══════════════════════════════════════════════════════════
   DX3 Global Design Tokens
   Load this stylesheet in Experience Cloud to provide
   theming variables to all LWC components.
   ═══════════════════════════════════════════════════════════ */

:root {

    /* ── Primary Brand ── */
    --dx3-color-primary:            #2E008B;
    --dx3-color-primary-hover:      #25006F;
    --dx3-color-primary-light:      #25006F;
    --dx3-color-primary-surface:    #ECE6F7;
    --dx3-color-primary-subtle:     #ECE6F7;
    --dx3-color-primary-fade:       #ECE6F7;

    /* ── Secondary ── */
    --dx3-color-secondary:          #FC7400;
    --dx3-color-secondary-hover:    #e06900;

    /* ── Text ── */
    --dx3-color-text:               #000000;
    --dx3-color-text-heading:       #0a0a0a;
    --dx3-color-text-body:          #364153;
    --dx3-color-text-secondary:     #6a7282;
    --dx3-color-text-muted:         #9ca3af;
    --dx3-color-text-inverse:       #ffffff;

    /* ── Backgrounds ── */
    --dx3-color-bg:                 #f9fafc;
    --dx3-color-bg-surface:         #ffffff;
    --dx3-color-bg-subtle:          #f3f4f6;
    --dx3-color-bg-input:           #f5f7fa;

    /* ── Borders ── */
    --dx3-color-border:             #e5e7eb;
    --dx3-color-border-strong:      #e6e6e6;
    --dx3-color-border-separator:   #CCC6D2;

    /* ── Status: Success ── */
    --dx3-color-success:            #22c55e;
    --dx3-color-success-dark:       #16a34a;
    --dx3-color-success-bg:         #dcfce6;
    --dx3-color-success-text:       #186f3b;

    /* ── Status: Warning ── */
    --dx3-color-warning:            #f59e0b;
    --dx3-color-warning-bg:         #feedd4;
    --dx3-color-warning-text:       #ab4520;

    /* ── Status: Error ── */
    --dx3-color-error:              #ef4444;
    --dx3-color-error-dark:         #dc2626;
    --dx3-color-error-bg:           #fef2f2;

    /* ── Discount / Badge ── */
    --dx3-color-discount:           #fb2c36;
    --dx3-color-cart-badge:         #f92b36;

    /* ── Typography ── */
    --dx3-font-family:              'Salesforce Sans', Arial, sans-serif;
    --dx3-font-family-system:       -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* ── Border Radius ── */
    --dx3-radius-xs:                6px;
    --dx3-radius-sm:                8px;
    --dx3-radius-md:                12px;
    --dx3-radius-lg:                16px;
    --dx3-radius-xl:                18px;
    --dx3-radius-pill:              9999px;

    /* ── Shadows ── */
    --dx3-shadow-xs:                0 1px 2px 0 rgb(67 51 139 / 0.05);
    --dx3-shadow-sm:                0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --dx3-shadow-md:                0 4px 12px rgba(0, 0, 0, 0.1);
    --dx3-shadow-lg:                0 4px 14px rgba(0, 0, 0, 0.12);
    --dx3-shadow-xl:                0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* ── Transitions ── */
    --dx3-transition-fast:          0.15s ease;
    --dx3-transition-normal:        0.2s ease;
    --dx3-transition-slow:          0.3s ease;
}