/*
 * tokens.css — Custom properties (design tokens)
 * Inpulso Pro — Diseño Lucía — v2 2026-05-17
 * Fuente de verdad: 02_SISTEMA_DISENO.md
 * NO modificar sin actualizar el design system.
 */

:root {
  /* ─── Tipografías ─────────────────────────────────────── */
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', 'Courier New', monospace;

  /* ─── Fondos ──────────────────────────────────────────── */
  --bg-base:      #0C0A09;
  --bg-raised:    #161311;
  --bg-overlay:   #1F1C1A;
  --bg-subtle:    #2A2522;

  /* ─── Textos ──────────────────────────────────────────── */
  --text-primary:   #F5F2EE;
  --text-secondary: #A09890;
  --text-tertiary:  #6A6058;
  --text-inverse:   #0C0A09;

  /* ─── Acento — terracota ──────────────────────────────── */
  --accent:        #C2410C;
  --accent-hover:  #DC5A1E;
  --accent-muted:  rgba(194, 65, 12, 0.10);
  --accent-subtle: rgba(194, 65, 12, 0.06);

  /* ─── Bordes ──────────────────────────────────────────── */
  --border-subtle:  rgba(245, 242, 238, 0.07);
  --border-default: rgba(245, 242, 238, 0.12);
  --border-strong:  rgba(245, 242, 238, 0.20);

  /* ─── Semánticos ──────────────────────────────────────── */
  --color-success: #16A34A;
  --color-warning: #D97706;
  --color-error:   #DC2626;

  /* ─── Espaciado ───────────────────────────────────────── */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */
  --space-40: 10rem;     /* 160px */
  --space-48: 12rem;     /* 192px */

  /* ─── Radios ──────────────────────────────────────────── */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-full: 9999px;

  /* ─── Escala tipográfica (fluid) ─────────────────────── */
  --text-display-xl: clamp(3.5rem, 10vw, 11.25rem);   /* 56–180px */
  --text-display-l:  clamp(2.5rem, 6vw, 6rem);        /* 40–96px  */
  --text-display-m:  clamp(2rem, 4vw, 4rem);           /* 32–64px  */
  --text-display-s:  clamp(1.5rem, 3vw, 2.5rem);      /* 24–40px  */
  --text-body-xl:    clamp(1.125rem, 1.5vw, 1.375rem); /* 18–22px  */
  --text-body-l:     clamp(1rem, 1.2vw, 1.125rem);    /* 16–18px  */
  --text-body-m:     clamp(1rem, 1.1vw, 1.0625rem);   /* 16–17px  */
  --text-body-s:     clamp(0.9375rem, 1vw, 1rem);        /* 15–16px */
  --text-mono-m:     clamp(0.875rem, 0.95vw, 0.9375rem); /* 14–15px */
  --text-mono-s:     clamp(0.8125rem, 0.88vw, 0.875rem); /* 13–14px */

  /* ─── Motion ─────────────────────────────────────────── */
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart:  cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);

  /* ─── Layout ─────────────────────────────────────────── */
  --max-width: 1400px;
  --gutter:    clamp(1.5rem, 4vw, 4rem);
  --grid-cols: 12;

  /* ─── Z-index scale ───────────────────────────────────── */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-overlay:  20;
  --z-modal:    30;
  --z-nav:      40;
  --z-cursor:   50;
}