/* ========================================================================== Tokens de diseño — PyCon Panamá 2026 Única fuente de verdad para color, tipografía, espaciado y elevación. No escribir valores literales en el resto de las hojas: usar estas variables. ========================================================================== */ :root { /* --- Color: superficies ------------------------------------------------ */ --bg: #f4f8ff; --surface: #ffffff; --surface-muted: #eef4ff; /* --- Color: marca ------------------------------------------------------- Paleta 2026: azules vivos + amarillo/naranja + verdes, sobre navy oscuro. ------------------------------------------------------------------------ */ --accent: #2483f2; --accent-hover: #1e49e2; --accent-soft: rgba(36, 131, 242, 0.10); --accent-softer: rgba(36, 131, 242, 0.05); --highlight: #ffd400; /* --- Color: paleta secundaria (categorías, insignias, ilustraciones) ---- */ --color-navy: #0a3d68; --color-sky: #12a8f0; --color-teal: #0e93c4; --color-cyan-light: #96e6f6; --color-lime: #82d93f; --color-green: #17a673; --color-amber: #ffa800; --color-orange: #ff9500; --color-cream: #fcf3d9; /* --- Color: texto ------------------------------------------------------ */ --text: #111827; --text-secondary: #4b5563; --text-on-accent: #ffffff; /* --- Color: bordes ----------------------------------------------------- */ --border: rgba(47, 140, 255, 0.18); --border-soft: rgba(47, 140, 255, 0.10); /* --- Tipografía ---------------------------------------------------------- Montserrat (Google Fonts) — cargada en el de cada página. ------------------------------------------------------------------------ */ --font-sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Escala fluida: se adapta sola entre móvil y escritorio */ --fs-xs: 0.8125rem; /* 13px — etiquetas */ --fs-sm: 0.9375rem; /* 15px — texto auxiliar */ --fs-base: 1rem; /* 16px — cuerpo */ --fs-md: clamp(1.0625rem, 0.4vw + 1rem, 1.125rem); --fs-lg: clamp(1.1875rem, 0.6vw + 1.05rem, 1.375rem); --fs-h3: clamp(1.1875rem, 0.5vw + 1.1rem, 1.3125rem); --fs-h2: clamp(1.75rem, 2.2vw + 1.1rem, 2.75rem); --fs-h1: clamp(2.5rem, 5vw + 1rem, 4.5rem); --lh-tight: 1.15; --lh-heading: 1.25; --lh-body: 1.7; /* --- Espaciado (escala de 4px) ----------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* Ritmo vertical de las secciones: fluido entre móvil y escritorio */ --section-y: clamp(48px, 7vw, 96px); /* --- Layout ------------------------------------------------------------ */ --container-max: 1160px; /* ancho útil del contenido */ --container-gutter: 24px; /* margen lateral mínimo */ --measure: 68ch; /* ancho máximo de un párrafo legible */ --header-h: 72px; /* --- Radios ------------------------------------------------------------ */ --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 999px; /* --- Elevación --------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.04), 0 4px 12px rgba(17, 24, 39, 0.04); --shadow-md: 0 8px 24px rgba(47, 140, 255, 0.12); --shadow-lg: 0 18px 48px rgba(17, 24, 39, 0.10); /* --- Movimiento -------------------------------------------------------- */ --transition: 0.2s ease; /* --- Foco (accesibilidad) ---------------------------------------------- */ --focus-ring: 3px solid var(--accent); --focus-offset: 3px; /* --- Form controls ---------------------------------------------------- */ --input-bg: #ffffff; --input-border: rgba(17,24,39,0.08); --input-radius: 10px; --input-padding: 12px 14px; --color-error: #dc2626; --color-success: #059669; --form-message-bg: rgba(47,140,255,0.03); /* --- Botones ---------------------------------------------------------- */ --btn-primary-bg: var(--accent); --btn-primary-color: var(--text-on-accent); --btn-secondary-bg: transparent; --btn-secondary-color: var(--text); --btn-padding: 10px 18px; --btn-radius: 10px; }