/* ============================================================ Vex Agency — Colors, Type & Tokens ------------------------------------------------------------ Source of truth: github.com/vexecom/vex-flow (src/index.css, src/styles/slide-system.css, src/styles/landing-page.css). Two products share these tokens: 1. The back-office app (dark "Sistema Operacional") 2. The marketing LP (also dark, more glow-forward) 3. The 12-slide proposal deck (high-glow black) The accent #D6FF00 ("Vex Lime") is the single brand pin — everything else is a neutral, semantic, or status color. ============================================================ */ :root { /* ------- Brand ------------------------------------------- */ --vex-accent: #D6FF00; /* the brand color, period */ --vex-accent-2: #E8FF33; /* paired with accent in gradients */ --vex-accent-dim: rgba(214,255,0,0.15); --vex-accent-glow: rgba(214,255,0,0.40); --vex-accent-soft: rgba(214,255,0,0.10); /* ------- Surfaces (dark UI) ------------------------------ */ --bg-canvas: #0a0a0f; /* app background */ --bg-card: #0f0f17; /* solid card */ --bg-deck: #000000; /* slides + LP hero */ --surface-1: rgba(255,255,255,0.04); --surface-2: rgba(255,255,255,0.07); --surface-3: rgba(255,255,255,0.10); --hairline: rgba(255,255,255,0.10); --hairline-strong: rgba(255,255,255,0.18); --hairline-accent: rgba(214,255,0,0.25); /* ------- Foreground ------------------------------------- */ --fg-1: rgba(255,255,255,0.92); /* primary text */ --fg-2: rgba(255,255,255,0.70); /* secondary text */ --fg-3: rgba(255,255,255,0.50); /* muted text */ --fg-4: rgba(255,255,255,0.28); /* disabled / eyebrow */ /* ------- Status (Vex pipeline) -------------------------- */ --status-onboarding: #F59E0B; /* amber */ --status-execucao: var(--vex-accent); --status-testes: #B86CE0; /* purple */ --status-entregue: #16A34A; /* green */ --status-posvenda: #6B7280; /* gray */ /* ------- Priority --------------------------------------- */ --priority-alta: #EF4444; --priority-media: #F59E0B; --priority-baixa: #16A34A; /* ------- System feedback -------------------------------- */ --success: #16A34A; --warning: #F59E0B; --danger: #EF4444; --info: #3B82F6; /* ------- Type ------------------------------------------- */ --font-heading: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'SF Pro Display', 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, monospace; --text-tracking-tight: -0.02em; /* hero / display */ --text-tracking: -0.01em; /* body */ --text-tracking-caps: 0.06em; /* eyebrows */ /* ------- Spacing (4px grid) ----------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-24: 96px; /* ------- Radii ------------------------------------------ */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 12px; /* default — buttons, fields, app cards */ --radius-lg: 16px; /* slide cards, big surfaces */ --radius-xl: 20px; /* LP marketing cards */ --radius-pill: 9999px; /* ------- Shadows / Glow --------------------------------- */ --shadow-sm: 0 4px 14px -3px rgba(214,255,0,0.12); --shadow-md: 0 8px 25px -5px rgba(214,255,0,0.16); --shadow-lg: 0 12px 35px -8px rgba(214,255,0,0.20); --glow: 0 0 40px rgba(214,255,0,0.25); --glow-strong:0 0 60px rgba(214,255,0,0.40); /* ------- Motion ----------------------------------------- */ --ease-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 150ms; --dur-normal: 200ms; --dur-slow: 300ms; } /* ============================================================ Base type styles (semantic shorthand) ============================================================ */ html { color-scheme: dark; } body { background: var(--bg-canvas); color: var(--fg-1); font-family: var(--font-body); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5 { font-family: var(--font-heading); font-weight: 600; letter-spacing: var(--text-tracking-tight); line-height: 1.1; color: var(--fg-1); margin: 0; } /* Slide / hero sized — used on LP + proposals */ .t-hero { font-size: 64px; font-weight: 700; line-height: 1.05; letter-spacing: -0.025em; } .t-display { font-size: 48px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; } .t-slide-h1 { font-size: 32px; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; } /* App / dashboard */ h1, .t-h1 { font-size: 24px; font-weight: 600; line-height: 1.2; } h2, .t-h2 { font-size: 20px; font-weight: 600; line-height: 1.25; } h3, .t-h3 { font-size: 16px; font-weight: 600; line-height: 1.3; } /* Body */ .t-lead { font-size: 18px; font-weight: 500; letter-spacing: var(--text-tracking); color: var(--fg-1); } p, .t-body { font-size: 16px; font-weight: 400; line-height: 1.55; color: var(--fg-3); margin: 0; } .t-body-1 { color: var(--fg-1); font-size: 16px; line-height: 1.55; } .t-caption { font-size: 14px; font-weight: 400; color: var(--fg-3); } .t-micro { font-size: 12px; font-weight: 500; color: var(--fg-3); } /* Eyebrow / labels */ .t-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: var(--text-tracking-caps); text-transform: uppercase; color: var(--fg-4); } /* Mono / numeric */ code, .t-mono { font-family: var(--font-mono); font-size: 13px; color: var(--fg-3); } /* Vex utility — accent text + glow (proposal slides) */ .t-accent { color: var(--vex-accent); } .t-glow { text-shadow: 0 0 30px rgba(214,255,0,0.4); } .t-glow-strong { text-shadow: 0 0 40px rgba(214,255,0,0.6), 0 0 80px rgba(214,255,0,0.2); }