/* ===================================================
   DESIGN TOKENS
   Fuente: Manual de marca (Figma) — Foundations
   =================================================== */

:root {
  /* --- Colores principales (brand) --- */
  --color-black: #000000;
  --color-flag-red: #D4001A;
  --color-dim-grey: #636363;
  --color-white: #FFFFFF; /* corregido desde el manual, confirmar */

  /* --- Degradados --- */
  --gradient-red-black: linear-gradient(180deg, var(--color-flag-red), var(--color-black));
  --gradient-red-grey: linear-gradient(180deg, var(--color-flag-red), var(--color-dim-grey));
  --gradient-red-white: linear-gradient(180deg, var(--color-flag-red), var(--color-white));
  --gradient-black-grey: linear-gradient(180deg, var(--color-black), var(--color-dim-grey));
  --gradient-black-white: linear-gradient(180deg, var(--color-black), var(--color-white));
  --gradient-grey-white: linear-gradient(180deg, var(--color-dim-grey), var(--color-white));

  /* --- Tokens semánticos (lo que usaremos en los componentes) --- */
  --color-bg: var(--color-white);
  --color-bg-inverse: var(--color-black);
  --color-text: var(--color-black);
  --color-text-muted: var(--color-dim-grey);
  --color-text-inverse: var(--color-white);
  --color-accent: var(--color-flag-red);
  --color-surface-dark: color-mix(in srgb, var(--color-black) 92%, var(--color-white));

  /* --- Tipografía --- */
  --font-display: 'Inter', sans-serif;       /* H1 - sustituir por Metropolis cuando la tengamos para H2 */
  --font-heading: 'Metropolis', 'Inter', sans-serif; /* H2 */
  --font-body: 'Inter', sans-serif;          /* H3 / H4 */

  --fw-black: 900;
  --fw-bold: 700;
  --fw-medium: 500;
  --fw-regular: 400;

  /* Escala tipográfica (base = capturas del manual) */
  --fs-h1: 36px;
  --fs-h2: 24px;
  --fs-h3: 16px;
  --fs-h4: 12px;

  /* --- Radios de borde --- */
  --radius-lg: 25px;
  --radius-md: 15px;
  --radius-sm: 5px;

  /* --- Espaciado base (escala 8px, ajustaremos si tu Figma usa otra) --- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;

  /* --- Layout --- */
  --content-max: 1600px;
  --gutter: clamp(20px, 4vw, 72px);
  --header-height: clamp(72px, 7vw, 96px);
  --section-space: clamp(88px, 12vw, 192px);

  /* --- Tipografía fluida --- */
  --fs-display: clamp(3rem, 8.25vw, 9.5rem);
  --fs-section: clamp(2.25rem, 5vw, 5.5rem);
  --fs-project: clamp(2rem, 5vw, 5rem);
  --fs-body-lg: clamp(1rem, 1.4vw, 1.25rem);
  --fs-label: clamp(0.68rem, 0.75vw, 0.8rem);

  /* --- Movimiento y capas --- */
  --duration-fast: 180ms;
  --duration-base: 420ms;
  --duration-slow: 780ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --z-header: 50;
  --z-menu: 40;

  /* --- Detalles de interfaz --- */
  --border-subtle: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  --shadow-panel: 0 28px 80px rgb(0 0 0 / 0.32);
  --glass-bg: rgb(255 255 255 / 0.58);
  --glass-border: 1px solid rgb(255 255 255 / 0.2);
  --glass-shadow: 0 8px 28px rgb(0 0 0 / 0.08);
  --glass-blur: blur(14px) saturate(140%);
}