/* HILO Beauty Studio - design tokens Pulled verbatim from Figma file PJ94kLhyiSjm7EVSgbRYk7 (get_variable_defs). Do not hand-edit values: re-pull from Figma if the design changes. */ :root { /* ---- color: rose ---- */ --rose-7: #170d12; /* Gondola */ --rose-14: #3d0a26; --rose-15: #2e2028; --rose-20: #3a2b33; /* Thunder */ --rose-24: #75063f; --rose-25: #7c0645; --rose-47: #e5097f; /* Razzmatazz - brand magenta */ --rose-71: #ff6bb4; /* Hot Pink */ /* rose alpha ramp */ --rose-7-5: rgba(23, 13, 18, 0.05); --rose-7-7: rgba(23, 13, 18, 0.07); --rose-7-8: rgba(23, 13, 18, 0.08); --rose-7-10: rgba(23, 13, 18, 0.10); --rose-7-12: rgba(23, 13, 18, 0.12); --rose-7-13: rgba(23, 13, 18, 0.13); --rose-7-14: rgba(23, 13, 18, 0.14); --rose-7-34: rgba(23, 13, 18, 0.34); --rose-7-50: rgba(23, 13, 18, 0.50); --rose-7-55: rgba(23, 13, 18, 0.55); --rose-7-0: rgba(23, 13, 18, 0); --rose-47-10: rgba(229, 9, 127, 0.10); --rose-47-35: rgba(229, 9, 127, 0.35); --rose-47-55: rgba(229, 9, 127, 0.55); --rose-47-0: rgba(229, 9, 127, 0); /* ---- color: magenta / grey ---- */ --magenta-17: #332430; --magenta-24: #453742; /* Matterhorn */ --grey-32: #584a52; /* Don Juan */ --grey-45: #7a6a73; /* Fedora */ --grey-46: #757575; /* Boulder */ --grey-57: #9a8a93; /* Venus - meta labels on the servicios cards */ --grey-50: #808080; /* Gray */ --grey-98: #fbf7f9; /* page tint */ --grey-50-8: rgba(127, 127, 127, 0.08); /* ---- color: white alpha ramp (drives every glass surface) ---- */ --white: #ffffff; --white-12: rgba(255, 255, 255, 0.12); --white-13: rgba(255, 255, 255, 0.13); --white-28: rgba(255, 255, 255, 0.28); --white-42: rgba(255, 255, 255, 0.42); --white-44: rgba(255, 255, 255, 0.44); --white-45: rgba(255, 255, 255, 0.45); --white-50: rgba(255, 255, 255, 0.50); --white-55: rgba(255, 255, 255, 0.55); --white-60: rgba(255, 255, 255, 0.60); --white-62: rgba(255, 255, 255, 0.62); --white-65: rgba(255, 255, 255, 0.65); --white-66: rgba(255, 255, 255, 0.66); --white-68: rgba(255, 255, 255, 0.68); --white-70: rgba(255, 255, 255, 0.70); --white-72: rgba(255, 255, 255, 0.72); --white-75: rgba(255, 255, 255, 0.75); --white-80: rgba(255, 255, 255, 0.80); --white-82: rgba(255, 255, 255, 0.82); --white-85: rgba(255, 255, 255, 0.85); --white-90: rgba(255, 255, 255, 0.90); --white-95: rgba(255, 255, 255, 0.95); /* ---- accent colors outside the rose scale ---- */ --rappi: #ff441f; --rappi-28: rgba(255, 68, 31, 0.28); /* hover tint - not a Figma variable, derived by darkening the Rappi orange ~12% so the button has a visible colour change, not just a shadow shift. There is deliberately no rose hover tint: magenta is the REST colour of the CTAs and every button hover resolves to black (--rose-7) instead. */ --rappi-hover: #e63715; --whatsapp: rgba(37, 211, 102, 0.90); --coffee-eyebrow: #dad1cd; /* ---- typography ---- */ --font-display: "Marcellus", "Times New Roman", serif; --font-ui: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif; /* fluid type: min is the mobile floor, max is the Figma 1920 value */ --fs-h1: clamp(2.125rem, 3.23vw, 3.875rem); /* 34 -> 62 */ --fs-h2: clamp(1.75rem, 2.40vw, 2.875rem); /* 28 -> 46 */ --fs-h2-sm: clamp(1.625rem, 2.19vw, 2.625rem); /* 26 -> 42 */ --fs-h2-promo: clamp(1.75rem, 2.29vw, 2.75rem); /* 28 -> 44 */ --fs-h2-coffee: clamp(1.625rem, 2.08vw, 2.5rem); /* 26 -> 40 */ --fs-h3: 1.375rem; /* 22 */ --fs-h4: 1.3125rem; /* 21 */ --fs-stat: clamp(1.75rem, 1.77vw, 2.125rem); /* 28 -> 34 */ --fs-eyebrow: 0.71875rem; /* 11.5 */ --fs-body-lg: 1.03125rem; /* 16.5 */ --fs-body: 1rem; /* 16 */ --fs-body-md: 0.96875rem; /* 15.5 */ --fs-body-sm: 0.90625rem; /* 14.5 */ --fs-sm: 0.875rem; /* 14 */ --fs-xs: 0.84375rem; /* 13.5 */ --fs-xxs: 0.8125rem; /* 13 */ --fs-micro: 0.78125rem; /* 12.5 */ --fs-nano: 0.75rem; /* 12 */ --fs-tag: 0.65625rem; /* 10.5 */ /* servicios page only */ --fs-h1-page: clamp(2.125rem, 3.33vw, 4rem); /* 34 -> 64 */ --fs-h2-cat: clamp(1.625rem, 1.875vw, 2.25rem); /* 26 -> 36 */ --fs-h2-40: clamp(1.625rem, 2.08vw, 2.5rem); /* 26 -> 40 */ --fs-h3-detail: clamp(1.375rem, 1.46vw, 1.75rem); /* 22 -> 28 */ --fs-step: 1.875rem; /* 30 */ --fs-h3-step: 1.1875rem; /* 19 */ --fs-meta-label: 0.6875rem; /* 11 */ --ls-h1-page: -0.01em; /* -0.64 / 64 */ --ls-h2-cat: -0.01em; /* -0.36 / 36 */ --ls-h3-detail: -0.01em; /* -0.28 / 28 */ --ls-meta: 0.16em; /* 1.76 / 11 */ --ls-count: 0.1em; /* 1.2 / 12 */ --lh-h1: 1.02; /* 63.24 / 62 */ --lh-h2: 1.06; /* 48.76 / 46 */ --lh-h3: 1.15; /* 25.30 / 22 */ --lh-body: 1.6; --ls-eyebrow: 0.187em; /* 2.99 / 16 */ --ls-tag: 0.16em; /* 1.68 / 10.5 */ --ls-h1: -0.01em; --ls-h2: -0.0102em; /* ---- layout ---- */ --container: 1240px; --gutter: 14px; --section-pt: 70px; --section-pb: 40px; /* ---- radii ---- */ --r-6: 6px; --r-22: 22px; --r-26: 26px; --r-28: 28px; --r-30: 30px; --r-34: 34px; --r-36: 36px; --r-pill: 999px; /* ---- shadows (exact Figma values) ---- */ --sh-nav: 0 1px 0 1px var(--white-90) inset, 0 10px 34px rgba(60, 8, 36, 0.13); --sh-hero-card: 0 1px 0 1px var(--white-90) inset, 0 20px 60px rgba(45, 6, 27, 0.22); --sh-rating: 0 14px 40px rgba(45, 6, 27, 0.18); --sh-strip: 0 12px 34px rgba(60, 8, 36, 0.09); --sh-card: 0 12px 34px rgba(60, 8, 36, 0.09); --sh-card-lift: 0 20px 46px rgba(60, 8, 36, 0.16); --sh-coffee: 0 20px 50px rgba(60, 8, 36, 0.14); --sh-coffee-card: 0 18px 46px rgba(45, 6, 27, 0.20); --sh-ba: 0 14px 38px rgba(60, 8, 36, 0.12); --sh-review: 0 12px 32px rgba(60, 8, 36, 0.09); --sh-score: 0 10px 28px rgba(60, 8, 36, 0.08); --sh-ig: 0 10px 26px rgba(60, 8, 36, 0.10); --sh-bio: 0 16px 44px rgba(60, 8, 36, 0.10); --sh-ghost: 0 8px 22px rgba(60, 8, 36, 0.08); --sh-step: 0 10px 28px rgba(60, 8, 36, 0.07); --sh-cta-hdr: 0 10px 13px rgba(229, 9, 127, 0.34); --sh-cta: 0 10px 26px rgba(229, 9, 127, 0.36); --sh-cta-sm: 0 6px 18px rgba(229, 9, 127, 0.34); --sh-rappi: 0 8px 20px var(--rappi-28); --sh-wa: 0 12px 30px rgba(18, 110, 52, 0.34); --sh-divider: 0 0 14px rgba(0, 0, 0, 0.30); /* ---- motion ---- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur: 220ms; }