/**
 * Design Tokens — 3D Nexus Creations
 *
 * Single source of truth for the store's visual foundation.
 * Every colour, radius, shadow, spacing, and typography value
 * used across the theme should reference these tokens.
 *
 * @package Nexus_Theme
 */

:root {

    /* ══════════════════════════════════════════════════════════════
       COLOURS
       ══════════════════════════════════════════════════════════════ */

    /* ── Core brand ── */
    --nx-color-primary:       #0D1B3E;
    --nx-color-primary-light: #1A3A6E;
    --nx-color-secondary:     #0F2B5C;
    --nx-color-accent:        #00D4F0;

    /* ── CTA gradient stops ── */
    --nx-color-cta-start:     #FF6B3D;
    --nx-color-cta-end:       #E8452E;

    /* ── Backgrounds ── */
    --nx-bg:                  #F5F7FC;
    --nx-bg-alt:              #FFFFFF;
    --nx-bg-dark:             #070E1F;
    --nx-bg-overlay:          rgba(13, 27, 62, 0.55);

    /* ── Surfaces (cards, panels) ── */
    --nx-surface:             #FFFFFF;
    --nx-surface-muted:       #F5F7FC;
    --nx-surface-hover:       #F0F2FA;

    /* ── Text ── */
    --nx-text:                #0D1B3E;
    --nx-text-muted:          #4F6080;
    --nx-text-on-dark:        #FFFFFF;
    --nx-text-on-cta:         #FFFFFF;

    /* ── Borders ── */
    --nx-border:              #DDE3F0;
    --nx-border-focus:        #1A3A6E;
    --nx-border-active:       #0D1B3E;

    /* ── Accent pastels ── */
    --nx-pastel-pink:         #FDE8EF;
    --nx-pastel-purple:       #E8E2F8;
    --nx-pastel-blue:         #DDEAFF;
    --nx-pastel-mint:         #D8F5EC;
    --nx-pastel-peach:        #FEF0E4;
    --nx-pastel-lavender:     #E6E0F5;
    --nx-pastel-yellow:       #FFF5D6;
    --nx-pastel-navy:         #E0E6F2;

    /* ── Status ── */
    --nx-status-success:      #34D399;
    --nx-status-success-bg:   #D8F5EC;
    --nx-status-error:        #E8452E;
    --nx-status-error-bg:     #FDE8EF;
    --nx-status-warning:      #F59E0B;
    --nx-status-warning-bg:   #FFF5D6;
    --nx-status-info:         #7C3AED;
    --nx-status-info-bg:      #E8E2F8;

    /* ── Misc ── */
    --nx-color-sale:          #E8452E;
    --nx-color-star:          #FF8C42;
    --nx-color-silver:        #C0C4D0;

    /* ── Gradients ── */
    --nx-gradient-cta:        linear-gradient(135deg, var(--nx-color-cta-start), var(--nx-color-cta-end));
    --nx-gradient-header:     linear-gradient(180deg, #070E1F 0%, #0D1B3E 100%);
    --nx-gradient-hero:       linear-gradient(180deg, #0D1B3E 0%, #0F2B5C 35%, #2A1A3E 60%, #3D1A30 78%, #1A0A1A 100%);


    /* ══════════════════════════════════════════════════════════════
       SHADOWS
       ══════════════════════════════════════════════════════════════ */
    --nx-shadow-xs:   0 1px 3px  rgba(13, 27, 62, 0.04);
    --nx-shadow-sm:   0 2px 8px  rgba(13, 27, 62, 0.06);
    --nx-shadow-md:   0 4px 20px rgba(13, 27, 62, 0.10);
    --nx-shadow-lg:   0 8px 40px rgba(13, 27, 62, 0.14);
    --nx-shadow-glow: 0 0 20px   rgba(0, 212, 240, 0.18);
    --nx-shadow-cta:  0 4px 16px rgba(255, 107, 61, 0.35);
    --nx-shadow-cta-hover: 0 6px 24px rgba(255, 107, 61, 0.45);


    /* ══════════════════════════════════════════════════════════════
       BORDER RADIUS
       ══════════════════════════════════════════════════════════════ */
    --nx-radius-sm:   8px;
    --nx-radius-md:   12px;
    --nx-radius-lg:   20px;
    --nx-radius-xl:   28px;
    --nx-radius-pill:  999px;


    /* ══════════════════════════════════════════════════════════════
       SPACING
       ══════════════════════════════════════════════════════════════ */
    --nx-space-2xs:   4px;
    --nx-space-xs:    8px;
    --nx-space-sm:    12px;
    --nx-space-md:    16px;
    --nx-space-lg:    24px;
    --nx-space-xl:    32px;
    --nx-space-2xl:   48px;
    --nx-space-3xl:   64px;


    /* ══════════════════════════════════════════════════════════════
       TYPOGRAPHY
       ══════════════════════════════════════════════════════════════ */

    /* ── Font families ── */
    --nx-font-heading: 'Fredoka', 'Nunito', sans-serif;
    --nx-font-body:    'Nunito', 'Inter', sans-serif;
    --nx-font-accent:  var(--nx-font-heading);

    /* ── Font sizes ── */
    --nx-text-xs:    0.75rem;   /* 12px */
    --nx-text-sm:    0.875rem;  /* 14px */
    --nx-text-base:  1rem;      /* 16px — body default */
    --nx-text-md:    1rem;      /* 16px */
    --nx-text-lg:    1.15rem;   /* ~18.4px */
    --nx-text-xl:    1.3rem;    /* ~20.8px */
    --nx-text-2xl:   1.5rem;    /* 24px */
    --nx-text-3xl:   2rem;      /* 32px */

    /* ── Font weights ── */
    --nx-weight-normal:    400;
    --nx-weight-medium:    500;
    --nx-weight-semibold:  600;
    --nx-weight-bold:      700;
    --nx-weight-extrabold: 800;

    /* ── Line heights ── */
    --nx-leading-tight:    1.2;
    --nx-leading-snug:     1.4;
    --nx-leading-normal:   1.6;
    --nx-leading-relaxed:  1.8;


    /* ══════════════════════════════════════════════════════════════
       LAYOUT
       ══════════════════════════════════════════════════════════════ */
    --nx-container-width:  1200px;
    --nx-container-narrow: 900px;
    --nx-header-height:    48px;


    /* ══════════════════════════════════════════════════════════════
       TRANSITIONS
       ══════════════════════════════════════════════════════════════ */
    --nx-ease-fast:  0.2s ease;
    --nx-ease-base:  0.3s ease;
    --nx-ease-slow:  0.5s ease;


    /* ══════════════════════════════════════════════════════════════
       FOCUS RING
       ══════════════════════════════════════════════════════════════ */
    --nx-focus-ring: 0 0 0 3px rgba(26, 58, 110, 0.08);
    --nx-focus-ring-error: 0 0 0 3px rgba(232, 69, 46, 0.08);
}


/* ══════════════════════════════════════════════════════════════
   REDUCED MOTION
   Respects the user's OS-level "reduce motion" preference.
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}