/* ==========================================================================
   TOKENS — fonte única de verdade do design (cores, tipografia, espaçamento,
   raios, sombras). Nenhum componente deve hardcodar valores: use as variáveis.
   Valores extraídos 1:1 do site original (Framer) em oneworldshoes.com.
   ========================================================================== */

@font-face {
  font-family: "Visby Bold";
  src: url("../assets/fonts/VisbyCF-Bold.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Visby Regular";
  src: url("../assets/fonts/VisbyCF-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Regular-latin.woff2") format("woff2");
  font-weight: 400;
  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+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---------- Cores ---------- */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-ink: #1a1a1a;            /* títulos (rgb 26 26 26) */
  --color-ink-strong: #0d0d0d;     /* rótulos "Email:", "Phone:" */
  --color-ink-label: #0a0a0a;      /* labels do formulário */
  --color-text: #474747;           /* parágrafos (rgb 71 71 71) */
  --color-text-nav: #2e2e2e;       /* links do header */
  --color-text-nav-hover: #666666;
  --color-text-muted: #757474;     /* subtítulos "Get in touch…" */
  --color-text-stats: #696868;     /* legendas dos números */
  --color-text-footer: #383838;
  --color-text-hero-light: #e3e3e3;/* parágrafo do slide 1 */
  --color-text-hero-white: #ffffff;
  --color-text-hero-h1-light: #fafafa;
  --color-placeholder: #999999;

  --color-btn-dark: #171717;
  --color-btn-dark-text: #f2f2f2;
  --color-btn-dark-text-alt: #ebebeb;
  --color-btn-light: #f2f2f2;
  --color-btn-light-text: #171717;
  --color-btn-submit: #1a1a1a;

  --color-surface: #f4f3f3;        /* cartões e faixas cinza */
  --color-select-bg: #ededed;
  --color-input-bg: rgba(187, 187, 187, 0.15);
  --color-input-border: rgba(136, 136, 136, 0.10);
  --color-input-border-focus: #333333;
  --color-header-bg: rgba(255, 255, 255, 0.80);
  --color-header-bg-mobile: rgba(255, 255, 255, 0.65);
  --color-stat-divider: rgba(194, 194, 194, 0.75);
  --color-link: #0099ff;

  /* ---------- Tipografia ---------- */
  --font-heading: "Visby Bold", "Visby Bold Placeholder", sans-serif;
  --font-body: "Visby Regular", "Visby Regular Placeholder", sans-serif;
  --font-ui: "Inter", "Inter Placeholder", sans-serif;

  /* Tamanhos (desktop) */
  --fs-nav: 20px;
  --fs-btn: 15px;
  --fs-submit: 18px;
  --fs-select: 16px;
  --fs-hero-h1: 69px;
  --fs-hero-h1-lg: 72px;
  --fs-hero-p: 24px;
  --fs-card-h1: 49px;
  --fs-card-sub: 31px;
  --fs-h2: 50px;
  --fs-stat: 70px;
  --fs-stat-label: 20px;
  --fs-contact-h1: 71px;
  --fs-contact-sub: 30px;
  --fs-about-sub: 25px;
  --fs-body: 20px;
  --fs-label: 12px;
  --fs-input: 14px;
  --fs-footer: 52px;

  /* Tamanhos (mobile ≤809px) */
  --fs-m-nav: 18px;
  --fs-m-btn: 14px;
  --fs-m-hero-h1: 28px;
  --fs-m-hero-p: 14px;
  --fs-m-card-h1: 24px;
  --fs-m-card-sub: 15px;
  --fs-m-h2: 28px;
  --fs-m-stat: 56px;
  --fs-m-body: 15px;
  --fs-m-contact-h1: 36px;
  --fs-m-sub: 18px;
  --fs-m-footer: 30px;

  /* ---------- Raios ---------- */
  --radius-xs: 4px;
  --radius-btn-mobile: 6px;
  --radius-sm: 5px;
  --radius-btn: 8px;
  --radius-input: 10px;
  --radius-submit: 11px;
  --radius-card: 20px;
  --radius-card-img: 22px;
  --radius-hero: 40px;
  --radius-hero-mobile: 10px;
  --radius-pill: 40px;

  /* ---------- Sombras / efeitos ---------- */
  --shadow-card: 3px 4px 9px 0 rgba(0, 0, 0, 0.2);
  --blur-header: 24px;
  --blur-header-mobile: 26px;
  --shadow-menu: 0 12px 24px rgba(0, 0, 0, 0.08);

  /* ---------- Espaçamento / layout ---------- */
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;

  --container-card: 1320px;   /* cartão "OWS Partners" */
  --container-inner: 1296px;  /* cartão "Get Personalized Service" e contato */
  --hero-width: 98%;
  --hero-height: 720px;
  --hero-gap: 12px;
  /* Banners em pilha (deck) — mesmo efeito da LP Versato */
  --deck-gap: 30px;
  --deck-gap-mobile: 20px;
  --deck-width: 80%;
  --deck-width-tablet: 82%;
  --deck-width-mobile: 89%;
  --deck-radius: 32px;
  --deck-radius-mobile: 20px;
  --deck-shadow-active: 0 14px 34px rgba(0, 0, 0, 0.16);
  --deck-shadow-peek: 0 6px 16px rgba(0, 0, 0, 0.10);
  --deck-min-h: 600px;
  --deck-min-h-mobile: 520px;
  --gutter-mobile: 16px;
  --content-max-mobile: 560px;
  --header-h-mobile: 64px;
  --tap-min: 44px;

  /* ---------- Camadas ---------- */
  --z-hero: 0;
  --z-header: 100;

  /* ---------- Movimento ---------- */
  --ease-out: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration-slide: 600ms;
  --ease-deck: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-deck: 900ms;
  --duration-deck-text: 800ms;
  --deck-interval: 6000;
  --duration-appear: 500ms;
  --duration-hover: 200ms;
}