/* ================================================================
   INKX — Design System Global
   variables.css  →  importado por todos los demás CSS
   ================================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ── Variables globales ───────────────────────────────────────── */
:root {
  /* Paleta principal (Tema oscuro) */
  --black:       #070707;
  --gray-800:    #101010;
  --gray-700:    #1A1A1A;
  --gray-600:    #2B2B2B;
  --gray-500:    #4D4D4D;
  --gray-400:    #737373;
  --gray-300:    #9b9693;
  --gray-200:    #242422;
  --gray-100:    #1a1a1a;
  --gray-50:     #141414;
  --off-white:   #0d0d0d;
  --white:       #FFFFFF;
  
  --line:        rgba(255,255,255,0.10);

  /* Acento crimson */
  --crimson:     #8F1325;
  --crimson-dk:  #c51d38;
  --crimson-lt:  #ff304d;
  --crimson-xs:  rgba(143,19,37,.15);

  /* Semánticos */
  --success:     #2D6A4F;
  --success-bg:  #D8F3DC;
  --warning:     #7B5E00;
  --warning-bg:  #FFF3CD;
  --danger:      var(--crimson);
  --danger-bg:   var(--crimson-xs);
  --info:        #0A4C7A;
  --info-bg:     #D6EAF8;

  /* Tipografía */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', Consolas, monospace;

  /* Escala tipográfica */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  40px;
  --text-4xl:  56px;
  --text-5xl:  72px;
  --text-hero: clamp(52px, 6vw, 88px);

  /* Line-heights */
  --leading-tight:  1.1;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* 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;

  /* Layout */
  --nav-height:     72px;
  --container-max:  1280px;
  --container-pad:  48px;
  --sidebar-width:  260px;

  /* Radios */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  20px;
  --radius-full: 9999px;

  /* Bordes */
  --border:       1px solid var(--gray-100);
  --border-md:    1px solid var(--gray-200);
  --border-dark:  1px solid var(--gray-300);

  /* Sombras */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.12);

  /* Transiciones */
  --ease:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --duration-slower: 600ms;

  /* Z-index */
  --z-dropdown:  50;
  --z-sticky:    100;
  --z-navbar:    200;
  --z-modal:     300;
  --z-toast:     400;
}