/* ========================================================================== tokens.css — Design tokens para Piscícola Agualinda SAS Fuente de verdad visual. Nunca usar valores hardcoded fuera de aquí. ========================================================================== */ :root { /* --- Colores de marca (extraídos del logo) --- */ --accent: #1A6BC4; /* azul real del logo — acento principal */ --accent-hover: #1559A8; /* acento en hover/focus */ --accent-light: #E8F1FA; /* tint suave para fondos */ --accent-dark: #0D3E74; /* énfasis sobre fondo claro */ --brand-teal: #0E6B50; /* verde del círculo del logo */ /* --- Neutros (sistema Apple / Neftrouc) --- */ --ink: #1D1D1F; /* casi-negro — tipografía principal */ --ink-2: #6E6E73; /* copy secundaria, captions */ --ink-3: #86868B; /* meta, deshabilitados */ --ink-deep: #0B0D10; /* secciones oscuras */ --paper: #F5F5F7; /* fondo principal — gris muy claro */ --canvas: #FFFFFF; /* secciones intercaladas en blanco */ --line: #D2D2D7; /* separadores hairline */ /* --- Estado / Semánticos --- */ --green: #34C759; /* live, positivo, check */ --orange: #FF9500; /* advertencia */ /* --- WhatsApp --- */ --wa-green: #25D366; --wa-green-hover: #1DA851; /* --- Tipografía --- */ --font-sans: 'Geist', 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'Geist Mono', 'Fira Code', ui-monospace, monospace; --text-d1: clamp(3rem, 7vw, 5.5rem); /* hero title */ --text-d2: clamp(2.25rem, 5vw, 4rem); /* section title grande */ --text-h1: clamp(1.75rem, 3.5vw, 2.5rem); /* H1 de sección */ --text-h2: clamp(1.25rem, 2.5vw, 1.75rem); /* H2 */ --text-h3: clamp(1rem, 1.8vw, 1.25rem); /* H3 / card title */ --text-body: 1.0625rem; /* 17px */ --text-sm: 0.9375rem; /* 15px */ --text-caption: 0.8125rem; /* 13px */ --text-eyebrow: 0.75rem; /* 12px */ --weight-display: 600; --weight-body: 400; --weight-mono: 500; --leading-display: 1.05; --leading-body: 1.55; --leading-tight: 1.2; --tracking-display: -0.03em; --tracking-body: 0; --tracking-eyebrow: +0.1em; /* --- Espaciado (escala 4px) --- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* Aire vertical entre secciones */ --section-gap: clamp(4rem, 10vw, 8rem); /* --- Layout --- */ --max-width: 1280px; --max-width-text: 760px; /* ancho cómodo de lectura */ --gutter: clamp(1.25rem, 4vw, 2rem); /* --- Breakpoints (como referencia; usar en @media directamente) --- */ --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; /* --- Radios --- */ --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 9999px; /* --- Sombras --- */ --shadow-card: 0 1px 3px rgba(11, 13, 16, 0.06), 0 1px 2px rgba(11, 13, 16, 0.04); --shadow-float: 0 8px 24px rgba(11, 13, 16, 0.10), 0 2px 6px rgba(11, 13, 16, 0.06); /* --- Animaciones --- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1); --duration-fast: 150ms; --duration-base: 300ms; --duration-reveal: 600ms; /* --- Nav --- */ --nav-height: 64px; } /* ========================================================================== Modo oscuro — controlado con data-theme="dark" en No responde a prefers-color-scheme para garantizar que el día sea el modo por defecto independientemente del SO del visitante. ========================================================================== */ [data-theme="dark"] { --ink: #F5F5F7; --ink-2: #A1A1A6; --ink-3: #6E6E73; --ink-deep: #F5F5F7; --paper: #1C1C1E; --canvas: #111113; --line: #38383A; --accent: #2997FF; --accent-hover: #4AABFF; --accent-light: #0A2540; --accent-dark: #A8CFFF; --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-float: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.25); } /* Transición suave al cambiar de tema (JS añade .theme-changing a 300ms) */ .theme-changing *, .theme-changing *::before, .theme-changing *::after { transition: background-color 300ms cubic-bezier(0.22, 1, 0.36, 1), color 200ms cubic-bezier(0.22, 1, 0.36, 1), border-color 200ms cubic-bezier(0.22, 1, 0.36, 1), fill 200ms cubic-bezier(0.22, 1, 0.36, 1) !important; }