/** * Root CSS Variables — Jeff Zambrano Portfolio Theme * * Todas las variables CSS del proyecto en :root. * No añadir estilos de componentes aquí. * Fiel al diseño original React (theme.css). * * @package JeffTheme * @author Developer - Agencia OH WOW! * @link https://agencia.ohwow.es * @version 1.1.0 */ :root { /* ─── Tipografías (idénticas al diseño original) ─── */ --font-display: 'Space Grotesk', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; /* IMPORTANTE: en el diseño original font-mono = Space Grotesk, NO JetBrains Mono */ --font-mono: 'Space Grotesk', system-ui, sans-serif; /* ─── Colores — Modo Claro ─── */ --color-background: #F7F7F2; --color-foreground: #141416; --color-primary: #D94515; --color-primary-fg: #FFFFFF; --color-secondary: #EEEEE8; --color-secondary-fg: #141416; --color-accent: #0891B2; --color-accent-fg: #FFFFFF; --color-card: #FFFFFF; --color-card-fg: #141416; --color-muted: #E8E8E1; --color-muted-fg: #52525B; --color-border: rgba(20, 20, 22, 0.15); --color-input-bg: #EEEEE8; /* ─── Valores dark guardados en :root (no activos, los activa .dark) ─── */ --color-dark-background: #0A0A0F; --color-dark-foreground: #E8E8E0; --color-dark-primary: #C4E54A; --color-dark-primary-fg: #0A0A0F; --color-dark-accent: #7EDCD0; --color-dark-accent-fg: #0A0A0F; --color-dark-card: #141418; --color-dark-card-fg: #E8E8E0; --color-dark-muted: #1A1A20; --color-dark-muted-fg: #8A8A94; --color-dark-secondary: #1A1A20; --color-dark-secondary-fg:#E8E8E0; /* ─── Colores RGB — modo claro (para rgba()) ─── */ --color-background-rgb: 247, 247, 242; --color-foreground-rgb: 20, 20, 22; --color-primary-rgb: 217, 69, 21; --color-accent-rgb: 8, 145, 178; --color-card-rgb: 255, 255, 255; /* ─── Colores RGB oscuro (para .dark) ─── */ --color-dark-bg-rgb: 10, 10, 15; --color-dark-fg-rgb: 232, 232, 224; --color-dark-primary-rgb:196, 229, 74; --color-dark-accent-rgb: 126, 220, 208; --color-dark-card-rgb: 20, 20, 24; /* ─── Colores CTA especiales (hard-coded como en el diseño) ─── */ /* Calendly + CTA final: teal light / cyan dark */ --color-cta-bg-light: #7EDCD0; --color-cta-fg-light: #0A0A0F; --color-cta-bg-dark: #0891B2; --color-cta-fg-dark: #FFFFFF; /* ─── Colores glow (hard-coded del diseño) ─── */ --color-glow-light: rgba(196, 229, 74, 0.10); --color-glow-accent: rgba(126, 220, 208, 0.08); --color-glow-dark: rgba(217, 69, 21, 0.10); /* ─── Tipografía fluida ─── */ --font-size-hero: clamp(3rem, 12vw, 10rem); --font-size-h1: clamp(2.5rem, 6vw, 7rem); --font-size-h2: clamp(2rem, 4vw, 3.5rem); --font-size-h3: clamp(1.25rem, 2.5vw, 1.5rem); --font-size-h4: clamp(1rem, 1.5vw, 1.25rem); --font-size-body: clamp(0.9375rem, 1vw + 0.5rem, 1.0625rem); --font-size-sm: clamp(0.8125rem, 0.8vw + 0.4rem, 0.9375rem); --font-size-xs: 0.75rem; --font-size-label: 0.6875rem; /* ─── Pesos ─── */ --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* ─── Letter-spacing (del diseño) ─── */ --tracking-label: 0.2em; --tracking-tight: -0.05em; --tracking-tighter:-0.03em; /* ─── Espaciados ─── */ --spacing-section: clamp(4rem, 10vw, 8rem); --spacing-section-sm: clamp(2.5rem, 6vw, 5rem); --spacing-container: clamp(1.25rem, 5vw, 2rem); --spacing-gap: clamp(0.75rem, 2vw, 1rem); --spacing-gap-md: clamp(1rem, 2.5vw, 1.25rem); --spacing-gap-lg: clamp(2rem, 5vw, 4rem); /* ─── Escala de espaciado fija ─── */ --spacing-1: 0.25rem; --spacing-2: 0.5rem; --spacing-3: 0.75rem; --spacing-4: 1rem; --spacing-5: 1.25rem; --spacing-6: 1.5rem; --spacing-7: 1.75rem; --spacing-8: 2rem; --spacing-10: 2.5rem; --spacing-12: 3rem; --spacing-14: 3.5rem; --spacing-16: 4rem; --spacing-20: 5rem; --spacing-24: 6rem; --spacing-28: 7rem; --spacing-32: 8rem; /* ─── Radios (de --radius: 0.875rem del diseño) ─── */ --radius-sm: 0.5rem; /* radius-sm: radius - 4px */ --radius-md: 0.75rem; /* radius-md: radius - 2px */ --radius-lg: 0.875rem; /* radius-lg: radius */ --radius-xl: 1.25rem; /* radius-xl: radius + 4px */ --radius-2xl: 1.5rem; --radius-3xl: 1.875rem; --radius-full: 9999px; /* ─── Sombras ─── */ --shadow-sm: 0 1px 3px rgba(20, 20, 22, 0.06); --shadow-md: 0 4px 16px rgba(20, 20, 22, 0.08); --shadow-lg: 0 8px 32px rgba(20, 20, 22, 0.1); --shadow-2xl: 0 24px 64px rgba(20, 20, 22, 0.2); /* ─── Transiciones ─── */ --transition-fast: 150ms ease; --transition-base: 300ms ease; --transition-slow: 500ms ease; --transition-spring: 700ms cubic-bezier(0.16, 1, 0.3, 1); /* ─── Layout ─── */ --container-max: 88rem; /* max-w-7xl = 80rem, usamos 88 para margen */ --container-px: clamp(1.25rem, 4vw, 1.5rem); --header-height: 70px; /* ─── Nav pill ─── */ --nav-pill-bg: rgba(255, 255, 255, 0.8); } /* ═══════════════════════════════════════════════ MODO OSCURO — activa las variables dark ═══════════════════════════════════════════════ */ .dark { --color-background: var(--color-dark-background); --color-foreground: var(--color-dark-foreground); --color-primary: var(--color-dark-primary); --color-primary-fg: var(--color-dark-primary-fg); --color-secondary: var(--color-dark-secondary); --color-secondary-fg: var(--color-dark-secondary-fg); --color-accent: var(--color-dark-accent); --color-accent-fg: var(--color-dark-accent-fg); --color-card: var(--color-dark-card); --color-card-fg: var(--color-dark-card-fg); --color-muted: var(--color-dark-muted); --color-muted-fg: var(--color-dark-muted-fg); --color-border: rgba(232, 232, 224, 0.08); --color-input-bg: #1A1A20; /* ─── RGB sobreescritos para que rgba() funcione en dark ─── */ --color-background-rgb: 10, 10, 15; --color-foreground-rgb: 232, 232, 224; --color-primary-rgb: 196, 229, 74; --color-accent-rgb: 126, 220, 208; --color-card-rgb: 20, 20, 24; /* ─── Sombras dark ─── */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5); --shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.6); /* ─── Nav pill dark ─── */ --nav-pill-bg: rgba(20, 20, 24, 0.85); }