/* ==========================================================================
   DESIGN SYSTEM TOKENS — Portfolio Nadir Jara (nadirjara.tech)
   Referenciado desde AGENTS.md y design-system.md
   ========================================================================== */

:root {
  /* 1. Paleta de color */
  --color-bg: #E5DED6;              /* Cashmere Silk — Fondo base */
  --color-text: #260705;            /* Dark Truffle — Texto principal */
  --color-accent: #7F0F1D;          /* Carmine Signature — CTAs, highlights */
  --color-accent-deep: #520E0D;     /* Velvet Wine — Active/pressed, sombras */
  --color-surface: rgba(38, 7, 5, 0.04);       /* Glass cálido reposo */
  --color-surface-strong: rgba(38, 7, 5, 0.08);/* Glass cálido hover */
  --color-border: rgba(82, 14, 13, 0.15);      /* Bordes sutiles y separadores */

  /* 2. Tipografía */
  --font-display: 'EB Garamond', Georgia, serif;
  --font-ui: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Escala tipográfica (base 16px, ratio 1.25) */
  --text-display: clamp(3rem, 7vw, 5rem);  /* 80px max */
  --text-h1: clamp(2.25rem, 5vw, 3rem);    /* 48px max */
  --text-h2: clamp(1.6rem, 3.5vw, 2rem);   /* 32px max */
  --text-h3: clamp(1.25rem, 2.5vw, 1.5rem);/* 24px max */
  --text-body-lg: 1.25rem;                 /* 20px */
  --text-body: 1rem;                       /* 16px */
  --text-ui: 1.25rem;                      /* 20px - Peso 600 */
  --text-caption: 0.875rem;                /* 14px */

  /* 3. Espaciado (base 8px) */
  --space-1: 0.5rem;   /* 8px */
  --space-2: 1rem;     /* 16px */
  --space-3: 1.5rem;   /* 24px */
  --space-4: 2rem;     /* 32px */
  --space-6: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */
  --space-12: 6rem;    /* 96px */
  --space-16: 8rem;    /* 128px */

  /* 4. Radios y sombras */
  --radius-sm: 8px;    /* tags, chips */
  --radius-md: 16px;   /* botones */
  --radius-lg: 24px;   /* tarjetas de proyecto */
  --radius-pill: 999px;/* nav dock, pill buttons */

  --shadow-soft: 0 4px 24px rgba(38, 7, 5, 0.08);
  --shadow-hover: 0 8px 32px rgba(82, 14, 13, 0.15);
}