/* =============================================================================
   Tokens . Design System Polyblu
   Paleta industrial moderna baseada na identidade real: laranja Polyblu
   protagonista, neutros warm (charcoal + off-white) como base.
   ============================================================================= */

/* ============ Webfonts (self-hosted, variáveis) ============ */
@font-face {
  font-family: "Sora";
  src: url("/assets/fonts/sora-latin-wght.woff2") format("woff2-variations");
  font-weight: 100 800;
  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;
}
@font-face {
  font-family: "Outfit";
  src: url("/assets/fonts/outfit-latin-wght.woff2") format("woff2-variations");
  font-weight: 100 900;
  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;
}
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/geist-latin-wght.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin-wght.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Mona Sans (headline + números dos stats) — fonte open-source do GitHub, variable (wght 200–900) */
@font-face {
  font-family: "Mona Sans";
  src: url("/assets/fonts/mona-sans-latin-wght.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {

  /* ============ Cores principais ============ */
  /* Background warm off-white (em vez de azulado) */
  --bg:              #FAFAF8;
  --bg-soft:         #F5F5F2;
  --bg-card:         #FFFFFF;
  --bg-card-glass:   rgba(255, 255, 255, 0.78);

  /* Charcoal industrial em vez de navy azul */
  --bg-dark:         #1A1A1A;
  --bg-darker:       #0F0F0F;
  --bg-darkest:      #050505;

  /* PRIMARY: laranja oficial Polyblu (cor de marca dominante) */
  --primary:         #EF3F00;
  --primary-deep:    #C53400;
  --primary-bright:  #FF6620;
  --primary-glow:    #FF8A4F;
  --primary-soft:    #FFE0D2;
  --primary-softer:  #FFF3EC;

  /* SECONDARY/ACCENT: charcoal industrial */
  --accent:          #1A1A1A;
  --accent-bright:   #2D2D2D;
  --accent-deep:     #000000;
  --accent-soft:     #F0F0EE;

  /* Texto */
  --text:            #1A1A1A;
  --text-strong:     #000000;
  --text-soft:       #4A4A4A;
  --text-muted:      #8B8B8B;
  --text-inverse:    #FAFAF8;
  --text-inverse-soft: #C9C9C5;

  /* Bordas */
  --border:          #E6E6E2;
  --border-soft:     #F0F0EE;
  --border-strong:   #C9C9C5;
  --border-dark:     rgba(255, 255, 255, 0.1);

  /* Estados */
  --success:         #16A34A;
  --warning:         #EA580C;
  --error:           #DC2626;

  /* ============ Gradientes ============ */
  --gradient-primary:    linear-gradient(135deg, #EF3F00 0%, #FF6620 100%);
  --gradient-primary-soft: linear-gradient(135deg, rgba(239,63,0,0.06) 0%, rgba(255,102,32,0.04) 100%);
  --gradient-dark:       linear-gradient(135deg, #1A1A1A 0%, #0F0F0F 100%);
  --gradient-card:       linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.7) 100%);
  --gradient-glow:       radial-gradient(circle at 30% 20%, rgba(239,63,0,0.12), transparent 60%);
  --gradient-hero:       radial-gradient(ellipse 100% 80% at 50% 0%, rgba(239,63,0,0.08), transparent 70%),
                         radial-gradient(ellipse 80% 60% at 100% 100%, rgba(26,26,26,0.04), transparent 70%);
  --gradient-orange:     linear-gradient(135deg, #EF3F00 0%, #FF6620 100%);

  /* ============ Tipografia ============ */
  --font-display:    "Mona Sans", "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-sans:       "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-ui:         "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:       "JetBrains Mono", "SFMono-Regular", Menlo, Monaco, Consolas, monospace;

  --fs-2xs:  clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem);
  --fs-xs:   clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
  --fs-sm:   clamp(0.875rem, 0.825rem + 0.25vw, 0.9375rem);
  --fs-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --fs-lg:   clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
  --fs-xl:   clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --fs-2xl:  clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
  --fs-3xl:  clamp(1.875rem, 1.6rem + 1.2vw, 2.5rem);
  --fs-4xl:  clamp(2.25rem, 1.9rem + 1.75vw, 3.25rem);
  --fs-5xl:  clamp(2.75rem, 2.2rem + 2.75vw, 4.5rem);
  --fs-6xl:  clamp(3.5rem, 2.7rem + 4vw, 6rem);

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold: 800;

  --tracking-tightest: -0.04em;
  --tracking-tighter:  -0.025em;
  --tracking-tight:    -0.015em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.08em;

  /* ============ Espacamento ============ */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;

  /* ============ Border radius ============ */
  --r-xs:   0.375rem;
  --r-sm:   0.5rem;
  --r-md:   0.875rem;
  --r-lg:   1.25rem;
  --r-xl:   1.75rem;
  --r-2xl:  2.5rem;
  --r-3xl:  3rem;
  --r-full: 9999px;

  /* ============ Sombras ============ */
  --shadow-xs:    0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --shadow-sm:    0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
  --shadow-md:    0 8px 16px -4px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  --shadow-lg:    0 20px 40px -12px rgba(0, 0, 0, 0.12), 0 8px 16px -8px rgba(0, 0, 0, 0.06);
  --shadow-xl:    0 32px 64px -16px rgba(0, 0, 0, 0.15), 0 16px 32px -16px rgba(0, 0, 0, 0.08);
  --shadow-2xl:   0 48px 96px -24px rgba(0, 0, 0, 0.20);

  --shadow-glow-primary: 0 24px 64px -16px rgba(239, 63, 0, 0.35), 0 8px 24px -8px rgba(239, 63, 0, 0.18);
  --shadow-glow-accent:  0 24px 64px -16px rgba(26, 26, 26, 0.28), 0 8px 24px -8px rgba(26, 26, 26, 0.15);

  /* ============ Layout ============ */
  --container-max:    1280px;
  --container-narrow: 880px;
  --container-wide:   1440px;
  --container-px:     clamp(1.25rem, 4vw, 2.5rem);

  /* ============ Z-index ============ */
  --z-base:     1;
  --z-sticky:   20;
  --z-header:   50;
  --z-overlay:  90;
  --z-modal:    100;
  --z-toast:    150;
  --z-cookie:   200;

  /* ============ Transitions ============ */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  --t-fast:   180ms var(--ease-out);
  --t-base:   280ms var(--ease-out);
  --t-slow:   480ms var(--ease-out);
  --t-slower: 720ms var(--ease-out);

  /* ============ Glass (mais sutil agora) ============ */
  --glass-blur:        saturate(160%) blur(16px);
  --glass-blur-strong: saturate(160%) blur(24px);
  --glass-bg:          rgba(255, 255, 255, 0.78);
  --glass-bg-dark:     rgba(26, 26, 26, 0.78);
  --glass-border:      rgba(255, 255, 255, 0.14);
}

/* ============ Modo escuro em sections marcadas ============ */
.surface-dark {
  --bg:            var(--bg-dark);
  --bg-soft:       var(--bg-darker);
  --bg-card:       rgba(255, 255, 255, 0.04);
  --bg-card-glass: rgba(255, 255, 255, 0.06);
  --text:          var(--text-inverse);
  --text-strong:   #FFFFFF;
  --text-soft:     var(--text-inverse-soft);
  --text-muted:    #8B8B8B;
  --border:        rgba(255, 255, 255, 0.10);
  --border-soft:   rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.20);
  color: var(--text);
  background: var(--bg);
}