/* ═══════════════════════════════════════════════════════════ VARIABLES — Vanessa Lima Design System tokens Apple-clean neutrals + dificil-style accent/glow system ═══════════════════════════════════════════════════════════ */ :root { /* Ink neutrals */ --ink-900: #0a0a0b; --ink-700: #1d1d1f; --ink-500: #6e6e76; --ink-300: #a8a8b0; --ink-100: #e4e4e8; /* Surfaces */ --surface-0: #ffffff; --surface-50: #f8f8fa; --surface-100: #eef0f3; /* Accent palette (dificil color system) */ --color-green: #39ff88; --color-green-glow: rgba(57, 255, 136, 0.35); --color-cyan: #06b6d4; --color-cyan-glow: rgba(6, 182, 212, 0.35); --color-pink: #ff2ea6; --color-pink-glow: rgba(255, 46, 166, 0.35); --color-purple: #9b6bff; --color-purple-glow: rgba(155, 107, 255, 0.35); --color-orange: #f97316; --color-orange-glow: rgba(249, 115, 22, 0.35); /* Portfolio accents */ --accent-blue: #3d7bff; --accent-violet: var(--color-purple); --accent-coral: #ff6b5e; --accent-amber: #ffd400; --accent-pink: var(--color-pink); --accent-green: var(--color-green); /* Active accent (switched via data-color on ) */ --accent: var(--color-pink); --accent-glow: var(--color-pink-glow); --accent-green: var(--accent); /* Page layout — shared gutters so nav / hero / sections align */ --page-max: 1200px; --page-gutter: clamp(1.25rem, 5vw, 3.5rem); /* Platform brand colors */ --brand-linkedin: #0a66c2; --brand-linkedin-glow: rgba(10, 102, 194, 0.45); --brand-github: #24292f; --brand-github-glow: rgba(36, 41, 47, 0.4); --brand-whatsapp: #25d366; --brand-whatsapp-glow: rgba(37, 211, 102, 0.45); --brand-instagram: #e4405f; --brand-instagram-glow: rgba(228, 64, 95, 0.45); /* Gradients */ --gradient-aurora: linear-gradient(120deg, #3d7bff 0%, #9b6bff 45%, #ff6b5e 100%); --gradient-aurora-soft: linear-gradient(120deg, #c3d6ff 0%, #dcd0ff 50%, #ffd3cd 100%); /* Semantic */ --text-primary: var(--ink-900); --text-secondary: var(--ink-500); --text-tertiary: var(--ink-300); --text-inverse: var(--surface-0); --surface-page: var(--surface-0); --surface-card: var(--surface-50); --surface-elevated: var(--surface-0); --surface-inverse: var(--ink-900); --border-subtle: var(--ink-100); --border-strong: var(--ink-900); --accent-primary: var(--accent-blue); /* Typography */ --f-display: 'Space Grotesk', 'Inter', sans-serif; --f-body: 'Inter', sans-serif; --f-mono: 'JetBrains Mono', monospace; --text-display-xl: 700 clamp(2.75rem, 7vw, 6.5rem) / 0.98 var(--f-display); --text-display-lg: 700 clamp(2.25rem, 5vw, 4rem) / 1.02 var(--f-display); --text-display-md: 600 clamp(1.5rem, 3vw, 2.25rem) / 1.1 var(--f-display); --text-body-lg: 400 1.15rem / 1.6 var(--f-body); --text-body-md: 400 1rem / 1.6 var(--f-body); --text-body-sm: 400 0.875rem / 1.5 var(--f-body); --text-mono-sm: 500 0.75rem / 1.4 var(--f-mono); --tracking-tight: -0.02em; --tracking-wide: 0.08em; /* Spacing */ --sp-1: .5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2.5rem; --sp-5: 4rem; --sp-6: 6rem; --sp-7: 9rem; /* Effects */ --radius-sm: 10px; --radius-md: 18px; --radius-lg: 28px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(10, 10, 11, .06); --shadow-md: 0 8px 24px rgba(10, 10, 11, .08); --shadow-lg: 0 24px 64px rgba(10, 10, 11, .12); --shadow-glow: 0 0 0 1px rgba(10, 10, 11, .04), 0 20px 60px rgba(57, 255, 136, .22); --blur-nav: saturate(180%) blur(20px); /* Motion */ --ease-out-quart: cubic-bezier(.25, 1, .5, 1); --ease-in-out-soft: cubic-bezier(.65, 0, .35, 1); --ease-spring: cubic-bezier(.16, 1, .3, 1); --dur-fast: 150ms; --dur-base: 300ms; --dur-slow: 600ms; --dur-reveal: 900ms; --transition: 0.3s ease; /* Spotlight cursor (position updated via CSS vars) */ --spot-x: 50vw; --spot-y: 40vh; --spot-size: 38rem; } /* Accent color system (from dificil) */ [data-color="green"] { --accent: var(--color-green); --accent-glow: var(--color-green-glow); } [data-color="cyan"] { --accent: var(--color-cyan); --accent-glow: var(--color-cyan-glow); } [data-color="pink"] { --accent: var(--color-pink); --accent-glow: var(--color-pink-glow); } [data-color="purple"] { --accent: var(--color-purple); --accent-glow: var(--color-purple-glow); } [data-color="orange"] { --accent: var(--color-orange); --accent-glow: var(--color-orange-glow); }