/* ================================================================
   MOBILE EXPRESS DENIA — COMPLETE DESIGN TOKEN SYSTEM v3.0
   React-Bits / Apple / Linear inspired · Dark-first premium aesthetic
   ================================================================
   Naming: --mx-{category}-{variant}-{modifier}
   Prefix: mx- (avoids collisions with any library)
   ================================================================ */

/* ─────────────────────────────────────────────────────────────────
   1. COLOR SYSTEM
   ───────────────────────────────────────────────────────────────── */

:root {

  /* ── PRIMARIES ──────────────────────────────────────────────── */
  --mx-blue-50:    #eff6ff;
  --mx-blue-100:   #dbeafe;
  --mx-blue-200:   #bfdbfe;
  --mx-blue-300:   #93c5fd;
  --mx-blue-400:   #60a5fa;
  --mx-blue-500:   #3b82f6;
  --mx-blue-600:   #0A58FF;   /* light mode primary */
  --mx-blue-700:   #1d4ed8;
  --mx-blue-800:   #1e40af;
  --mx-blue-900:   #1e3a5f;

  --mx-violet-50:  #f5f3ff;
  --mx-violet-100: #ede9fe;
  --mx-violet-200: #ddd6fe;
  --mx-violet-300: #c4b5fd;
  --mx-violet-400: #a78bfa;
  --mx-violet-500: #8b5cf6;
  --mx-violet-600: #7C3AED;   /* light mode secondary */
  --mx-violet-700: #6d28d9;
  --mx-violet-800: #5b21b6;
  --mx-violet-900: #4c1d95;

  --mx-amber-50:   #fffbeb;
  --mx-amber-100:  #fef3c7;
  --mx-amber-200:  #fde68a;
  --mx-amber-300:  #fcd34d;
  --mx-amber-400:  #FFD400;   /* light mode accent */
  --mx-amber-500:  #f59e0b;
  --mx-amber-600:  #d97706;
  --mx-amber-700:  #b45309;
  --mx-amber-800:  #92400e;
  --mx-amber-900:  #78350f;

  --mx-green-50:   #f0fdf4;
  --mx-green-100:  #dcfce7;
  --mx-green-400:  #4ade80;
  --mx-green-500:  #22c55e;
  --mx-green-600:  #16a34a;

  --mx-red-50:     #fef2f2;
  --mx-red-100:    #fee2e2;
  --mx-red-400:    #fb7185;
  --mx-red-500:    #f43f5e;
  --mx-red-600:    #e11d48;

  /* ── SURFACE SCALE (5 levels) ───────────────────────────────── */
  --mx-surface-0:      #ffffff;
  --mx-surface-1:      #F5F5F7;
  --mx-surface-2:      #f3f4f6;
  --mx-surface-3:      #e6e6ea;
  --mx-surface-4:      #d4d4d8;
  --mx-surface-inverse: #0B0F1C;

  /* ── TEXT SCALE (4 levels) ──────────────────────────────────── */
  --mx-text-1:         #101014;   /* primary — headings, prices */
  --mx-text-2:         #5d5d66;   /* secondary — descriptions */
  --mx-text-3:         #8a8a94;   /* tertiary — placeholders, hints */
  --mx-text-4:         #b0b0b8;   /* disabled, very muted */
  --mx-text-inverse:   #ffffff;
  --mx-text-on-blue:   #ffffff;
  --mx-text-on-amber:  #111111;

  /* ── BORDER SCALE (3 levels) ────────────────────────────────── */
  --mx-border-1:       #f0f0f4;   /* subtle — dividers */
  --mx-border-2:       #e6e6ea;   /* default — cards, inputs */
  --mx-border-3:       #c8c8d0;   /* strong — focus, emphasis */

  /* ── ACCENT SHORTCUTS ───────────────────────────────────────── */
  --mx-accent:         #0A58FF;
  --mx-accent-soft:    #eff6ff;
  --mx-secondary:      #7C3AED;
  --mx-secondary-soft: #f5f3ff;
  --mx-amber:          #FFD400;
  --mx-amber-soft:     #fffbeb;
  --mx-whatsapp:       #128C4A;

  /* ── SEMANTIC ───────────────────────────────────────────────── */
  --mx-success:        #16a34a;
  --mx-success-soft:   #e8f7ee;
  --mx-success-text:   #0a6b2d;
  --mx-warning:        #d97706;
  --mx-warning-soft:   #fff4de;
  --mx-warning-text:   #8a5a00;
  --mx-error:          #e11d48;
  --mx-error-soft:     #ffe4e6;
  --mx-error-text:     #be123c;
  --mx-info:           #0A58FF;
  --mx-info-soft:      #e8f0fe;
  --mx-info-text:      #0A58FF;

  /* ── HERO TOKENS (always dark) ──────────────────────────────── */
  --mx-hero-bg:        #0B0D12;
  --mx-hero-bg-end:    #1A2230;
  --mx-hero-text:      #ffffff;
  --mx-hero-text-dim:  #bcc3d2;
  --mx-hero-accent:    rgba(255,255,255,.13);
  --mx-hero-glow-blue: rgba(10,88,255,.5);
  --mx-hero-glow-violet: rgba(124,58,237,.42);
  --mx-hero-glow-amber: rgba(255,212,0,.16);

  /* ── GLASS EFFECT TOKENS ────────────────────────────────────── */
  --mx-glass-bg:       rgba(255,255,255,.72);
  --mx-glass-bg-strong: rgba(255,255,255,.88);
  --mx-glass-border:   rgba(255,255,255,.45);
  --mx-glass-blur:     16px;
  --mx-glass-saturate: 1.2;

  /* ── SHADOW SCALE (6 levels) ────────────────────────────────── */
  --mx-shadow-0:       none;
  --mx-shadow-1:       0 1px 3px rgba(0,0,0,.04);
  --mx-shadow-2:       0 2px 8px rgba(0,0,0,.06);
  --mx-shadow-3:       0 4px 16px rgba(0,0,0,.08);
  --mx-shadow-4:       0 8px 32px rgba(0,0,0,.10);
  --mx-shadow-5:       0 20px 60px rgba(0,0,0,.15);
  --mx-shadow-6:       0 30px 80px rgba(0,0,0,.22);

  /* Colored shadows for interactive elements */
  --mx-shadow-blue:    0 12px 40px rgba(10,88,255,.25);
  --mx-shadow-violet:  0 12px 40px rgba(124,58,237,.25);
  --mx-shadow-amber:   0 12px 40px rgba(255,212,0,.35);
  --mx-shadow-green:   0 12px 40px rgba(37,211,102,.30);

  /* Glass effect shadows */
  --mx-shadow-glass:   0 8px 32px rgba(0,0,0,.12),
                       0 0 0 1px rgba(255,255,255,.08) inset;
  --mx-shadow-glass-lg: 0 20px 60px rgba(0,0,0,.18),
                        0 0 0 1px rgba(255,255,255,.10) inset;

  /* ── GRADIENT DEFINITIONS ───────────────────────────────────── */
  --mx-grad-hero:      linear-gradient(135deg, var(--mx-hero-bg) 55%, var(--mx-hero-bg-end));
  --mx-grad-accent:    linear-gradient(135deg, #0A58FF, #7C3AED);
  --mx-grad-amber:     linear-gradient(135deg, #FFD400, #FFA500);
  --mx-grad-surface:   linear-gradient(180deg, var(--mx-surface-1), var(--mx-surface-0));
  --mx-grad-card-hover: linear-gradient(135deg, rgba(10,88,255,.04), rgba(124,58,237,.04));
  --mx-grad-footer:    linear-gradient(90deg, var(--mx-accent), var(--mx-secondary), var(--mx-amber));
  --mx-grad-stats:     linear-gradient(135deg, #0A0F1C, #1b2a52);
  --mx-grad-glow:      radial-gradient(620px 420px at 12% 18%, var(--mx-hero-glow-blue), transparent 60%),
                       radial-gradient(520px 400px at 88% 22%, var(--mx-hero-glow-violet), transparent 62%),
                       radial-gradient(760px 520px at 50% 108%, var(--mx-hero-glow-amber), transparent 62%);

  /* ── CANVAS SHORTCUTS (backward compat) ─────────────────────── */
  --bg:               var(--mx-surface-0);
  --bg2:              var(--mx-surface-1);
  --ink:              var(--mx-text-1);
  --mut:              var(--mx-text-2);
  --line:             var(--mx-border-2);
  --acc:              var(--mx-accent);
  --volt:             var(--mx-amber);
  --wa:               var(--mx-whatsapp);
  --head:             var(--mx-glass-bg);
  --field:            var(--mx-surface-2);
  --shadow:           var(--mx-shadow-4);

  /* ── TRANSITIONS ────────────────────────────────────────────── */
  --mx-transition-theme: 300ms cubic-bezier(.4,0,.2,1);
}

/* ── DARK MODE ────────────────────────────────────────────────── */
[data-theme="dark"] {

  /* Surface scale */
  --mx-surface-0:      #0B0F1C;
  --mx-surface-1:      #121828;
  --mx-surface-2:      #161c2e;
  --mx-surface-3:      #242c40;
  --mx-surface-4:      #3a4560;
  --mx-surface-inverse: #F4F4F5;

  /* Text scale */
  --mx-text-1:         #F4F4F5;
  --mx-text-2:         #9aa1b0;
  --mx-text-3:         #6b7280;
  --mx-text-4:         #4b5563;
  --mx-text-inverse:   #0B0F1C;
  --mx-text-on-blue:   #ffffff;
  --mx-text-on-amber:  #111111;

  /* Border scale */
  --mx-border-1:       #1e2536;
  --mx-border-2:       #242c40;
  --mx-border-3:       #3a4560;

  /* Accent shortcuts */
  --mx-accent:         #5B8CFF;
  --mx-accent-soft:    rgba(91,140,255,.12);
  --mx-secondary:      #A78BFA;
  --mx-secondary-soft: rgba(167,139,250,.12);
  --mx-amber:          #FFD400;
  --mx-amber-soft:     rgba(255,212,0,.12);
  --mx-whatsapp:       #128C4A;

  /* Semantic */
  --mx-success:        #4ade80;
  --mx-success-soft:   rgba(74,222,128,.12);
  --mx-success-text:   #4ade80;
  --mx-warning:        #fbbf24;
  --mx-warning-soft:   rgba(251,191,36,.12);
  --mx-warning-text:   #fbbf24;
  --mx-error:          #fb7185;
  --mx-error-soft:     rgba(251,113,133,.12);
  --mx-error-text:     #fb7185;
  --mx-info:           #5B8CFF;
  --mx-info-soft:      rgba(91,140,255,.12);
  --mx-info-text:      #5B8CFF;

  /* Hero (always dark — values stay the same) */
  --mx-hero-bg:        #0B0D12;
  --mx-hero-bg-end:    #1A2230;
  --mx-hero-text:      #ffffff;
  --mx-hero-text-dim:  #bcc3d2;
  --mx-hero-accent:    rgba(255,255,255,.13);

  /* Glass */
  --mx-glass-bg:       rgba(11,15,28,.72);
  --mx-glass-bg-strong: rgba(11,15,28,.88);
  --mx-glass-border:   rgba(255,255,255,.10);
  --mx-glass-blur:     16px;
  --mx-glass-saturate: 1.2;

  /* Shadows (deeper in dark mode) */
  --mx-shadow-1:       0 1px 3px rgba(0,0,0,.20);
  --mx-shadow-2:       0 2px 8px rgba(0,0,0,.30);
  --mx-shadow-3:       0 4px 16px rgba(0,0,0,.35);
  --mx-shadow-4:       0 8px 32px rgba(0,0,0,.40);
  --mx-shadow-5:       0 20px 60px rgba(0,0,0,.55);
  --mx-shadow-6:       0 30px 80px rgba(0,0,0,.65);

  --mx-shadow-blue:    0 12px 40px rgba(91,140,255,.30);
  --mx-shadow-violet:  0 12px 40px rgba(167,139,250,.30);
  --mx-shadow-amber:   0 12px 40px rgba(255,212,0,.40);
  --mx-shadow-green:   0 12px 40px rgba(74,222,128,.30);

  --mx-shadow-glass:   0 8px 32px rgba(0,0,0,.35),
                       0 0 0 1px rgba(255,255,255,.06) inset;
  --mx-shadow-glass-lg: 0 20px 60px rgba(0,0,0,.50),
                        0 0 0 1px rgba(255,255,255,.08) inset;

  /* Gradients */
  --mx-grad-accent:    linear-gradient(135deg, #5B8CFF, #A78BFA);
  --mx-grad-card-hover: linear-gradient(135deg, rgba(91,140,255,.06), rgba(167,139,250,.06));

  /* Canvas shortcuts */
  --bg:               var(--mx-surface-0);
  --bg2:              var(--mx-surface-1);
  --ink:              var(--mx-text-1);
  --mut:              var(--mx-text-2);
  --line:             var(--mx-border-2);
  --acc:              var(--mx-accent);
  --head:             var(--mx-glass-bg);
  --field:            var(--mx-surface-2);
  --shadow:           var(--mx-shadow-4);
}


/* ─────────────────────────────────────────────────────────────────
   2. TYPOGRAPHY SYSTEM
   ───────────────────────────────────────────────────────────────── */

:root {
  /* ── FONT STACKS ────────────────────────────────────────────── */
  --mx-font-display:  'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
  --mx-font-body:     'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mx-font-mono:     'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* ── MODULAR TYPE SCALE (1.250 — Major Third) ───────────────── */
  --mx-text-xs:       0.75rem;    /* 12px — badges, labels */
  --mx-text-sm:       0.8125rem;  /* 13px — nav, captions */
  --mx-text-base:     0.9375rem;  /* 15px — body default */
  --mx-text-md:       1rem;       /* 16px — body large */
  --mx-text-lg:       1.0625rem;  /* 17px — lead text */
  --mx-text-xl:       1.375rem;   /* 22px — card titles */
  --mx-text-2xl:      1.625rem;   /* 26px — section subs */
  --mx-text-3xl:      2rem;       /* 32px — section titles */
  --mx-text-4xl:      2.75rem;    /* 44px — hero subtitle */
  --mx-text-5xl:      clamp(2rem, 4.4vw, 3.375rem); /* hero h1 */
  --mx-text-6xl:      clamp(2.5rem, 5.5vw, 4.25rem); /* display */

  /* ── LINE HEIGHTS ───────────────────────────────────────────── */
  --mx-leading-none:    1;
  --mx-leading-tight:   1.04;     /* hero headlines */
  --mx-leading-snug:    1.2;      /* section headings */
  --mx-leading-normal:  1.5;      /* body text */
  --mx-leading-relaxed: 1.62;     /* long-form reading */
  --mx-leading-loose:   1.8;      /* legal, small print */

  /* ── LETTER SPACING ─────────────────────────────────────────── */
  --mx-tracking-tighter: -0.03em;  /* hero headlines */
  --mx-tracking-tight:   -0.025em; /* section headings */
  --mx-tracking-normal:  0em;
  --mx-tracking-wide:    0.04em;   /* nav links, small caps */
  --mx-tracking-wider:   0.12em;   /* eyebrow labels */
  --mx-tracking-widest:  0.2em;    /* kicker text */

  /* ── FONT WEIGHTS ───────────────────────────────────────────── */
  --mx-weight-regular:  400;
  --mx-weight-medium:   500;
  --mx-weight-semibold: 600;
  --mx-weight-bold:     700;
  --mx-weight-extrabold: 800;

  /* ── HEADING STYLES (consumed by components) ────────────────── */
  --mx-heading-family:  var(--mx-font-display);
  --mx-heading-weight:  var(--mx-weight-extrabold);
  --mx-heading-tracking: var(--mx-tracking-tight);
  --mx-heading-color:   var(--mx-text-1);
}

/*
  h1: --mx-text-5xl / --mx-leading-tight / --mx-tracking-tighter
  h2: --mx-text-3xl / --mx-leading-snug  / --mx-tracking-tight
  h3: --mx-text-2xl / --mx-leading-snug  / --mx-tracking-tight
  h4: --mx-text-xl  / --mx-leading-snug  / --mx-tracking-normal
  h5: --mx-text-lg  / --mx-leading-normal / --mx-tracking-normal
  h6: --mx-text-md  / --mx-leading-normal / --mx-tracking-wide
*/


/* ─────────────────────────────────────────────────────────────────
   3. SPACING SYSTEM (4px base unit)
   ───────────────────────────────────────────────────────────────── */

:root {
  /* ── BASE SCALE ─────────────────────────────────────────────── */
  --mx-space-0:     0;
  --mx-space-px:    1px;
  --mx-space-0\.5:  2px;       /* 0.5 unit */
  --mx-space-1:     4px;       /* 1 unit — base */
  --mx-space-1\.5:  6px;
  --mx-space-2:     8px;       /* 2 units */
  --mx-space-2\.5:  10px;
  --mx-space-3:     12px;      /* 3 units */
  --mx-space-3\.5:  14px;
  --mx-space-4:     16px;      /* 4 units */
  --mx-space-5:     20px;      /* 5 units */
  --mx-space-6:     24px;      /* 6 units */
  --mx-space-7:     28px;
  --mx-space-8:     32px;      /* 8 units */
  --mx-space-9:     36px;
  --mx-space-10:    40px;      /* 10 units */
  --mx-space-12:    48px;
  --mx-space-14:    56px;
  --mx-space-16:    64px;
  --mx-space-20:    80px;
  --mx-space-24:    96px;

  /* ── COMPONENT SPACING TOKENS ───────────────────────────────── */
  --mx-gap-xs:      var(--mx-space-1);     /* 4px — tight inline */
  --mx-gap-sm:      var(--mx-space-2);     /* 8px — chip gap */
  --mx-gap-md:      var(--mx-space-3\.5);  /* 14px — card grid */
  --mx-gap-lg:      var(--mx-space-5);     /* 20px — section grid */
  --mx-gap-xl:      var(--mx-space-7);     /* 28px — section gap */

  /* ── SECTION PADDING TOKENS ─────────────────────────────────── */
  --mx-section-py:     var(--mx-space-10); /* 40px vertical */
  --mx-section-py-lg:  var(--mx-space-16); /* 64px vertical (hero) */
  --mx-section-px:     clamp(20px, 4vw, 48px);

  /* ── CONTAINER MAX-WIDTH TOKENS ─────────────────────────────── */
  --mx-container-sm:   640px;
  --mx-container-md:   768px;
  --mx-container-lg:   960px;
  --mx-container-xl:   1100px;
  --mx-container-2xl:  1280px;
  --mx-container-max:  1480px;
  --mx-container-pad:  clamp(16px, 4vw, 48px);
  --mx-container-pad-sm: clamp(12px, 3vw, 32px);

  /* Backward compat */
  --r:                18px;
  --max:              var(--mx-container-max);
  --h1:               64px;
  --h2:               50px;
  --radius-pill:       999px;
}


/* ─────────────────────────────────────────────────────────────────
   4. BORDER RADIUS SYSTEM
   ───────────────────────────────────────────────────────────────── */

:root {
  --mx-radius-none:  0;
  --mx-radius-xs:    4px;       /* tags, small badges */
  --mx-radius-sm:    8px;       /* inputs, small cards */
  --mx-radius-md:    12px;      /* default cards */
  --mx-radius-lg:    16px;      /* large cards, modals */
  --mx-radius-xl:    20px;      /* hero, bands */
  --mx-radius-2xl:   24px;      /* hero (mobile) */
  --mx-radius-3xl:   28px;      /* footer panels */
  --mx-radius-pill:  999px;     /* buttons, badges, pills */
  --mx-radius-full:  50%;       /* circular (avatars, FABs) */

  /* Backward compat */
  --r:               var(--mx-radius-lg);
}


/* ─────────────────────────────────────────────────────────────────
   5. SHADOW / ELEVATION SYSTEM
   ───────────────────────────────────────────────────────────────── */

/*
  Level 0: none
  Level 1: subtle lift (badges, chips)
  Level 2: resting cards
  Level 3: elevated cards, dropdowns
  Level 4: modals, sticky elements
  Level 5: hero, floating panels
  Level 6: full-page overlays
  Colored: interactive hover states (blue, violet, amber, green)
  Glass:   glassmorphism panels (header, bottom nav, modals)
*/

/* Backward compat */
/* --mx-shadow-1 through --mx-shadow-6 defined in color section */


/* ─────────────────────────────────────────────────────────────────
   6. ANIMATION TOKENS
   ───────────────────────────────────────────────────────────────── */

:root {
  /* ── DURATION SCALE ─────────────────────────────────────────── */
  --mx-duration-instant:  0ms;
  --mx-duration-fast:     100ms;
  --mx-duration-normal:   250ms;
  --mx-duration-slow:     400ms;
  --mx-duration-slower:   600ms;
  --mx-duration-slowest:  900ms;

  /* ── EASING FUNCTIONS ───────────────────────────────────────── */
  --mx-ease-default:      cubic-bezier(.4, 0, .2, 1);      /* Material */
  --mx-ease-in:           cubic-bezier(.4, 0, 1, 1);
  --mx-ease-out:          cubic-bezier(0, 0, .2, 1);
  --mx-ease-in-out:       cubic-bezier(.4, 0, .2, 1);
  --mx-ease-spring:       cubic-bezier(.32, .72, .24, 1);   /* Apple-like bounce */
  --mx-ease-bounce:       cubic-bezier(.34, 1.56, .64, 1);  /* overshoot */
  --mx-ease-expo-out:     cubic-bezier(.16, 1, .3, 1);      /* expo ease-out */
  --mx-ease-expo-in-out:  cubic-bezier(.87, 0, .13, 1);

  /* ── SPRING PHYSICS PARAMETERS (for JS animation) ──────────── */
  /*
    stiffness:  120 (default), 200 (snappy), 80 (gentle)
    damping:    14  (default), 20  (tight),  10  (loopy)
    mass:       1   (default), 0.8 (light),  1.2 (heavy)

    Example spring configs:
    --mx-spring-default:  { stiffness: 120, damping: 14, mass: 1 }
    --mx-spring-snappy:   { stiffness: 200, damping: 20, mass: 0.8 }
    --mx-spring-gentle:   { stiffness: 80,  damping: 12, mass: 1.2 }
    --mx-spring-bouncy:   { stiffness: 180, damping: 10, mass: 0.9 }
  */

  /* ── TRANSITION SHORTHANDS ──────────────────────────────────── */
  --mx-transition-fast:   var(--mx-duration-fast) var(--mx-ease-default);
  --mx-transition-normal: var(--mx-duration-normal) var(--mx-ease-default);
  --mx-transition-slow:   var(--mx-duration-slow) var(--mx-ease-default);
  --mx-transition-spring: var(--mx-duration-slow) var(--mx-ease-spring);
  --mx-transition-theme:  var(--mx-duration-slow) var(--mx-ease-default);

  /* ── Z-INDEX SCALE ──────────────────────────────────────────── */
  --mx-z-below:      -1;
  --mx-z-base:       1;
  --mx-z-card:       10;
  --mx-z-dropdown:   80;
  --mx-z-sticky:     60;
  --mx-z-header:     100;
  --mx-z-bottomnav:  200;
  --mx-z-fab:        210;
  --mx-z-mobilenav:  300;
  --mx-z-modal:      400;
  --mx-z-toast:      500;
  --mx-z-cookie:     600;
  --mx-z-skip:       700;
  --mx-z-overlay:    900;
}


/* ─────────────────────────────────────────────────────────────────
   7. COMPONENT TOKENS
   ───────────────────────────────────────────────────────────────── */

:root {
  /* ── CARD STYLES ────────────────────────────────────────────── */
  --mx-card-bg:           var(--mx-surface-0);
  --mx-card-bg-hover:     var(--mx-surface-0);
  --mx-card-border:       var(--mx-border-2);
  --mx-card-border-hover: var(--mx-accent);
  --mx-card-radius:       var(--mx-radius-lg);
  --mx-card-shadow:       var(--mx-shadow-2);
  --mx-card-shadow-hover: var(--mx-shadow-5);
  --mx-card-padding:      var(--mx-space-4);
  --mx-card-img-height:   170px;
  --mx-card-transition:   transform var(--mx-duration-normal) var(--mx-ease-spring),
                          box-shadow var(--mx-duration-normal),
                          border-color var(--mx-duration-normal);

  /* Glass card variant */
  --mx-card-glass-bg:     var(--mx-glass-bg);
  --mx-card-glass-border: var(--mx-glass-border);
  --mx-card-glass-blur:   var(--mx-glass-blur);

  /* ── BUTTON STYLES ──────────────────────────────────────────── */
  /* Primary (amber) */
  --mx-btn-primary-bg:      var(--mx-amber);
  --mx-btn-primary-color:   var(--mx-text-on-amber);
  --mx-btn-primary-shadow:  var(--mx-shadow-amber);
  --mx-btn-primary-radius:  var(--mx-radius-pill);
  --mx-btn-primary-padding: 14px 28px;
  --mx-btn-primary-weight:  var(--mx-weight-extrabold);

  /* Secondary (blue) */
  --mx-btn-secondary-bg:      var(--mx-accent);
  --mx-btn-secondary-color:   var(--mx-text-on-blue);
  --mx-btn-secondary-shadow:  var(--mx-shadow-blue);

  /* Ghost */
  --mx-btn-ghost-bg:        transparent;
  --mx-btn-ghost-color:     var(--mx-hero-text);
  --mx-btn-ghost-border:    1px solid rgba(255,255,255,.35);

  /* WhatsApp */
  --mx-btn-wa-bg:           var(--mx-whatsapp);
  --mx-btn-wa-color:        #ffffff;
  --mx-btn-wa-shadow:       var(--mx-shadow-green);

  /* Icon button */
  --mx-btn-icon-bg:         var(--mx-surface-0);
  --mx-btn-icon-color:      var(--mx-text-1);
  --mx-btn-icon-border:     var(--mx-border-2);
  --mx-btn-icon-radius:     var(--mx-radius-pill);
  --mx-btn-icon-padding:    9px 14px;

  /* ── BADGE STYLES ───────────────────────────────────────────── */
  --mx-badge-radius:     var(--mx-radius-pill);
  --mx-badge-padding:    4px 10px;
  --mx-badge-size:       11px;
  --mx-badge-weight:     var(--mx-weight-extrabold);

  /* Badge variants */
  --mx-badge-new-bg:     #111111;
  --mx-badge-new-color:  #ffffff;
  --mx-badge-aaa-bg:     var(--mx-success-soft);
  --mx-badge-aaa-color:  var(--mx-success-text);
  --mx-badge-aa-bg:      var(--mx-info-soft);
  --mx-badge-aa-color:   var(--mx-info-text);
  --mx-badge-a-bg:       var(--mx-warning-soft);
  --mx-badge-a-color:    var(--mx-warning-text);
  --mx-badge-off-bg:     var(--mx-amber);
  --mx-badge-off-color:  #111111;

  /* ── INPUT STYLES ───────────────────────────────────────────── */
  --mx-input-bg:         var(--mx-surface-2);
  --mx-input-bg-focus:   var(--mx-surface-0);
  --mx-input-color:      var(--mx-text-1);
  --mx-input-border:     var(--mx-border-2);
  --mx-input-border-focus: var(--mx-accent);
  --mx-input-radius:     var(--mx-radius-pill);
  --mx-input-padding:    12px 18px;
  --mx-input-font-size:  var(--mx-text-base);
  --mx-input-shadow-focus: 0 0 0 3px rgba(10,88,255,.25);
  --mx-input-shadow-focus-dark: 0 0 0 3px rgba(91,140,255,.25);

  /* ── NAV STYLES ─────────────────────────────────────────────── */
  --mx-nav-bg:           var(--mx-glass-bg);
  --mx-nav-bg-scrolled:  var(--mx-glass-bg-strong);
  --mx-nav-border:       var(--mx-border-2);
  --mx-nav-blur:         var(--mx-glass-blur);
  --mx-nav-height:       var(--mx-space-16); /* 64px */
  --mx-nav-link-color:   var(--mx-text-1);
  --mx-nav-link-active:  var(--mx-accent);
  --mx-nav-pill-bg:      var(--mx-surface-1);

  /* ── BOTTOM NAV (mobile) ────────────────────────────────────── */
  --mx-bottomnav-bg:     var(--mx-glass-bg-strong);
  --mx-bottomnav-height: 64px;
  --mx-bottomnav-blur:   20px;
  --mx-bottomnav-active: var(--mx-accent);
  --mx-bottomnav-color:  var(--mx-text-3);

  /* ── MODAL ──────────────────────────────────────────────────── */
  --mx-modal-bg:         var(--mx-surface-0);
  --mx-modal-border:     var(--mx-border-2);
  --mx-modal-radius:     var(--mx-radius-xl);
  --mx-modal-shadow:     var(--mx-shadow-glass-lg);
  --mx-modal-backdrop:   rgba(0,0,0,.5);

  /* ── COOKIE CONSENT ─────────────────────────────────────────── */
  --mx-cookie-bg:        var(--mx-surface-0);
  --mx-cookie-border:    var(--mx-border-2);
  --mx-cookie-radius:    var(--mx-radius-xl);
  --mx-cookie-shadow:    var(--mx-shadow-glass-lg);

  /* ── BOTTOM SHEET (mobile) ──────────────────────────────────── */
  --mx-sheet-bg:         var(--mx-surface-0);
  --mx-sheet-radius-tl:  var(--mx-radius-xl);
  --mx-sheet-radius-tr:  var(--mx-radius-xl);
  --mx-sheet-shadow:     0 -10px 40px rgba(0,0,0,.2);
  --mx-sheet-handle-bg:  var(--mx-border-2);
}


/* ─────────────────────────────────────────────────────────────────
   8. CSS ARCHITECTURE
   ─────────────────────────────────────────────────────────────────

   FILE STRUCTURE:
   css/
   ├── tokens.css          ← THIS FILE (all custom properties)
   ├── reset.css           ← Minimal reset + base element styles
   ├── layout.css          ← Grid system, .wrap, .container
   ├── animations.css      ← @keyframes, .reveal, .word-wrap
   ├── utilities.css       ← .mx-clamp-2, .mx-skip, .mx-safe-*
   ├── components.css      ← Cards, buttons, badges, chips, pills
   ├── header.css          ← .nav-glass, nav.main, .lang, .searchbar
   ├── footer.css          ← .mx-footer, .sticky, .fab
   ├── glass.css           ← .glass, .glass-strong, .glass-card
   ├── hero.css            ← .hero, .slides, .phone3d, .stats-band
   ├── repair.css          ← .dev, .av, .model, .pills, .avs
   ├── tasador.css         ← .tas, .box, .resbox, .chips
   ├── legal.css           ← .mx-legal, .mx-ck, .mx-ck-panel
   ├── search.css          ← .search-drop, .modal, .modal-bg
   └── styles.css          ← @import master (single link tag)

   SPECIFICITY STRATEGY:
   - Tokens: lowest specificity (custom properties)
   - Base reset: element selectors (html, body, a, img)
   - Components: single class (.card, .btn, .badge)
   - Modifiers: class + class (.btn.blue, .card:hover)
   - Never use IDs for styling (except :target for a11y)
   - Never use !important (except reduced-motion)
   - Override order: tokens → reset → layout → components → pages

   CUSTOM PROPERTY NAMING CONVENTION:
   --mx-{category}-{variant}-{state}-{modifier}
   Examples:
     --mx-surface-0           (surface, level 0)
     --mx-text-2              (text, level 2)
     --mx-shadow-4            (shadow, level 4)
     --mx-card-border-hover   (card border, hover state)
     --mx-btn-primary-bg      (button, primary variant, background)

   MEDIA QUERY STRATEGY:
   Mobile-first with max-width for specific overrides.
   Breakpoints: 480 → 700 → 920 → 1100 → 1480
   See section 9 for full definitions.

   DARK MODE IMPLEMENTATION:
   - [data-theme="dark"] on <html> element
   - Tokens swap at root level (all components adapt automatically)
   - Hero/stats/footer are always-dark (hardcoded colors, no token swap)
   - Theme applied before paint via inline <script> in <head>
   - Smooth transition via --mx-transition-theme on background/color

   ───────────────────────────────────────────────────────────────── */


/* ─────────────────────────────────────────────────────────────────
   9. RESPONSIVE BREAKPOINTS
   ─────────────────────────────────────────────────────────────────

   NAME            MIN-WIDTH   MAX-WIDTH   TARGET
   ─────────────────────────────────────────────────────────
   xs (mobile-s)   0           479px       Small phones
   sm (mobile)     480px       699px       Standard phones
   md (tablet)     700px       919px       Tablets, large phones
   lg (desktop)    920px       1099px      Small desktops, landscape tablets
   xl (wide)       1100px      1479px      Standard desktops
   2xl (ultrawide) 1480px      —           Large screens

   CONTAINER QUERY STRATEGY:
   - Not used currently (static site, no component-level resizing)
   - If added later: @container queries on card grids for responsive cards
   - Reserve class: .mx-container-query for future use

   GRID SYSTEM RULES:
   - CSS Grid with named areas for complex layouts
   - 12-column conceptual grid (not rigid — flexible fr units)
   - Gap: var(--mx-gap-md) = 14px (card grids), var(--mx-gap-lg) = 20px (sections)
   - Collapse: 3-col → 2-col at 920px → 1-col at 700px
   - Bento: first card spans 2 cols, collapses at 700px
   - Hero: 2-col (1.05fr 0.95fr) → 1-col at 920px

   ───────────────────────────────────────────────────────────────── */

:root {
  /* Breakpoint values (for reference — use in @media) */
  --mx-bp-xs:  0px;
  --mx-bp-sm:  480px;
  --mx-bp-md:  700px;
  --mx-bp-lg:  920px;
  --mx-bp-xl:  1100px;
  --mx-bp-2xl: 1480px;

  /* Touch targets (WCAG 2.5.8) */
  --mx-tap-min:          44px;
  --mx-tap-comfortable:  48px;
}


/* ─────────────────────────────────────────────────────────────────
   10. ACCESSIBILITY TOKENS
   ───────────────────────────────────────────────────────────────── */

:root {
  /* ── FOCUS RING STYLES ──────────────────────────────────────── */
  --mx-focus-ring-width:   3px;
  --mx-focus-ring-offset:  2px;
  --mx-focus-ring-color:   var(--mx-accent);
  --mx-focus-ring-radius:  var(--mx-radius-sm);
  --mx-focus-ring-style:   solid;

  /* Focus ring shorthand */
  --mx-focus-ring:         var(--mx-focus-ring-width) var(--mx-focus-ring-style) var(--mx-focus-ring-color);
  --mx-focus-outline:      var(--mx-focus-ring) var(--mx-focus-ring-offset);

  /* ── SKIP LINK STYLES ───────────────────────────────────────── */
  --mx-skip-bg:            var(--mx-text-1);
  --mx-skip-color:         var(--mx-surface-0);
  --mx-skip-padding:       10px 16px;
  --mx-skip-radius:        var(--mx-radius-pill);
  --mx-skip-font-size:     var(--mx-text-sm);
  --mx-skip-font-weight:   var(--mx-weight-extrabold);
  --mx-skip-top:           -60px;
  --mx-skip-top-focus:     12px;
  --mx-skip-z:             var(--mx-z-skip);
  --mx-skip-transition:    top var(--mx-duration-fast) var(--mx-ease-default);

  /* ── REDUCED MOTION OVERRIDES ───────────────────────────────── */
  /*
    All animations and transitions are disabled via:
    @media (prefers-reduced-motion: reduce) { ... }
    This is the global kill-switch. Do NOT override with !important
    except in this media query.
  */

  /* ── TOUCH TARGET SIZES (WCAG 2.5.8) ───────────────────────── */
  --mx-touch-min:         44px;
  --mx-touch-comfortable: 48px;

  /* ── COLOR CONTRAST MINIMUMS ────────────────────────────────── */
  /*
    Normal text:   >= 4.5:1 contrast ratio
    Large text:    >= 3:1 (18px+ bold, or 24px+ regular)
    UI components: >= 3:1 against adjacent colors
    Focus indicators: >= 3:1 against background
  */

  /* ── SCREEN READER ONLY ─────────────────────────────────────── */
  --mx-sr-only-pos:   absolute;
  --mx-sr-only-width: 1px;
  --mx-sr-only-height: 1px;
  --mx-sr-only-pad:   0;
  --mx-sr-only-margin: -1px;
  --mx-sr-only-overflow: hidden;
  --mx-sr-only-white-space: nowrap;
  --mx-sr-only-border: 0;
}


/* ─────────────────────────────────────────────────────────────────
   11. CARD SYSTEM CONSUMABLES (una sola fuente para todas las vistas)
   ───────────────────────────────────────────────────────────────── */

:root {
  /* ── FOTO (un solo mando para el tamaño en TODAS las tarjetas) ── */
  --mx-card-img-h:      200px;

  /* ── CUERPO ───────────────────────────────────────────────────── */
  --mx-card-bd-pad:      var(--mx-space-4);   /* 16px */

  /* ── BOTÓN TARJETA (Consultar / Detalles) ─────────────────────── */
  --mx-btn-card-size:    13px;
  --mx-btn-card-pad:     10px 20px;
  --mx-btn-card-radius:  var(--mx-radius-pill);
}