/**
 * Universal Design Tokens — Generated by tokens-build.js
 * Source: tokens.json
 * DO NOT EDIT MANUALLY — Update spec/tokens/tokens.json instead
 */

:root {
  /* 🎨 Colors — Estética Arquitectónica Blanca y Serena (Inspirada en Tillberg Design) */
  --color-brand-primary: #082e38;      /* Azul petróleo escandinavo / carbón profundo */
  --color-brand-secondary: #23768c;    /* Azul cerúleo técnico sutil */
  --color-brand-accent: #27ad9f;       /* Verde turquesa contraste característico Tillberg (#7fe2d8 / #27ad9f) */
  --color-brand-urgency: #b91c1c;      /* Rojo alerta refinado */
  
  --color-background-canvas: #fcfcfc;  /* Fondo blanco puro arquitectónico (#fcfcfc) */
  --color-background-surface: #ffffff; /* Superficie inmaculada */
  --color-background-elevated: #f5f7f8;/* Gris neutro etéreo suave */
  --color-background-subtle: #edf2f4;  /* Bloques de sección contraste suave */
  
  --color-text-primary: #0c0c0c;       /* Negro grafito puro para máxima legibilidad */
  --color-text-secondary: #4a5568;     /* Gris arquitectónico medio */
  --color-text-muted: #8c9ba5;         /* Gris claro para leyendas y detalles */
  --color-text-inverse: #fcfcfc;       /* Blanco puro sobre fondos oscuros */
  
  --color-border-subtle: rgba(8, 46, 56, 0.08);
  --color-border-strong: rgba(8, 46, 56, 0.16);
  --color-border-focus: #082e38;

  /* 🔤 Tipografías Variables Fluidas con clamp() de 320px a 3840px (4K / Ultrawide) */
  --font-sans: 'Encode Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-heading: 'Encode Sans', sans-serif;

  /* Pesos tipográficos calibrados para óptima legibilidad (mínimo 400 en textos corridos) */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Escala tipográfica fluida con clamp() — calibrada para legibilidad perfecta:
     --font-size-xs: mínimo 12px (0.75rem) en móviles pequeños, escala hasta 14px (0.875rem)
     --font-size-sm: mínimo 13.5px-14px (0.875rem), escala hasta 16px (1rem)
     --font-size-base: mínimo 15.5px-16px (0.975rem / 1rem), escala hasta 18px (1.125rem)
     --font-size-md: mínimo 17.5px-18px (1.1rem), escala hasta 21px (1.3rem)
  */
  --font-size-xs:   clamp(0.78rem, 0.74rem + 0.2vw,  0.88rem); /* ~12.5px a 14px */
  --font-size-sm:   clamp(0.875rem, 0.84rem + 0.2vw, 1.02rem); /* ~14px a 16.3px */
  --font-size-base: clamp(0.975rem, 0.94rem + 0.25vw, 1.15rem); /* ~15.6px a 18.4px */
  --font-size-md:   clamp(1.1rem,   1.04rem + 0.35vw, 1.35rem); /* ~17.6px a 21.6px */
  --font-size-lg:   clamp(1.25rem,  1.15rem + 0.55vw, 1.65rem); /* ~20px a 26.4px */
  --font-size-xl:   clamp(1.48rem,  1.32rem + 0.9vw,  2.1rem);
  --font-size-2xl:  clamp(1.75rem,  1.48rem + 1.2vw,  2.6rem);
  --font-size-hero: clamp(2.15rem,  1.75rem + 2vw,    3.8rem);

  /* 📐 Espaciados Fluidos Más Consistentes y Proporcionados (Ajuste Vertical Óptimo) */
  --space-1: clamp(0.25rem, 0.2rem + 0.1vw, 0.4rem);
  --space-2: clamp(0.45rem, 0.35rem + 0.25vw, 0.75rem);
  --space-3: clamp(0.75rem, 0.6rem + 0.35vw, 1rem);
  --space-4: clamp(1rem, 0.85rem + 0.5vw, 1.5rem);
  --space-6: clamp(1.5rem, 1.25rem + 0.8vw, 2.25rem);
  --space-8: clamp(2rem, 1.6rem + 1.2vw, 3rem);
  --space-10: clamp(2.5rem, 2rem + 1.6vw, 3.75rem);
  --space-12: clamp(3rem, 2.5rem + 2vw, 4.75rem);
  --space-16: clamp(4rem, 3.2rem + 2.8vw, 6.5rem);
  --space-24: clamp(5.5rem, 4.5rem + 3.8vw, 9rem);

  /* Layout Full Width Responsivo con Márgenes de Seguridad Fluidos */
  --page-padding-x: clamp(1.25rem, 0.5rem + 3.5vw, 7rem);
  --content-max-width: 2560px; /* Abarca pantallas Ultra-Wide / 4K nativamente */

  /* 🔘 Radii y Sombras Arquitectónicas (Líneas limpias, radios modernos) */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(8, 46, 56, 0.06);
  --shadow-lg: 0 16px 36px rgba(8, 46, 56, 0.08);

  /* 💎 Glassmorphism & Liquid Glass Tokens */
  --glass-bg-subtle: rgba(255, 255, 255, 0.72);
  --glass-bg-card: rgba(255, 255, 255, 0.85);
  --glass-bg-hover: rgba(255, 255, 255, 0.96);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-border-outer: rgba(8, 46, 56, 0.08);
  --glass-blur-sm: blur(10px);
  --glass-blur-md: blur(16px);
  --glass-blur-lg: blur(24px);
  --glass-specular: inset 0 1px 0 0 rgba(255, 255, 255, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  --glass-shadow: 0 8px 32px 0 rgba(8, 46, 56, 0.06);
  --glass-shadow-hover: 0 16px 40px 0 rgba(8, 46, 56, 0.12);

}