/* ============================================================
BINV Engenharia — Colors & Type
Tokens for the BINV brand system. Dark-default; light variant
provided. All values come from the official Brand Guidelines
(Versão 1.0 · Maio 2024).
============================================================ */
/* ----- Webfonts (substitutions — see README) -----
Logo wordmark uses a custom geometric sans with 52° cuts; for
UI we substitute Sora (display) + Manrope (body) + JetBrains
Mono (technical/code). Final font files pending from BINV. */
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=Manrope:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");
:root {
/* ============ COLOR PRIMITIVES ============ */
/* Brand core — from Paleta de Cores */
--binv-azul: #0057FF; /* Azul BINV · Pantone 2728 C */
--binv-azul-deep: #2750FF; /* Variant from manifesto doc */
--binv-verde: #00C853; /* Verde BINV · Pantone 7482 C */
--binv-verde-alt: #22C55E; /* Variant from manifesto doc */
--binv-marinho: #0A1326; /* Azul Marinho · Pantone 2965 */
--binv-marinho-2: #0D132B; /* Manifesto variant */
--binv-cinza-tec: #2A2F3A; /* Cinza Técnico */
--binv-cinza-claro: #E6E6E6; /* Cinza Claro · Cool Gray 1 C */
--binv-branco: #FFFFFF;
/* Extended neutrals — derived for UI scale */
--binv-ink-900: #060B1A;
--binv-ink-800: #0A1326; /* marinho */
--binv-ink-700: #111A36;
--binv-ink-600: #1A2447;
--binv-ink-500: #2A2F3A; /* cinza técnico */
--binv-ink-400: #4A5163;
--binv-ink-300: #79808F;
--binv-ink-200: #B4B9C4;
--binv-ink-100: #E6E6E6; /* cinza claro */
--binv-ink-050: #F4F5F7;
--binv-ink-000: #FFFFFF;
/* Signature gradient — Degradê BINV */
--binv-gradient: linear-gradient(135deg, #0057FF 0%, #00C853 100%);
--binv-gradient-soft: linear-gradient(135deg, rgba(0,87,255,.25) 0%, rgba(0,200,83,.25) 100%);
--binv-gradient-radial: radial-gradient(circle at 30% 20%, rgba(0,87,255,.35), transparent 55%),
radial-gradient(circle at 75% 90%, rgba(0,200,83,.20), transparent 60%);
/* ============ SEMANTIC ROLES (dark default) ============ */
--bg: var(--binv-ink-800);
--bg-elev-1: var(--binv-ink-700);
--bg-elev-2: var(--binv-ink-600);
--surface: rgba(255,255,255,0.03);
--surface-hi: rgba(255,255,255,0.06);
--fg-1: var(--binv-ink-000); /* primary text */
--fg-2: rgba(255,255,255,0.72); /* secondary */
--fg-3: rgba(255,255,255,0.48); /* tertiary */
--fg-muted: rgba(255,255,255,0.32);
--accent: var(--binv-azul);
--accent-2: var(--binv-verde);
--on-accent: var(--binv-branco);
--border: rgba(255,255,255,0.10);
--border-strong:rgba(255,255,255,0.18);
--grid-line: rgba(0,87,255,0.10);
--success: var(--binv-verde);
--info: var(--binv-azul);
--warning: #F5A524;
--danger: #FF4D6A;
/* ============ TYPE FAMILIES ============ */
--font-display: "Sora", "Space Grotesk", system-ui, sans-serif;
--font-body: "Manrope", "Inter Tight", system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
/* ============ TYPE SCALE ============ */
--text-3xs: 10px;
--text-2xs: 11px;
--text-xs: 12px;
--text-sm: 14px;
--text-md: 16px;
--text-lg: 18px;
--text-xl: 20px;
--text-2xl: 24px;
--text-3xl: 30px;
--text-4xl: 36px;
--text-5xl: 48px;
--text-6xl: 64px;
--text-7xl: 84px;
--text-8xl: 112px;
/* Tracking — display is tightly tracked; eyebrows widely */
--track-display: -0.02em;
--track-tight: -0.01em;
--track-normal: 0;
--track-wide: 0.06em;
--track-eyebrow: 0.18em;
/* Leading */
--lh-tight: 1.05;
--lh-snug: 1.2;
--lh-base: 1.5;
--lh-relaxed:1.65;
/* ============ SPACING (4px base) ============ */
--space-0: 0;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 96px;
--space-10:128px;
/* ============ RADII (low — technical/architectural feel) ============ */
--radius-xs: 2px;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-pill: 999px;
/* ============ ELEVATION ============ */
--shadow-xs: 0 1px 2px rgba(0,0,0,0.30);
--shadow-sm: 0 2px 6px rgba(0,0,0,0.35);
--shadow-md: 0 8px 24px rgba(0,0,0,0.40);
--shadow-lg: 0 24px 64px rgba(0,0,0,0.45);
--glow-azul: 0 0 0 1px rgba(0,87,255,0.4), 0 0 32px rgba(0,87,255,0.35);
--glow-verde: 0 0 0 1px rgba(0,200,83,0.4), 0 0 32px rgba(0,200,83,0.30);
--glow-soft: 0 0 80px rgba(0,87,255,0.18);
/* ============ MOTION ============ */
--ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--ease-snap: cubic-bezier(0.5, 0, 0.1, 1);
--dur-fast: 120ms;
--dur-base: 200ms;
--dur-slow: 360ms;
/* ============ GEOMETRY — the 52° cut ============ */
--binv-angle: 52deg;
--binv-cut: polygon(0 0, 100% 0, 100% 78%, 78% 100%, 0 100%);
}
/* Light variant (use sparingly — institutional documents, papers) */
[data-theme="light"] {
--bg: var(--binv-ink-000);
--bg-elev-1: var(--binv-ink-050);
--bg-elev-2: var(--binv-ink-100);
--surface: rgba(10,19,38,0.02);
--surface-hi: rgba(10,19,38,0.04);
--fg-1: var(--binv-ink-800);
--fg-2: var(--binv-ink-500);
--fg-3: var(--binv-ink-400);
--fg-muted: var(--binv-ink-300);
--border: rgba(10,19,38,0.10);
--border-strong:rgba(10,19,38,0.18);
--grid-line: rgba(10,19,38,0.06);
}
/* ============================================================
SEMANTIC ELEMENT STYLES
Apply by selector — components and pages can just write
,
, , .eyebrow and inherit the system.
============================================================ */
html, body {
background: var(--bg);
color: var(--fg-1);
font-family: var(--font-body);
font-size: var(--text-md);
line-height: var(--lh-base);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, .h1 {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(2.4rem, 5vw, 4.5rem);
line-height: var(--lh-tight);
letter-spacing: var(--track-display);
color: var(--fg-1);
}
h2, .h2 {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.8rem, 3vw, 2.75rem);
line-height: var(--lh-snug);
letter-spacing: var(--track-tight);
}
h3, .h3 {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--text-2xl);
line-height: var(--lh-snug);
letter-spacing: var(--track-tight);
}
h4, .h4 {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--text-xl);
line-height: var(--lh-snug);
}
h5, .h5 {
font-family: var(--font-body);
font-weight: 600;
font-size: var(--text-md);
}
p, .body {
font-size: var(--text-md);
line-height: var(--lh-relaxed);
color: var(--fg-2);
max-width: 64ch;
text-wrap: pretty;
}
small, .small {
font-size: var(--text-sm);
color: var(--fg-3);
}
/* Eyebrow — wide tracking, ALL CAPS, used above section titles.
Mirrors "ASSINATURA PRINCIPAL", "PALETA DE CORES" in brand doc. */
.eyebrow {
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--track-eyebrow);
color: var(--fg-2);
display: inline-flex;
align-items: center;
gap: .6em;
}
.eyebrow::before {
content: "/";
color: var(--accent);
font-weight: 700;
}
/* Mono — for technical labels, tags, coords, codes */
code, .mono, kbd {
font-family: var(--font-mono);
font-size: 0.92em;
letter-spacing: 0;
}
/* Quote / manifesto — used for big institutional pulls */
.quote {
font-family: var(--font-display);
font-weight: 300;
font-size: var(--text-3xl);
line-height: var(--lh-snug);
letter-spacing: var(--track-tight);
color: var(--fg-1);
}
/* Accent helpers */
.text-gradient {
background: var(--binv-gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.text-azul { color: var(--binv-azul); }
.text-verde { color: var(--binv-verde); }
/* Hairline — repeated motif from brand doc */
.rule {
height: 1px;
background: var(--border);
border: 0;
}
.rule-accent {
height: 2px;
background: var(--binv-gradient);
border: 0;
}