/* ============================================================ E-VETS — Design System · Tokens Consolidado de ~/Downloads/E-VETS Design System-3/tokens/*.css (colors, typography, spacing, effects, base). Fonte via no de cada página (Google Fonts), não via @import aqui. Aplicado página por página — ver /Users/charlyscardio/.claude/plans/golden-wobbling-sprout.md ============================================================ */ :root { /* ---- Brand: Primary Green (medicine, trust, growth) ---- */ --green-900: #14311a; --green-800: #1a3f20; --green-700: #224f26; /* PRIMARY GREEN — brand core */ --green-600: #2f6635; --green-500: #3d7d43; --green-400: #5c9a61; --green-300: #8bbb8f; --green-200: #c1dbc3; --green-100: #e6f1e7; --green-50: #f3f8f3; /* ---- Brand: Primary Purple (technology, intelligence) ---- */ --purple-900: #161238; --purple-800: #1e1846; --purple-700: #261f55; /* PRIMARY PURPLE — brand core */ --purple-600: #352c70; --purple-500: #473c8c; --purple-400: #6459a8; --purple-300: #948cc4; --purple-200: #c5c0e0; --purple-100: #e8e6f2; --purple-50: #f4f3f9; /* ---- Brand: Accent Cyan (interactive, highlights, digital) ---- */ --cyan-900: #0a4a46; --cyan-800: #0f6b65; --cyan-700: #148f88; --cyan-600: #1cb2aa; /* ACCENT CYAN — brand core */ --cyan-500: #34c4bd; --cyan-400: #5fd3cd; --cyan-300: #8fe0db; --cyan-200: #bfeeeb; --cyan-100: #e2f8f6; --cyan-50: #f1fcfb; /* ---- Neutral Gray (balance, elegance, readability) ---- */ --gray-950: #0f1110; --gray-900: #1a1c1b; --gray-800: #2b2e2c; --gray-700: #414443; --gray-600: #55605e; --gray-500: #666766; /* NEUTRAL GRAY — brand core */ --gray-400: #8a8b8a; --gray-300: #b4b5b4; --gray-200: #d7d8d7; --gray-150: #e6e7e6; --gray-100: #eff0ef; --gray-50: #f7f8f7; --white: #ffffff; /* ---- Semantic meaning ---- */ --success: #2f6635; --success-bg: #e6f1e7; --warning: #c98a12; --warning-bg: #fdf3e0; --critical: #c0392b; --critical-bg: #fbeae8; --info: #2a6fdb; --info-bg: #e8f0fc; --ai: #473c8c; --ai-bg: #e8e6f2; /* ---- Semantic surface & text aliases ---- */ --bg-app: var(--gray-50); --bg-canvas: var(--white); --surface-card: var(--white); --surface-sunken:var(--gray-50); --surface-inverse: var(--purple-700); --text-strong: var(--gray-950); --text-body: var(--gray-800); --text-muted: var(--gray-500); --text-subtle: var(--gray-400); --text-on-dark: var(--white); --text-on-dark-muted: rgba(255,255,255,0.72); --border-subtle: var(--gray-150); --border-default:var(--gray-200); --border-strong: var(--gray-300); --accent: var(--cyan-600); --accent-hover: var(--cyan-700); --brand-primary: var(--green-700); --brand-secondary: var(--purple-700); /* ---- Signature gradients ---- */ --grad-brand: linear-gradient(120deg, var(--purple-700) 0%, var(--green-700) 100%); --grad-aurora: linear-gradient(115deg, var(--purple-700) 0%, var(--cyan-600) 55%, var(--green-600) 100%); --grad-text: linear-gradient(100deg, var(--purple-600) 0%, var(--cyan-600) 100%); --grad-ai: linear-gradient(120deg, var(--purple-600) 0%, var(--cyan-500) 100%); /* ---- Typography ---- */ --font-display: 'Jost', 'Geraldton', 'Century Gothic', system-ui, sans-serif; --font-body: 'Jost', 'Geraldton', system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; --fw-thin: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --text-2xs: 0.6875rem; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base:1rem; --text-md: 1.125rem; --text-lg: 1.375rem; --text-xl: 1.75rem; --text-2xl: 2.25rem; --text-3xl: 3rem; --text-4xl: 4rem; --text-5xl: 5.5rem; --leading-tight: 1.05; --leading-snug: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.7; --tracking-tight: -0.02em; --tracking-normal: 0em; --tracking-wide: 0.04em; --tracking-caps: 0.14em; /* ---- Spacing (8pt rhythm) ---- */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; --container-sm: 640px; --container-md: 840px; --container-lg: 1120px; --container-xl: 1320px; --gutter: 2rem; --section-y: 6rem; /* ---- Corner radii ---- */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-2xl: 40px; --radius-pill: 999px; /* ---- Elevation ---- */ --shadow-xs: 0 1px 2px rgba(20, 33, 22, 0.06); --shadow-sm: 0 2px 8px rgba(20, 33, 22, 0.06), 0 1px 2px rgba(20, 33, 22, 0.04); --shadow-md: 0 8px 24px rgba(20, 33, 22, 0.08), 0 2px 6px rgba(20, 33, 22, 0.04); --shadow-lg: 0 20px 48px rgba(20, 33, 22, 0.10), 0 4px 12px rgba(20, 33, 22, 0.05); --shadow-xl: 0 32px 72px rgba(20, 33, 22, 0.14); --ring: 0 0 0 3px rgba(28, 178, 170, 0.35); --ring-purple: 0 0 0 3px rgba(71, 60, 140, 0.30); --glass-bg: rgba(255, 255, 255, 0.7); --glass-border: rgba(255, 255, 255, 0.6); --glass-blur: 16px; /* ---- Motion ---- */ --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.4, 0.0, 1, 1); --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 420ms; } /* ---- Signature utility classes (do base.css do DS) ---- */ .evets-eyebrow { font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-caps); font-weight: var(--fw-medium); font-size: var(--text-xs); } .evets-gradient-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---- Ícones (Lucide, via CDN) — regra do DS: "Emoji: never used in product or marketing" / "Icon set: Lucide". Stroke-only, currentColor. ---- */ [data-lucide] { display: inline-block; vertical-align: -0.2em; } .evets-icon-sm svg, .evets-icon-sm[data-lucide] { width: 16px; height: 16px; } .evets-icon svg, .evets-icon[data-lucide] { width: 20px; height: 20px; } .evets-icon-lg svg, .evets-icon-lg[data-lucide] { width: 28px; height: 28px; }