/* =========================================================================
   Horvysa — tokens visuais
   Cores oficiais extraídas dos vetores (01_Vetores/*.svg) e da paleta
   (06_Guia/Horvyza_Paleta.txt): #F0642D, #18181B, #FFFFFF.
   Os demais tons são neutros derivados do grafite, para interface.
   ========================================================================= */

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../fonts/sora-latin-wght-normal.woff2") format("woff2-variations"),
       url("../fonts/sora-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Marca */
  --hz-orange: #F0642D;
  --hz-graphite: #18181B;
  --hz-white: #FFFFFF;

  /* Derivados */
  --hz-orange-hover: #F47B4B;
  --hz-orange-press: #D9541F;
  --hz-orange-text: #B4451A;    /* laranja para texto pequeno sobre branco (5,5:1) */
  --hz-orange-soft: rgba(240, 100, 45, .12);
  --hz-orange-glow: rgba(240, 100, 45, .35);
  --hz-ink-2: #1F1F23;          /* grafite elevado */
  --hz-ink-3: #27272C;
  --hz-ink-4: #34343A;
  --hz-soft: #F4F4F5;
  --hz-soft-2: #EBEBED;
  --hz-line: #E4E4E7;
  --hz-line-dark: rgba(255, 255, 255, .1);
  --hz-muted: #5B5B63;          /* 6,8:1 sobre branco */
  --hz-muted-dark: #A1A1AA;     /* 6,8:1 sobre grafite */
  --hz-success: #1F7A45;
  --hz-danger: #B42318;

  /* Tipografia */
  --font-display: "Sora", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --font-sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  --fs-display: clamp(2.5rem, 3.8vw + .6rem, 4.25rem);
  --fs-h2: clamp(2rem, 3vw + .6rem, 3.5rem);
  --fs-h3: clamp(1.375rem, 1.1vw + .9rem, 1.875rem);
  --fs-lead: clamp(1.0625rem, .35vw + .95rem, 1.25rem);

  /* Espaço (múltiplos de 8) */
  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 48px; --s-6: 64px; --s-7: 96px; --s-8: 128px;

  /* Forma e movimento */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 32px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: .2s;
  --dur: .45s;
  --dur-slow: .8s;
  --dur-press: .12s;   /* resposta ao pressionar */
  --dur-hover: .35s;   /* preenchimento, borda e seta */
  --dur-panel: .45s;   /* troca de demonstração e altura do painel */
  /* Intensidades e suavização dos efeitos em JS: assets/js/core/motion.js */

  --wrap: 1360px;
  --gutter: clamp(20px, 4vw, 56px);
  --header-h: 72px;

  --shadow-card: 0 1px 2px rgba(24, 24, 27, .06), 0 12px 32px -12px rgba(24, 24, 27, .18);
  --shadow-float: 0 2px 6px rgba(0, 0, 0, .2), 0 30px 60px -20px rgba(0, 0, 0, .55);
}