/* * tokens.css * Design tokens — Portafolio Froylan Díaz * Versión: 1.0 · Entregable #1 * * ESTRUCTURA * 1. Colores * 2. Tipografía * 3. Escala de texto * 4. Pesos * 5. Interlineado * 6. Espaciado * 7. Radios de borde * 8. Sombras * 9. Transiciones * 10. Z-index * 11. Contenedor y retícula * 12. Breakpoints (como tokens de referencia para JS) */ :root { /* ====================================================== * 1. COLORES * ====================================================== * * REGLAS DE CONTRASTE (WCAG AA — no negociables): * * --blue (#4285F4) sobre --white : 3.56:1 → solo texto ≥24px o íconos * --blue sobre --bg : 3.42:1 → solo texto ≥24px o íconos * --blue-text (#1967D2) sobre --white : 5.91:1 → OK para enlaces y texto ≥18px * --blue-text sobre --bg : 5.67:1 → OK para enlaces * --yellow (#F4B400) sobre --white : 1.85:1 → NUNCA como texto * --yellow sobre --black : 11.3:1 → chips, badges (texto --black) * --black (#111111) sobre --white : 18.1:1 → texto principal ✓ * --black sobre --bg : 17.4:1 → texto principal ✓ * --muted (#5F6368) sobre --white : 5.74:1 → texto secundario ✓ * --muted sobre --bg : 5.51:1 → texto secundario ✓ * --white sobre --black : 18.1:1 → botón primario ✓ * --white sobre --blue-text : 5.91:1 → botón secundario ✓ * * RIESGO DE MARCA: --blue, --yellow y Roboto se asocian a Google. * Solución: --black y --bg dominan la página; --blue y --yellow * solo aparecen en elementos de acento medidos (máx. 20% de superficie). * ====================================================== */ /* Marca */ --blue: #4285F4; /* Gráficos, íconos, texto decorativo ≥24px */ --blue-text: #1967D2; /* Enlaces, texto pequeño en azul, btn secundario */ --yellow: #F4B400; /* Barra de progreso, chips, flechas — NUNCA texto */ /* Neutros */ --black: #111111; /* Texto principal, botón primario */ --white: #FFFFFF; /* Tarjetas, fondos de componentes */ --bg: #FAFAF7; /* Fondo general (aprobado por Froylan) */ --muted: #5F6368; /* Texto secundario, metadatos */ /* Derivados de uso frecuente */ --border: #E8E8E4; /* Líneas divisoras, bordes de tarjeta */ --border-subtle: rgba(17, 17, 17, 0.08); /* Bordes muy tenues */ --overlay: rgba(17, 17, 17, 0.48); /* Fondos de modal, overlay */ /* Superficie de tarjeta (alias legible) */ --surface: var(--white); --surface-raised: #F4F4F0; /* Tarjeta ligeramente elevada sobre --bg */ /* Estado: foco (accesibilidad teclado) */ --focus-ring: 0 0 0 3px rgba(66, 133, 244, 0.45); /* ====================================================== * 2. TIPOGRAFÍA — FAMILIAS * ====================================================== */ --font-sans: 'Roboto', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'Roboto Mono', 'Courier New', monospace; --font-serif: 'Roboto Serif', Georgia, 'Times New Roman', serif; /* * Uso según rol: * --font-sans → titulares, cuerpo, botones, navegación * --font-mono → etiquetas técnicas, cifras clave, ficha técnica, índice * --font-serif → citas (uso opcional, controlado) */ /* ====================================================== * 3. ESCALA DE TEXTO * * Base: 17px (cuerpo legible en móvil y desktop) * Escala: modular ratio ~1.25 (Major Third) * Unidades en rem para respetar preferencias del usuario. * ====================================================== */ --text-xs: 0.75rem; /* 12px — metadatos, etiquetas pequeñas */ --text-sm: 0.8125rem; /* 13px — etiquetas, ficha técnica */ --text-base: 1.0625rem; /* 17px — cuerpo de texto */ --text-lg: 1.125rem; /* 18px — cuerpo destacado, subtítulos */ --text-xl: 1.25rem; /* 20px — subtítulos menores */ --text-2xl: 1.5rem; /* 24px — H3 */ --text-3xl: 1.875rem; /* 30px — H2 móvil */ --text-4xl: 2.25rem; /* 36px — H2 desktop / H1 móvil */ --text-5xl: 3rem; /* 48px — H1 desktop */ --text-6xl: 3.75rem; /* 60px — H1 hero (uso muy controlado) */ /* ====================================================== * 4. PESOS TIPOGRÁFICOS * ====================================================== */ --weight-regular: 400; --weight-medium: 500; --weight-bold: 700; /* ====================================================== * 5. INTERLINEADO * ====================================================== */ --leading-tight: 1.2; /* Titulares grandes */ --leading-snug: 1.35; /* Subtítulos */ --leading-normal: 1.6; /* Cuerpo de texto */ --leading-loose: 1.75; /* Texto largo / artículos */ /* ====================================================== * 6. ESPACIADO * * Base: 4px. Escala × 2 cada 2 pasos. * Permite componer ritmo vertical consistente. * ====================================================== */ --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 */ /* ====================================================== * 7. RADIOS DE BORDE * ====================================================== */ --radius-sm: 0.5rem; /* 8px — chips, badges, inputs */ --radius-md: 1rem; /* 16px — tarjetas normales */ --radius-lg: 1.5rem; /* 24px — tarjetas hero, modal */ --radius-full: 9999px; /* Píldoras, avatares, botones redondeados */ /* ====================================================== * 8. SOMBRAS * * Sistema de 3 niveles: plana → elevada → flotante * Sombras de color azul-negro para evitar grises genéricos. * ====================================================== */ --shadow-xs: 0 1px 2px rgba(17, 17, 17, 0.06); --shadow-sm: 0 2px 8px rgba(17, 17, 17, 0.08), 0 1px 2px rgba(17, 17, 17, 0.04); --shadow-md: 0 4px 16px rgba(17, 17, 17, 0.10), 0 2px 4px rgba(17, 17, 17, 0.06); --shadow-lg: 0 8px 32px rgba(17, 17, 17, 0.12), 0 4px 8px rgba(17, 17, 17, 0.08); /* Sombra de tarjeta apilada (efecto hero) */ --shadow-stack-1: 0 6px 0 -2px var(--border), 0 8px 0 -2px rgba(17,17,17,0.06); --shadow-stack-2: 0 10px 0 -4px var(--border), 0 14px 0 -4px rgba(17,17,17,0.04); /* ====================================================== * 9. TRANSICIONES * * Respetan prefers-reduced-motion vía media query en base.css. * ====================================================== */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Entrada suave */ --ease-in: cubic-bezier(0.4, 0, 1, 1); /* Salida */ --ease-inout: cubic-bezier(0.4, 0, 0.2, 1); /* Transición estándar */ --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms; --duration-slower: 600ms; --transition-base: var(--duration-base) var(--ease-inout); --transition-fast: var(--duration-fast) var(--ease-inout); --transition-slow: var(--duration-slow) var(--ease-out); /* ====================================================== * 10. Z-INDEX * * Escala explícita para evitar "z-index: 9999". * ====================================================== */ --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; /* Header, barra de progreso */ --z-overlay: 300; /* Fondos de modal */ --z-modal: 400; /* Modal, drawer */ --z-toast: 500; /* Notificaciones encima de todo */ /* ====================================================== * 11. CONTENEDOR Y RETÍCULA * ====================================================== */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1200px; /* Ancho máximo del contenido */ --container-pad: var(--space-6); /* Padding lateral en móvil: 24px */ /* Retícula punteada del fondo (usada en base.css como background) */ --dot-size: 1.5px; --dot-space: 24px; --dot-color: rgba(17, 17, 17, 0.09); /* ====================================================== * 12. BREAKPOINTS (referencia — se usan en media queries) * * No son variables CSS utilizables directamente en media queries, * pero se documentan aquí como fuente de verdad del sistema. * * 360px → móvil mínimo soportado * 640px → móvil grande / landscape * 768px → tablet * 1024px → laptop * 1280px → desktop * 1440px → desktop ancho * ====================================================== */ } /* fin :root */