/* Homebase tokens + self-hosted font, shared by the storefront, the seller and
 * warehouse portals and the admin.
 *
 * Self-hosted on purpose: the portals ship a CSP of `font-src 'self' data'` and
 * `style-src 'self' 'unsafe-inline'`, so a Google Fonts stylesheet and its woff2
 * are both blocked there. Figtree is under the SIL Open Font License, so serving
 * it from this origin is fine.
 *
 * Token values were read out of Wayfair's live CSS bundles — see
 * qianduan/docs/wayfair-ui-parity.md. */

@font-face {
  font-family: 'sofia';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/sofia-reg-subset.woff2') format('woff2');
}
@font-face {
  font-family: 'sofia';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/sofia-bold-subset.woff2') format('woff2');
}

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/fonts/figtree-latin-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/fonts/figtree-latin-ext-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url('/fonts/figtree-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url('/fonts/figtree-latin-ext-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Metric-compatible Arial fallback, copied verbatim from Wayfair's bundle. */
@font-face {
  font-family: sofiaFallback;
  src: local('Arial');
  ascent-override: calc((2212 / 2048 * 100%) + 100% - 102%);
  descent-override: calc(593 / 2048 * 100%);
  line-gap-override: calc(409.6 / 2048 * 100%);
  size-adjust: 102%;
  font-weight: 400;
}
@font-face {
  font-family: sofiaFallback;
  src: local('Arial Bold');
  ascent-override: calc((2296 / 2048 * 100%) + 100% - 96%);
  descent-override: calc(570 / 2048 * 100%);
  line-gap-override: calc(2048 / 2048 * 100%);
  size-adjust: 96%;
  font-weight: 700;
}

:root {
  --wf-purple-50: #f8f3fa;
  --wf-purple-100: #e5d1ec;
  --wf-purple-300: #aa72c0;
  --wf-purple-400: #9957b5;
  --wf-purple-500: #893caa;
  --wf-purple-600: #7b189f;
  --wf-purple-700: #5c1277;
  --wf-purple-900: #370844;

  --wf-gray-50: #f5f5f5;
  --wf-gray-200: #d1d1d6;
  --wf-gray-400: #93939a;
  --wf-gray-500: #777279;
  --wf-gray-600: #646266;
  --wf-gray-700: #4d4a4f;
  --wf-gray-800: #363438;
  --wf-gray-900: #211e22;

  --wf-red-50: #fcf3f6;
  --wf-red-100: #f2d0d9;
  --wf-red-500: #e11447;
  --wf-red-600: #c4113f;
  --wf-red-700: #990e35;

  --wf-green-50: #edf7ec;
  --wf-green-100: #b3dbb3;
  --wf-green-600: #247139;
  --wf-green-700: #245728;

  --wf-yellow-50: #fff4d6;
  --wf-yellow-500: #f6b71d;
  --wf-orange-600: #bd5500;

  --wf-text: var(--wf-gray-900);
  --wf-text-muted: var(--wf-gray-700);
  --wf-text-inverse: #fff;
  --wf-link: var(--wf-purple-600);
  --wf-surface: #fff;
  --wf-surface-alt: var(--wf-purple-50);
  --wf-line: var(--wf-gray-200);
  --wf-line-strong: var(--wf-gray-700);
  --wf-overlay: rgba(33, 30, 34, 0.5);

  --wf-action: var(--wf-purple-600);
  --wf-action-hover: var(--wf-purple-500);
  --wf-action-active: var(--wf-purple-700);

  --wf-font: 'sofia', 'Figtree', sofiaFallback, arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --wf-text-13: 0.8125rem;
  --wf-text-16: 1rem;
  --wf-text-20: 1.25rem;
  --wf-text-25: 1.5625rem;
  --wf-text-31: 1.9375rem;
  --wf-text-39: 2.4375rem;
  --wf-leading: 1.5;

  --wf-space-4: 4px;
  --wf-space-8: 8px;
  --wf-space-12: 12px;
  --wf-space-16: 16px;
  --wf-space-20: 20px;
  --wf-space-24: 24px;
  --wf-space-32: 32px;
  --wf-space-40: 40px;

  --wf-radius-4: 4px;
  --wf-radius-8: 8px;
  --wf-radius-pill: 720px;

  --wf-shadow-1: 0 1px 2px rgba(33, 30, 34, 0.2);
  --wf-shadow-2: 0 3px 6px rgba(33, 30, 34, 0.2);
  --wf-shadow-3: 0 5px 10px rgba(33, 30, 34, 0.2);
  --wf-shadow-4: 0 7px 14px rgba(33, 30, 34, 0.2);
  --wf-focus-ring: 0 0 0 1px #fff, 0 0 0 3px #1364f1;

  --wf-ease: cubic-bezier(0.65, 0.05, 0.36, 1);
  --wf-duration: 200ms;

  --wf-control-lg: 48px;
  --wf-control-sm: 32px;
}