/* ============================================================
   MITSUBISHI MOTORS MÉXICO — DESIGN TOKENS
   tokens.css — Single source of truth for all design values
   ============================================================ */

/* ── MMC Office Tipografía Corporativa ── */
@font-face {
  font-family: 'MMC Office';
  src: url('../assets/fonts/MMCOFFICE-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'MMC Office';
  src: url('../assets/fonts/MMCOFFICE-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'MMC Office';
  src: url('../assets/fonts/MMCOFFICE-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {

  /* ── Brand Colors ── */
  --color-black:          #000000;
  --color-white:          #FFFFFF;
  --color-red:            #ED0000;
  --color-anthracite:     #686D71;
  --color-cold-gray:      #BFC2C4;
  --color-concrete-gray:  #E3E5E6;

  /* ── Text Colors ── */
  --text-primary:         #0A0A0A;
  --text-secondary:       #3C3C3C;
  --text-muted:           #686D71;
  --text-disabled:        #BFC2C4;
  --text-inverse:         #FFFFFF;
  --text-accent:          #ED0000;

  /* ── Background Colors ── */
  --bg-base:              #FFFFFF;
  --bg-subtle:            #F5F5F5;
  --bg-muted:             #E3E5E6;
  --bg-dark:              #0A0A0A;
  --bg-darker:            #000000;
  --bg-surface:           #FFFFFF;

  /* ── Surface Colors ── */
  --surface-1:            #FFFFFF;
  --surface-2:            #F5F5F5;
  --surface-3:            #E3E5E6;
  --surface-dark-1:       #111111;
  --surface-dark-2:       #1A1A1A;
  --surface-dark-3:       #242424;

  /* ── Border Colors ── */
  --border-subtle:        rgba(0, 0, 0, 0.08);
  --border-default:       rgba(0, 0, 0, 0.14);
  --border-strong:        rgba(0, 0, 0, 0.28);
  --border-inverse:       rgba(255, 255, 255, 0.16);
  --border-accent:        #ED0000;

  /* ── CTA / State Colors ── */
  --cta-primary:          #ED0000;
  --cta-primary-hover:    #C80000;
  --cta-primary-active:   #A80000;
  --cta-secondary:        #0A0A0A;
  --cta-secondary-hover:  #242424;
  --cta-ghost-hover:      rgba(237, 0, 0, 0.06);

  /* ── Feedback Colors ── */
  --color-error:          #D32F2F;
  --color-error-bg:       #FFF5F5;
  --color-success:        #2E7D32;
  --color-success-bg:     #F0FFF4;
  --color-warning:        #E65100;
  --color-warning-bg:     #FFF8F0;
  --color-info:           #0277BD;
  --color-info-bg:        #F0F8FF;

  /* ── Typography ── */
  --font-family-primary:  "MMC Office", Verdana, Arial, sans-serif;
  --font-family-mono:     "SF Mono", "Fira Code", monospace;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-bold:     700;

  /* Named role tokens — desktop values (mobile overrides TBD)
     Only these should be used for the specific UI roles listed.
     The fluid scale below (--text-xs … --text-display) is for everything else.
  */
  --text-h2:       40px;
  --text-h3:       18px;
  --text-subtitle: 18px;
  --text-price:    13px;
  --text-btn:      14px;
  --text-label:    11px;
  --text-input:    14px;
  --text-nav:      16px;
  --text-quick:    16px;

  /* Fluid type scale — general use (nav, body, footer, quick actions, etc.) */
  --text-xs:      clamp(0.75rem,   0.72rem + 0.15vw, 0.875rem);
  --text-sm:      clamp(0.875rem,  0.84rem + 0.18vw, 1rem);
  --text-md:      clamp(1rem,      0.96rem + 0.22vw, 1.125rem);
  --text-lg:      clamp(1.125rem,  1.05rem + 0.35vw, 1.375rem);
  --text-xl:      clamp(1.4rem,    1.1rem  + 1vw,    2rem);
  --text-2xl:     clamp(1.75rem,   1.3rem  + 1.6vw,  3rem);
  --text-display: 56px;

  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-loose:  1.8;

  --tracking-tight:  -0.03em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;

  /* ── Spacing (8px base scale) ── */
  --space-0: 0;
  --space-1: 0.5rem;   /* 8px  */
  --space-2: 1rem;     /* 16px */
  --space-3: 1.5rem;   /* 24px */
  --space-4: 2rem;     /* 32px */
  --space-5: 2.5rem;   /* 40px */
  --space-6: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */
  --space-10: 5rem;    /* 80px */
  --space-12: 6rem;    /* 96px */
  --space-15: 7.5rem;  /* 120px */
  --space-20: 10rem;   /* 160px */

  /* ── Border Radius ── */
  --radius-xs:   0.25rem;
  --radius-sm:   0.5rem;
  --radius-md:   1rem;
  --radius-lg:   1.5rem;
  --radius-xl:   2rem;
  --radius-pill: 999px;

  /* ── Shadows ── */
  --shadow-xs:     0 1px 3px rgba(0,0,0,.08);
  --shadow-soft:   0 16px 40px rgba(0,0,0,.08);
  --shadow-medium: 0 8px 24px rgba(0,0,0,.12);
  --shadow-strong: 0 24px 80px rgba(0,0,0,.22);
  --shadow-inset:  inset 0 1px 3px rgba(0,0,0,.08);

  /* ── Glass / Blur ── */
  --glass-bg:        rgba(255,255,255,.68);
  --glass-dark:      rgba(0,0,0,.42);
  --glass-border:    rgba(255,255,255,.22);
  --glass-dark-border: rgba(255,255,255,.1);
  --blur-sm:         blur(8px);
  --blur-md:         blur(16px);
  --blur-lg:         blur(24px);
  --blur-xl:         blur(40px);

  /* ── Transitions ── */
  --ease-default:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in:        cubic-bezier(0.55, 0, 1, 0.45);
  --ease-out:       cubic-bezier(0, 0.55, 0.45, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:  150ms;
  --duration-base:  250ms;
  --duration-slow:  400ms;
  --duration-xslow: 700ms;

  /* ── Z-index layers ── */
  --z-below:    -1;
  --z-base:      0;
  --z-above:     1;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-drawer:    300;
  --z-modal:     400;
  --z-toast:     500;

  /* ── Layout ── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;
  --container-max: 1600px;

  --header-height-mobile:  64px;
  --header-height-desktop: 80px;
  --sticky-cta-height:     72px;

  /* ── Breakpoints (reference only — use in media queries) ── */
  /* --bp-sm: 480px  */
  /* --bp-md: 768px  */
  /* --bp-lg: 1024px */
  /* --bp-xl: 1280px */
  /* --bp-2xl: 1440px */
}