/* Design tokens — Erismar Pimentel Portfolio v1.0 */

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

:root {
  /* Colores base */
  --ep-bg: #F8F6F1;
  --ep-surface: #FFFFFF;
  --ep-surface2: #F0EDE6;
  --ep-text: #1A1A18;
  --ep-text2: #6B6B67;
  --ep-text3: #9A9A96;
  --ep-border: rgba(26,26,24,0.10);
  --ep-border2: rgba(26,26,24,0.18);
  --ep-tag-bg: #EDEBE4;
  --ep-nav-bg: rgba(248,246,241,0.92);

  /* Acento — Terracota */
  --ep-accent: #C8522A;
  --ep-accent-dark: #993C1D;
  --ep-accent-light: rgba(200,82,42,0.10);

  /* Semánticos */
  --ep-success: #3DB87A;
  --ep-success-bg: rgba(61,184,122,0.12);

  /* Tipografía */
  --f-display: 'Playfair Display', Georgia, serif;
  --f-sans: 'Inter', system-ui, sans-serif;

  /* Espaciado base 4px */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* Border radius */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 24px;
  --r-full: 999px;
}

/* Dark mode */
.dark-mode {
  --ep-bg: #131310;
  --ep-surface: #1E1E1A;
  --ep-surface2: #252520;
  --ep-text: #F0EDE4;
  --ep-text2: #8A8880;
  --ep-text3: #5A5A56;
  --ep-accent: #E8704A;
  --ep-accent-dark: #C8522A;
  --ep-accent-light: rgba(232,112,74,0.12);
  --ep-tag-bg: #2A2A26;
  --ep-border: rgba(240,237,228,0.10);
  --ep-border2: rgba(240,237,228,0.18);
  --ep-nav-bg: rgba(19,19,16,0.92);
}