/* ==========================================================================
   MERIDIAN Design System — Design Tokens v1.0
   Capa 1: primitivos · Capa 2: semánticos · Capa 3: componentes
   No usar primitivos directamente en CSS de componentes.
   ========================================================================== */

:root {

  /* ---------- 1. PRIMITIVOS · NEUTROS ---------- */
  --mrd-white:      #FFFFFF;
  --mrd-gray-50:    #F7F8F9;
  --mrd-gray-100:   #EFF1F2;
  --mrd-gray-150:   #E7E9EA;
  --mrd-gray-200:   #DEE0E3;
  --mrd-gray-250:   #D6D9DC;
  --mrd-gray-300:   #C6CACE;
  --mrd-gray-400:   #9EA3A9;
  --mrd-gray-500:   #636970;
  --mrd-gray-600:   #5B6167;
  --mrd-gray-700:   #3E4348;
  --mrd-gray-800:   #2A2E33;
  --mrd-gray-900:   #1A1D21;
  --mrd-gray-950:   #0F1113;
  --mrd-black:      #000000;

  /* ---------- 2. PRIMITIVOS · INK (acción primaria) ---------- */
  --mrd-ink-700:    #2C3035;
  --mrd-ink-800:    #1E2125;
  --mrd-ink-900:    #111315;
  --mrd-ink-1000:   #000000;

  /* ---------- 3. PRIMITIVOS · NAVY (acento de marca) ---------- */
  --mrd-navy-50:    #EDF2F8;
  --mrd-navy-100:   #D7E2EF;
  --mrd-navy-200:   #AEC4DD;
  --mrd-navy-400:   #4C7099;
  --mrd-navy-600:   #2C4E76;
  --mrd-navy-700:   #1E3A5C;
  --mrd-navy-800:   #162C47;
  --mrd-navy-900:   #0E1E33;

  /* ---------- 4. PRIMITIVOS · FEEDBACK ---------- */
  --mrd-success-50:  #E9F6EF;
  --mrd-success-200: #B6DFC8;
  --mrd-success-600: #1B7A4B;
  --mrd-success-800: #115231;

  --mrd-warning-50:  #FDF3E4;
  --mrd-warning-200: #F0D6A6;
  --mrd-warning-600: #9C5D00;
  --mrd-warning-800: #7A4700;

  --mrd-danger-50:   #FDECEA;
  --mrd-danger-200:  #F4C4BE;
  --mrd-danger-600:  #B42318;
  --mrd-danger-800:  #821710;

  --mrd-info-50:     #EAF2F9;
  --mrd-info-200:    #BBD5E9;
  --mrd-info-600:    #1E5A8A;
  --mrd-info-800:    #153F61;

  /* ---------- 5. SEMÁNTICOS · TEXTO ---------- */
  --mrd-color-text:                var(--mrd-gray-900);
  --mrd-color-text-strong:         var(--mrd-ink-900);
  --mrd-color-text-secondary:      var(--mrd-gray-600);
  --mrd-color-text-muted:          var(--mrd-gray-500);
  --mrd-color-text-placeholder:    var(--mrd-gray-400);
  --mrd-color-text-disabled:       var(--mrd-gray-400);
  --mrd-color-text-inverse:        var(--mrd-white);
  --mrd-color-text-inverse-muted:  rgba(255,255,255,.72);
  --mrd-color-text-link:           var(--mrd-ink-900);
  --mrd-color-text-link-hover:     var(--mrd-navy-700);
  --mrd-color-text-danger:         var(--mrd-danger-600);
  --mrd-color-text-success:        var(--mrd-success-600);
  --mrd-color-text-warning:        var(--mrd-warning-800);

  /* ---------- 6. SEMÁNTICOS · SUPERFICIES ---------- */
  --mrd-color-bg-page:      var(--mrd-gray-150);
  --mrd-color-bg-surface:   var(--mrd-white);
  --mrd-color-bg-subtle:    var(--mrd-gray-50);
  --mrd-color-bg-muted:     var(--mrd-gray-100);
  --mrd-color-bg-inverse:   var(--mrd-ink-900);
  --mrd-color-bg-brand:     var(--mrd-navy-700);
  --mrd-color-bg-overlay:   rgba(15,17,19,.56);
  --mrd-color-bg-hero-scrim:
      linear-gradient(180deg, rgba(15,17,19,.10) 0%, rgba(15,17,19,.72) 100%);

  /* ---------- 7. SEMÁNTICOS · BORDES ---------- */
  --mrd-color-border:         var(--mrd-gray-250);
  --mrd-color-border-subtle:  var(--mrd-gray-200);
  --mrd-color-border-strong:  var(--mrd-gray-300);
  --mrd-color-border-focus:   var(--mrd-ink-900);
  --mrd-color-border-danger:  var(--mrd-danger-600);
  --mrd-color-border-inverse: rgba(255,255,255,.24);

  /* ---------- 8. SEMÁNTICOS · INTERACCIÓN ---------- */
  --mrd-color-focus-ring:         rgba(76,112,153,.40);
  --mrd-color-focus-ring-inverse: rgba(255,255,255,.56);
  --mrd-color-selection-bg:       rgba(30,58,92,.18);

  /* ---------- 9. TIPOGRAFÍA ---------- */
  --mrd-font-sans: "Pretendard", "Inter", -apple-system, BlinkMacSystemFont,
                   "Segoe UI", Roboto, "Helvetica Neue", Arial,
                   "Noto Sans", sans-serif;
  --mrd-font-display: var(--mrd-font-sans);
  --mrd-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas,
                   "Liberation Mono", Menlo, monospace;

  --mrd-weight-regular:  400;
  --mrd-weight-medium:   500;
  --mrd-weight-semibold: 600;
  --mrd-weight-bold:     700;

  --mrd-text-display-1: 4rem;     /* 64 */
  --mrd-text-display-2: 3rem;     /* 48 */
  --mrd-text-display-3: 2.5rem;   /* 40 */
  --mrd-text-h1:        2rem;     /* 32 */
  --mrd-text-h2:        1.625rem; /* 26 */
  --mrd-text-h3:        1.3125rem;/* 21 */
  --mrd-text-h4:        1.125rem; /* 18 */
  --mrd-text-h5:        1rem;     /* 16 */
  --mrd-text-body-lg:   1.0625rem;/* 17 */
  --mrd-text-body:      0.9375rem;/* 15 */
  --mrd-text-body-sm:   0.875rem; /* 14 */
  --mrd-text-label:     0.8125rem;/* 13 */
  --mrd-text-caption:   0.75rem;  /* 12 */
  --mrd-text-overline:  0.6875rem;/* 11 */

  --mrd-leading-tight:  1.15;
  --mrd-leading-snug:   1.35;
  --mrd-leading-normal: 1.55;
  --mrd-leading-relaxed:1.70;

  --mrd-tracking-tight:  -0.02em;
  --mrd-tracking-normal: 0;
  --mrd-tracking-wide:   0.10em;

  /* ---------- 10. ESPACIADO ---------- */
  --mrd-space-0:  0;
  --mrd-space-1:  0.25rem;  /* 4  */
  --mrd-space-2:  0.5rem;   /* 8  */
  --mrd-space-3:  0.75rem;  /* 12 */
  --mrd-space-4:  1rem;     /* 16 */
  --mrd-space-5:  1.25rem;  /* 20 */
  --mrd-space-6:  1.5rem;   /* 24 */
  --mrd-space-8:  2rem;     /* 32 */
  --mrd-space-10: 2.5rem;   /* 40 */
  --mrd-space-12: 3rem;     /* 48 */
  --mrd-space-14: 3.5rem;   /* 56 */
  --mrd-space-16: 4rem;     /* 64 */
  --mrd-space-20: 5rem;     /* 80 */
  --mrd-space-24: 6rem;     /* 96 */

  /* ---------- 11. RADIOS ---------- */
  --mrd-radius-xs:   4px;
  --mrd-radius-sm:   6px;
  --mrd-radius-md:   8px;
  --mrd-radius-lg:   12px;
  --mrd-radius-xl:   16px;
  --mrd-radius-2xl:  24px;
  --mrd-radius-full: 9999px;

  /* ---------- 12. BORDES ---------- */
  --mrd-border-width:       1px;
  --mrd-border-width-thick: 2px;
  --mrd-border:        1px solid var(--mrd-color-border);
  --mrd-border-subtle: 1px solid var(--mrd-color-border-subtle);

  /* ---------- 13. SOMBRAS ---------- */
  --mrd-shadow-xs: 0 1px 2px rgba(15,17,19,.06);
  --mrd-shadow-sm: 0 1px 2px rgba(15,17,19,.05), 0 2px 6px rgba(15,17,19,.05);
  --mrd-shadow-md: 0 2px 6px rgba(15,17,19,.06), 0 8px 20px rgba(15,17,19,.08);
  --mrd-shadow-lg: 0 8px 24px rgba(15,17,19,.10), 0 24px 48px rgba(15,17,19,.10);
  --mrd-shadow-xl: 0 32px 64px -16px rgba(15,17,19,.24);
  --mrd-focus-ring: 0 0 0 3px var(--mrd-color-focus-ring);
  --mrd-focus-ring-inverse: 0 0 0 3px var(--mrd-color-focus-ring-inverse);

  /* ---------- 14. Z-INDEX ---------- */
  --mrd-z-base:     0;
  --mrd-z-sticky:   100;
  --mrd-z-dropdown: 300;
  --mrd-z-overlay:  400;
  --mrd-z-modal:    500;
  --mrd-z-toast:    600;
  --mrd-z-tooltip:  700;

  /* ---------- 15. LAYOUT ---------- */
  --mrd-container-max:    1280px;
  --mrd-container-narrow: 768px;
  --mrd-gutter:           var(--mrd-space-4);

  /* ---------- 16. CONTROLES ---------- */
  --mrd-control-height-sm: 36px;
  --mrd-control-height-md: 44px;
  --mrd-control-height-lg: 52px;
  --mrd-control-height-xl: 56px;
  --mrd-control-padding-x: var(--mrd-space-4);

  /* ---------- 17. MOTION ---------- */
  --mrd-duration-fast: 120ms;
  --mrd-duration-base: 180ms;
  --mrd-duration-slow: 280ms;
  --mrd-ease-standard: cubic-bezier(.2,0,0,1);
  --mrd-ease-out:      cubic-bezier(0,0,.2,1);
  --mrd-ease-in:       cubic-bezier(.4,0,1,1);
  --mrd-transition:    all var(--mrd-duration-base) var(--mrd-ease-standard);

  /* ---------- 18. ICONOS ---------- */
  --mrd-icon-sm: 16px;
  --mrd-icon-md: 20px;
  --mrd-icon-lg: 24px;
}

@media (min-width: 768px)  { :root { --mrd-gutter: var(--mrd-space-6); } }
@media (min-width: 1024px) { :root { --mrd-gutter: var(--mrd-space-8); } }