@font-face {
  font-family: 'Archivo Fallback';
  src: local('Arial');
  size-adjust: 99.2%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Archivo Fallback Helvetica';
  src: local('Helvetica');
  size-adjust: 99.2%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Bodoni Fallback';
  src: local('Georgia');
  size-adjust: 104.8%;
  ascent-override: 92%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Bodoni Fallback Times';
  src: local('Times New Roman');
  size-adjust: 114.6%;
  ascent-override: 92%;
  descent-override: 22%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Bodoni Moda';
  src: url('../fonts/bodoni-moda-latin.woff2') format('woff2-variations'),
       url('../fonts/bodoni-moda-latin.woff2') format('woff2');
  font-weight: 400 900;
  font-stretch: 100%;
  font-style: normal;
  font-display: swap;
  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+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin.woff2') format('woff2-variations'),
       url('../fonts/archivo-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  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+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {

  --font-display: 'Bodoni Moda', 'Bodoni Fallback', 'Bodoni Fallback Times',
                  'Didot', 'Times New Roman', Georgia, serif;
  
  --font-ui: 'Archivo', 'Archivo Fallback', 'Archivo Fallback Helvetica',
             system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

  --fs-display-floor: 1.75rem;

  --fs-display-1: clamp(3rem, 9.5vw, 8.5rem);
  --fs-display-2: clamp(2.5rem, 6.5vw, 5.5rem);
  --fs-display-3: clamp(2rem, 4.5vw, 3.75rem);
  --fs-h1: clamp(1.875rem, 3.4vw, 3rem);
  --fs-h2: clamp(1.5rem, 2.4vw, 2.25rem);
  --fs-h3: clamp(1.25rem, 1.7vw, 1.5rem);
  --fs-h4: clamp(1.0625rem, 1.2vw, 1.1875rem);
  --fs-body-lg: clamp(1.0625rem, 1.15vw, 1.1875rem);
  --fs-body: 1rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  
  --fs-micro: 0.75rem;

  --lh-tight: 1.02;
  --lh-display: 1.06;
  --lh-heading: 1.18;
  --lh-body: 1.65;
  --lh-loose: 1.8;

  --ls-display: -0.035em;
  --ls-heading: -0.018em;
  --ls-body: 0;
  --ls-eyebrow: 0.2em;
  --ls-mono: 0.02em;

  --wt-light: 300;
  --wt-regular: 400;
  --wt-medium: 500;
  --wt-semibold: 600;
  --wt-bold: 700;

  --wt-display: 500;

  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;    --sp-11: 12rem;
  --pad: clamp(1.25rem, 5vw, 5rem);

  --measure: 40rem;
  --measure-tight: 28rem;
  --container: 84rem;

  --header-h: 4rem;

  --r-xs: 2px; --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-xl: 24px; --r-full: 999px;

  --z-base: 0; --z-raised: 10; --z-sticky: 20; --z-header: 30;
  --z-overlay: 40; --z-modal: 50; --z-toast: 60; --z-preloader: 70;

  --dur-instant: 90ms;
  --dur-fast: 160ms;
  --dur-base: 260ms;
  --dur-slow: 420ms;
  --dur-slower: 680ms;
  --dur-cinematic: 1100ms;

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-expressive: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-physical: cubic-bezier(0.22, 1, 0.36, 1);

  --lift-hover: -2px;
  --lift-press: 0px;

  --metal-1: #8a7f6a;   
  --metal-2: #a89b83;
  --metal-3: #c8bca4;   
  --metal-4: #e4dcc9;
  --metal-5: #f8f3e7;   

  --gradient-metal: linear-gradient(
    135deg,
    var(--metal-1) 0%, var(--metal-3) 34%, var(--metal-5) 50%,
    var(--metal-3) 66%, var(--metal-1) 100%
  );
  --gradient-metal-sweep: linear-gradient(
    100deg,
    transparent 20%, rgba(241, 245, 249, 0.34) 46%,
    rgba(241, 245, 249, 0.82) 50%, rgba(241, 245, 249, 0.34) 54%,
    transparent 80%
  );
  --gradient-metal-hairline: linear-gradient(
    90deg, transparent, var(--metal-3) 22%, var(--metal-5) 50%, var(--metal-3) 78%, transparent
  );

  --focus-width: 2px;
  --focus-offset: 3px;
}

:root,
:root[data-theme='dark'] {
  color-scheme: dark;

  --bg: #0f1526;
  --bg-deep: #080c17;          
  --surface-1: #262f4a;
  --surface-2: #2f3a59;
  --surface-3: #3c4970;
  --surface-inset: #151b2e;

  --line: #5f6b90;
  --line-strong: #7f8caf;

  --ink: #f3f6ff;
  --ink-2: #dee4f3;
  
  --ink-dim: #bcc6dc;
  --ink-faint: #b6c1d9;
  --ink-inverse: #0f1526;

  --metal-text: #e2d8c2;
  --metal-text-strong: #f4eede;
  --accent: var(--metal-3);
  
  --accent-ink: #130f04;
  --accent-quiet: rgba(200, 188, 164, 0.14);
  --accent-line: rgba(200, 188, 164, 0.36);

  --ok: #7fe08a;
  --warn: #ffc85c;
  --danger: #ff9a91;
  --info: #86c9ff;

  --shadow-sm: 0 1px 2px rgba(2, 5, 14, 0.6);
  --shadow-md: 0 6px 20px rgba(2, 5, 14, 0.62);
  --shadow-lg: 0 24px 60px rgba(2, 5, 14, 0.7);
  --shadow-metal: 0 8px 30px rgba(200, 188, 164, 0.18);

  --scrim: rgba(6, 10, 20, 0.76);

  --accent-money: #f2c766;
  --accent-vapes: #71dfa4;
  --accent-accessories: #ff9d7a;

  --vertical-accent: var(--accent-money);
}

:root[data-theme='light'] {
  color-scheme: light;

  --bg: #fbfcff;
  --bg-deep: #e6eaf6;
  --surface-1: #dde3f1;
  --surface-2: #d1d9ea;
  --surface-3: #c1cbe0;
  --surface-inset: #ffffff;

  --line: #8c98b6;
  --line-strong: #6e7b9b;

  --ink: #0e1424;
  --ink-2: #2a3350;
  
  --ink-dim: #3f4a6a;
  --ink-faint: #444f6e;
  --ink-inverse: #fbfcff;

  --metal-text: #22305e;
  --metal-text-strong: #16213f;
  --accent: #22305e;
  --accent-ink: #130f04;
  --accent-quiet: rgba(34, 48, 94, 0.10);
  --accent-line: rgba(34, 48, 94, 0.32);

  --ok: #005724;
  --warn: #733c00;
  --danger: #971118;
  --info: #0f4a94;

  --shadow-sm: 0 1px 2px rgba(14, 20, 36, 0.08);
  --shadow-md: 0 6px 20px rgba(14, 20, 36, 0.1);
  --shadow-lg: 0 24px 60px rgba(14, 20, 36, 0.14);
  --shadow-metal: 0 8px 30px rgba(34, 48, 94, 0.16);

  --scrim: rgba(14, 20, 36, 0.5);

  --accent-money: #7a4a00;
  --accent-vapes: #005726;
  --accent-accessories: #8c260b;

  --vertical-accent: var(--accent-money);
}

[data-site='vapes'][data-theme='dark'],
[data-site='vapes']:not([data-theme='light']) { --vertical-accent: var(--accent-vapes); }
[data-site='vapes'][data-theme='light'] { --vertical-accent: var(--accent-vapes); }

[data-site='accessories'][data-theme='dark'],
[data-site='accessories']:not([data-theme='light']) { --vertical-accent: var(--accent-accessories); }
[data-site='accessories'][data-theme='light'] { --vertical-accent: var(--accent-accessories); }

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 1ms; --dur-fast: 1ms; --dur-base: 1ms;
    --dur-slow: 1ms; --dur-slower: 1ms; --dur-cinematic: 1ms;
    --lift-hover: 0px;
  }
}