/* ============================================
   MIMIR DIGITAL SOLUTIONS — DESIGN TOKENS
   Versión: 1.0.0
   ============================================ */

:root {

  /* ── AZULES ── */
  --color-blue-950:  #050D1A;
  --color-blue-900:  #0A1628;
  --color-blue-800:  #0D2347;
  --color-blue-700:  #0F3060;
  --color-blue-600:  #1A4A8A;
  --color-blue-500:  #2563C4;
  --color-blue-400:  #3B7DE8;
  --color-blue-300:  #6BA3F0;
  --color-blue-200:  #A8C8F8;
  --color-blue-100:  #D6E8FD;
  --color-blue-50:   #EEF5FE;

  /* ── ACENTO — Cian ── */
  --color-accent:        #00B4D8;
  --color-accent-hover:  #009BBD;
  --color-accent-light:  #E0F7FC;
  --color-accent-mid:    #48CAE4;

  /* ── NEUTROS ── */
  --color-gray-800:  #1E2235;
  --color-gray-600:  #4A5068;
  --color-gray-400:  #8A90A2;
  --color-gray-200:  #D8DCE8;
  --color-gray-100:  #EEF0F5;
  --color-gray-50:   #F8F9FC;
  --color-white:     #FFFFFF;

  /* ── ESTADOS ── */
  --color-success:       #1D9E75;
  --color-success-light: #E1F5EE;
  --color-warning:       #BA7517;
  --color-warning-light: #FAEEDA;
  --color-error:         #A32D2D;
  --color-error-light:   #FCEBEB;

  /* ── ALIAS FUNCIONALES ── */
  --color-brand-primary:  var(--color-blue-500);
  --color-brand-dark:     var(--color-blue-800);
  --color-brand-deeper:   var(--color-blue-950);
  --color-brand-hover:    var(--color-blue-600);

  --color-text-heading:   var(--color-blue-800);
  --color-text-body:      var(--color-gray-600);
  --color-text-muted:     var(--color-gray-400);
  --color-text-inverse:   var(--color-white);
  --color-text-accent:    var(--color-accent);

  --color-bg-page:        var(--color-gray-50);
  --color-bg-card:        var(--color-white);
  --color-bg-section-alt: var(--color-blue-50);
  --color-bg-dark:        var(--color-blue-900);
  --color-bg-darker:      var(--color-blue-950);

  --color-border:         var(--color-gray-200);
  --color-border-light:   var(--color-gray-100);
  --color-border-focus:   var(--color-blue-400);

  /* ── TIPOGRAFÍA ── */
  --font-heading: 'Manrope', -apple-system, sans-serif;
  --font-body:    'Inter', -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;

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

  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

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

  /* ── ESPACIADO ── */
  --space-1:    4px;
  --space-2:    8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32: 128px;

  --space-section:    var(--space-24);
  --space-section-sm: var(--space-16);
  --space-card:       var(--space-6);
  --space-gap:        var(--space-8);

  /* ── RADIOS ── */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  --border-width:      1px;
  --border-width-thin: 0.5px;

  /* ── SOMBRAS ── */
  --shadow-xs:       0 1px 2px rgba(5,13,26,.04);
  --shadow-sm:       0 1px 4px rgba(5,13,26,.06);
  --shadow-md:       0 4px 12px rgba(5,13,26,.08);
  --shadow-lg:       0 8px 24px rgba(5,13,26,.10);
  --shadow-card:     var(--shadow-sm);
  --shadow-card-hover: var(--shadow-md);

  /* ── LAYOUT ── */
  --max-width:        1200px;
  --max-width-narrow:  800px;
  --max-width-wide:   1400px;
  --container-px:     var(--space-6);

  /* ── TRANSICIONES ── */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.35s ease;

  /* ── Z-INDEX ── */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}

/* ── MODO OSCURO ── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-page:        var(--color-blue-950);
    --color-bg-card:        var(--color-blue-900);
    --color-bg-section-alt: var(--color-blue-800);
    --color-text-heading:   var(--color-white);
    --color-text-body:      var(--color-blue-200);
    --color-text-muted:     var(--color-blue-300);
    --color-border:         rgba(168,200,248,0.12);
    --color-border-light:   rgba(168,200,248,0.06);
    --shadow-card:          0 1px 4px rgba(0,0,0,.3);
    --shadow-card-hover:    0 4px 16px rgba(0,0,0,.4);
  }
}

[data-theme="dark"] {
  --color-bg-page:        var(--color-blue-950);
  --color-bg-card:        var(--color-blue-900);
  --color-text-heading:   var(--color-white);
  --color-text-body:      var(--color-blue-200);
  --color-text-muted:     var(--color-blue-300);
  --color-border:         rgba(168,200,248,0.12);
}