/* Hair Designs by Sara design tokens. The single source for colors, type, radius, shadow and motion. */
@font-face{font-family:"Inter Tight";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/it400.woff2) format("woff2")}
@font-face{font-family:"Inter Tight";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/it500.woff2) format("woff2")}
:root{
  /* palette, from her logo */
  --espresso:#3B2A1F; --champagne:#D9C29F; --beige:#EADCC7; --ivory:#F7EFE6;
  /* roles */
  --hero-bg:var(--ivory); /* set to the hero video's sampled backdrop color */
  --ink:var(--espresso); --paper:var(--ivory); --accent:var(--champagne); --soft:var(--beige);
  --muted:color-mix(in srgb,var(--espresso) 72%,var(--ivory));
  --line:color-mix(in srgb,var(--espresso) 18%,var(--ivory));
  --on-dark:var(--ivory); --on-dark-muted:color-mix(in srgb,var(--ivory) 72%,var(--espresso));
  /* type */
  --display:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* shape and depth */
  --r-lg:24px; --r-md:16px; --r-sm:10px; --r-pill:999px;
  --shadow:0 18px 40px -22px color-mix(in srgb,var(--espresso) 45%,transparent);
  /* layout and motion */
  --wrap:1180px; --gutter:20px; --ease:cubic-bezier(.2,.7,.2,1);
}