/* ============================================================
   HOLIVINE STUDIO 2.0 — Design Tokens
   Inspirado en maplo.es: limpio, moderno, aire, profesional
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ── Paleta principal (oscura, intensa) ── */
  --primary:        #5B4BC7;
  --primary-light:  #8B7FE8;
  --primary-dark:   #3A2A9E;
  --primary-bg:     #E8E4FF;

  /* ── Acentos cálidos (herencia Holivine) ── */
  --accent:         #C9553D;
  --accent-light:   #E8907D;
  --accent-dark:    #9E2F1A;
  --accent-bg:      #FFF0EC;

  /* ── Neutrales ── */
  --white:          #FFFFFF;
  --gray-50:        #F8F9FA;
  --gray-100:       #F1F3F5;
  --gray-200:       #E9ECEF;
  --gray-300:       #DEE2E6;
  --gray-400:       #CED4DA;
  --gray-500:       #ADB5BD;
  --gray-600:       #868E96;
  --gray-700:       #495057;
  --gray-800:       #343A40;
  --gray-900:       #212529;
  --black:          #0F0F0F;

  /* ── Semánticos ── */
  --success:        #00B894;
  --success-bg:     #EAFFF8;
  --warning:        #FDCB6E;
  --warning-bg:     #FFFBEA;
  --error:          #FF7675;
  --error-bg:       #FFF0F0;
  --info:           #74B9FF;
  --info-bg:        #EDF5FF;

  /* ── Superficies ── */
  --surface:        var(--white);
  --surface-raised: var(--white);
  --surface-sunken: #F4F2F8;
  --body-bg:        #EDEAF5;
  --sidebar-bg:     #1E1440;
  --sidebar-border: rgba(255,255,255,0.08);

  /* ── Texto ── */
  --text-primary:   var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-tertiary:  var(--gray-500);
  --text-inverse:   var(--white);
  --text-link:      var(--primary);

  /* ── Tipografía ── */
  --font-sans:      'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
  --font-serif:     'Playfair Display', Georgia, serif;
  --font-mono:      'SF Mono', 'Fira Code', monospace;

  --text-xs:    0.6875rem;  /* 11px */
  --text-sm:    0.8125rem;  /* 13px */
  --text-base:  0.9375rem;  /* 15px */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.375rem;   /* 22px */
  --text-2xl:   1.75rem;    /* 28px */
  --text-3xl:   2.25rem;    /* 36px */
  --text-4xl:   3rem;       /* 48px */

  --leading-tight:  1.2;
  --leading-normal: 1.5;
  --leading-relaxed:1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;

  /* ── Espaciado ── */
  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */

  /* ── Bordes ── */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-2xl: 28px;
  --radius-full:9999px;

  --border-light:  1px solid var(--gray-200);
  --border-medium: 1.5px solid var(--gray-300);

  /* ── Sombras ── */
  --shadow-xs:   0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:   0 2px 8px 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.10);
  --shadow-xl:   0 16px 48px rgba(0,0,0,0.12);
  --shadow-glow: 0 0 20px rgba(108,92,231,0.15);

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

  /* ── Layout ── */
  --sidebar-width:     260px;
  --sidebar-collapsed:  72px;
  --topbar-height:      0px;
  --content-max-width: 1200px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--body-bg);
  min-height: 100vh;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }
a { color: var(--text-link); text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }

::selection {
  background: var(--primary-light);
  color: var(--white);
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

/* ── Utilities ── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.truncate {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Animations ── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.animate-in {
  animation: fadeIn var(--duration-slow) var(--ease-out) both;
}