Creeer-Web/tailwind.config.ts

import type { Config } from 'tailwindcss';

const config: Config = {
  content: ['./app/**/*.{ts,tsx}', './components/**/*.{ts,tsx}', './lib/**/*.{ts,tsx}'],
  theme: {
    extend: {
      colors: {
        // — Manual de Identidad Visual v1.0 (mayo 2026) —
        // Colores principales
        'azul-profundo': '#0A1D3D',    // Pantone 2965 C — texto, fondos oscuros, CTAs
        'dorado': {
          DEFAULT: '#C4942E',           // Pantone 872 C — acentos, títulos, símbolo ≡
          // El dorado del manual sobre fondo claro es un problema de lectura,
          // no de gusto: 2,76:1 sobre blanco y 2,46:1 sobre gris-claro, cuando
          // AA pide 4,5:1 para texto pequeño. Sobre azul profundo da 6,07:1 y
          // ahí no se toca. Éste es el mismo tono bajado hasta 5,3:1 sobre
          // blanco y 4,7:1 sobre gris-claro, y existe para una sola cosa:
          // TEXTO PEQUEÑO SOBRE FONDO CLARO. Rellenos, reglas, iconos, el ≡ y
          // todo lo que vaya sobre navy siguen usando el DEFAULT.
          texto: '#8A6520',
        },
        // Colores neutros
        'azul-claro': '#C8EEF5',       // fondos alternativos, secciones suaves
        'gris-claro': '#F2F2F2',       // fondos neutros, separadores
        'gris-medio': '#AAAAAA',       // texto secundario, placeholders
        // Aliases semánticos (backward compat + legibilidad en componentes)
        ink: '#0A1D3D',                // texto principal
        'bg-dark': '#0A1D3D',          // secciones oscuras
      },
      fontFamily: {
        // Open Sans (OFL) vía next/font/google — lo más cercano a Aptos en open-source
        // (mismo diseñador: Steve Matteson). Cero autoalojamiento, cero problemas de licencia.
        sans: ['var(--font-open-sans)', 'system-ui', 'sans-serif'],
      },
      // Profundidad. Un color plano de fondo se lee como bloque impreso: no
      // tiene fuente de luz y todas las secciones pesan igual. Cada uno de
      // estos degradados levanta un punto y hunde los bordes, así que la
      // página gana relieve sin salirse de la paleta del manual.
      //
      // Van siempre acompañados de su color sólido (`bg-azul-profundo
      // bg-hondo-navy`): el color pinta `background-color` y el degradado
      // `background-image`, de modo que si el segundo no carga queda el fondo
      // correcto y no un hueco blanco.
      backgroundImage: {
        'hondo-navy': 'radial-gradient(125% 95% at 12% 0%, #18345F 0%, #0A1D3D 52%, #061530 100%)',
        'hondo-claro': 'radial-gradient(120% 100% at 85% 0%, #FFFFFF 0%, #F2F2F2 58%, #E7E9EC 100%)',
        'hondo-blanco': 'radial-gradient(110% 90% at 18% 0%, #FFFFFF 0%, #FBFBFC 55%, #F0F2F5 100%)',
        // Dorado como superficie, no como muestra de color: más claro arriba,
        // como si le diera la luz.
        'dorado-metal': 'linear-gradient(145deg, #E2B75C 0%, #C4942E 46%, #9C7222 100%)',
        // Halo para soltar sobre las secciones oscuras.
        'velo-dorado': 'radial-gradient(50% 50% at 50% 50%, rgba(196,148,46,0.20) 0%, rgba(196,148,46,0) 70%)',
        'velo-frio': 'radial-gradient(50% 50% at 50% 50%, rgba(200,238,245,0.14) 0%, rgba(200,238,245,0) 70%)',
      },
      boxShadow: {
        // Dos sombras en vez de una: un contacto corto y cerrado que apoya la
        // tarjeta en la página, y una difusa y lejana que le da aire. Una sola
        // sombra siempre parece calcomanía.
        tarjeta: '0 1px 2px rgba(10,29,61,0.06), 0 12px 32px -12px rgba(10,29,61,0.14)',
        'tarjeta-alta': '0 2px 4px rgba(10,29,61,0.08), 0 28px 60px -20px rgba(10,29,61,0.28)',
      },
      maxWidth: {
        content: '1280px',
        // Medida de texto corrido. La tensión entre reglas anchas (1280px) y
        // texto angosto (68ch) es lo que hace que la composición se lea
        // editorial en vez de como un bloque de landing.
        medida: '68ch',
      },
      fontSize: {
        // Cinco roles. `display` se gasta UNA sola vez en toda la página.
        display: ['clamp(3.5rem, 9vw, 7rem)', { lineHeight: '0.94', letterSpacing: '-0.03em' }],
        titulo: ['clamp(2.25rem, 4.5vw, 3.5rem)', { lineHeight: '1', letterSpacing: '-0.02em' }],
        sumario: ['clamp(1.375rem, 2vw, 1.75rem)', { lineHeight: '1.35', letterSpacing: '-0.01em' }],
        cuerpo: ['1.0625rem', { lineHeight: '1.7' }],
        rotulo: ['0.75rem', { lineHeight: '1.2', letterSpacing: '0.3em' }],
        // Se van con la limpieza de la Tarea 13, cuando ya no queden secciones
        // viejas que los usen.
        ancla: ['clamp(2.5rem, 6.5vw, 4.5rem)', { lineHeight: '0.98', letterSpacing: '-0.025em' }],
        seccion: ['clamp(2rem, 4vw, 3.25rem)', { lineHeight: '1.02', letterSpacing: '-0.02em' }],
      },
    },
  },
  plugins: [],
};
export default config;