/* ==========================================================================
   Design tokens — BVI Válvulas Industriais
   Tudo que define a identidade vive aqui. Nenhum outro arquivo usa valor solto.
   ========================================================================== */

:root {
    /* --- Marca ------------------------------------------------------------ */
    --co:            #0B3D28;   /* verde institucional (logo) */
    --co-deep:       #062318;   /* base escura do hero / página */
    --co-abyss:      #03150E;   /* sombra mais funda da atmosfera */
    --co-accent:     #00A859;   /* verde vivo — acento e CTA */
    --co-accent-2:   #2FD47F;   /* acento iluminado (hover / brilho) */
    --co-ink:        #10231A;   /* texto sobre fundo claro */
    --co-paper:      #FBFCFA;   /* fundo claro das seções seguintes */
    --co-muted:      #EEF3EE;

    --co-rgb:          11, 61, 40;
    --co-deep-rgb:     6, 35, 24;
    --co-accent-rgb:   0, 168, 89;
    --co-accent-2-rgb: 47, 212, 127;
    --white-rgb:       255, 255, 255;

    /* --- Texto sobre escuro ---------------------------------------------- */
    --text:          #FFFFFF;
    --text-2:        rgba(255, 255, 255, 0.72);
    --text-3:        rgba(255, 255, 255, 0.46);
    --text-ghost:    rgba(255, 255, 255, 0.28); /* linhas "apagadas" do título */

    /* --- Texto e linhas sobre claro (seções de catálogo) ------------------ */
    --co-ink-rgb:     16, 35, 26;
    --co-accent-text: #008647;   /* acento legível sobre claro (contraste ≈4.5:1 no paper) */
    --ink:           var(--co-ink);
    --ink-2:         rgba(var(--co-ink-rgb), 0.70);
    --ink-3:         rgba(var(--co-ink-rgb), 0.52);
    --ink-ghost:     rgba(var(--co-ink-rgb), 0.46);  /* linha "apagada" no claro; ainda passa 3:1 em texto grande */
    --hairline:        rgba(var(--co-ink-rgb), 0.10);
    --hairline-strong: rgba(var(--co-ink-rgb), 0.18);
    --surface:       #FFFFFF;
    --photo-bg:      #DBDBDD;    /* fundo de estúdio das fotos: some a emenda enquanto a foto carrega */

    /* --- Superfícies ------------------------------------------------------- */
    --line:          rgba(255, 255, 255, 0.10);
    --line-strong:   rgba(255, 255, 255, 0.18);
    --glass-bg:      rgba(255, 255, 255, 0.06);
    --glass-bg-2:    rgba(255, 255, 255, 0.10);
    --glass-border:  rgba(255, 255, 255, 0.12);
    --glass-blur:    18px;

    /* --- Tipografia -------------------------------------------------------- */
    --font-display: "Archivo", "Plus Jakarta Sans", -apple-system, "SF Pro Display", system-ui, sans-serif;
    --font-text:    "Plus Jakarta Sans", -apple-system, "SF Pro Text", system-ui, sans-serif;
    --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

    --fs-2xs:  clamp(0.66rem, 0.63rem + 0.15vw, 0.72rem);
    --fs-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
    --fs-sm:   clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);
    --fs-md:   clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    --fs-lg:   clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
    --fs-xl:   clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --fs-hero: clamp(2rem, 1rem + 3.4vw, 4rem);         /* título empilhado do hero */
    --fs-stat: clamp(3rem, 2rem + 3.5vw, 4.75rem);      /* número grande do card */
    --fs-ghost: clamp(5rem, 16vw, 16rem);                /* palavra fantasma atrás do 3D */

    --lh-tight: 0.92;
    --lh-snug:  1.15;
    --lh-base:  1.55;

    --tracking-tight: -0.03em;
    --tracking-snug:  -0.015em;
    --tracking-wide:   0.06em;
    --tracking-wider:  0.14em;

    /* --- Espaço e forma ----------------------------------------------------- */
    --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
    --space-5: 1.25rem;  --space-6: 1.5rem;  --space-8: 2rem;    --space-10: 2.5rem;
    --space-12: 3rem;    --space-16: 4rem;   --space-20: 5rem;   --space-24: 6rem;

    --gutter:     clamp(1rem, 4vw, 3.5rem);
    --shell:      1440px;
    --header-h:   72px;
    --header-top: clamp(0.75rem, 1.6vw, 1.25rem);

    --radius-sm:   8px;
    --radius-md:   14px;
    --radius-lg:   22px;
    --radius-xl:   30px;
    --radius-pill: 999px;

    --shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md:     0 10px 30px rgba(0, 0, 0, 0.35);
    --shadow-lg:     0 30px 80px rgba(0, 0, 0, 0.5);
    --shadow-accent: 0 12px 36px rgba(var(--co-accent-rgb), 0.35);

    /* --- Movimento ----------------------------------------------------------- */
    --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-apple:     cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-cinema:    cubic-bezier(0.65, 0, 0.35, 1);
    --ease-soft:      cubic-bezier(0.4, 0, 0.2, 1);   /* espelhado em motion.js (easeSoft) */
    --ease-spring:    cubic-bezier(0.34, 1.4, 0.64, 1);

    --dur-fast:   160ms;
    --dur-base:   280ms;
    --dur-slow:   520ms;
    --dur-reveal: 900ms;

    /* --- Camadas ------------------------------------------------------------- */
    --z-scene:   1;
    --z-content: 2;
    --z-float:   80;    /* WhatsApp flutuante: nunca convive com a barra do configurador */
    --z-bar:     90;    /* barra fixa do configurador no celular: abaixo do header */
    --z-header:  100;
    --z-menu:    200;
    --z-skip:    1000;
}