/** * RVRSE Design Tokens — Brand Book V4 * Single source of truth for all colors, radii, and spacing. * DEC-009 | Do not hardcode hex values outside this file. */ :root { /* ─── Backgrounds ──────────────────────────────────────────────── */ --color-obsidian: #06080D; /* Primary page background () */ --color-onyx: #0B0F18; /* Sidebar, secondary panels, tier cards */ --color-graphite: #141924; /* Cards, inputs, table rows */ --color-steel: #1E2432; /* Borders, dividers, inactive states */ /* ─── Text ──────────────────────────────────────────────────────── */ --color-ivory: #EDEFF3; /* Headings, active elements, CTAs */ --color-pearl: #C9CEDA; /* Default body text */ --color-platinum: #C5CED6; /* Numeric values (TKN) */ --color-muted: #6E7A87; /* Labels, subtitles, inactive icons */ /* ─── Accents ────────────────────────────────────────────────────── */ --color-champagne: #C8A96A; /* Vendedor metal — Champagne gold (Brand Book V4) */ --color-champagne-light: #E6D5A7; /* Champagne gradient highlight stop */ --color-champagne-deep: #B3924B; /* Champagne gradient deep stop */ --color-emerald: #0E7E5E; /* Esmeralda tier, primary action buttons */ --color-emerald-soft: #1A9A78; /* Active labels, counters, success states */ --color-indigo: #8B8DF1; /* Postor service gem — Indigo V4 */ --color-signal-red: #C4564F; /* Errors, danger, destructive actions */ --color-signal-amber: #C89A4A; /* Warnings, pending states */ /* ─── Service Colors (RVR-124) ───────────────────────────────────── */ --color-directo: #10b981; /* Directo — Emerald Green */ --color-directo-dark: #0C6B4F; /* Directo hover (DEC-004) */ --color-subasta: #C8960C; /* Subasta — Amber gem (Brand Book V4) */ --color-subasta-dark: #A07A0A; /* Subasta hover */ --color-postor: #8B8DF1; /* Postor — Indigo gem (Brand Book V4) */ --color-postor-dark: #6062D8; /* Postor hover */ /* ─── Blind Identity Colors (DEC-012) ───────────────────────────── */ --color-identity-buyer: #C5CED6; /* COMP-XXXX — Platinum metal (Brand Book V4) */ --color-identity-seller: #C8A96A; /* VEND-XXXX — Champagne metal (Brand Book V4) */ /* ─── Borders ────────────────────────────────────────────────────── */ --border-default: rgba(255, 255, 255, 0.05); --border-subtle: rgba(255, 255, 255, 0.03); --border-hover: rgba(255, 255, 255, 0.10); --border-steel: #1E2432; /* ─── Border Radii ───────────────────────────────────────────────── */ --radius-sm: 4px; /* Buttons, inputs */ --radius-card: 6px; /* Content cards */ --radius-tier: 8px; /* Tier/plan cards, modals */ --radius-pill: 10px; /* Badges, pills, tags */ --radius-avatar: 9999px; /* ─── Typography ─────────────────────────────────────────────────── */ --font-display: 'Fraunces', Georgia, serif; /* Editorial accents */ --font-display-hero: 'Fraunces', Georgia, serif; /* Hero headlines — luxury premium */ --font-sans: 'Inter', system-ui, sans-serif; /* All UI */ --font-mono: 'JetBrains Mono', 'Courier New', monospace; /* TKN, IDs */ /* ─── Layout ─────────────────────────────────────────────────────── */ --sidebar-width: 240px; --header-height: 64px; --page-padding: 32px; /* ─── Transitions ────────────────────────────────────────────────── */ /* (Metal text utilities defined as classes below the :root block) */ --transition-fast: 0.15s ease; --transition-base: 0.25s ease; --transition-slow: 0.4s ease; /* ─── Shadows / Glows ────────────────────────────────────────────── */ --glow-directo: 0 0 20px rgba(16, 185, 129, 0.3); --glow-subasta: 0 0 20px rgba(200, 150, 12, 0.3); --glow-postor: 0 0 20px rgba(139, 141, 241, 0.3); --glow-logo: 0 0 12px rgba(197, 206, 214, 0.08); /* Platinum sheen — no neon */ --glow-success: 0 0 20px rgba(26, 154, 120, 0.18); /* Emerald soft glow */ } /* ─── Master Metal Text Protocol — Art Director canonical, do not alter ──── */ .metal-text { background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 1px 0 rgba(0,0,0,0.6)); } .metal-text.champagne { background-image: linear-gradient(135deg, #E6D5A7 0%, #C8A96A 45%, #B3924B 100%); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: none; } .metal-text.platinum { background-image: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 38%, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0) 62%, rgba(255,255,255,0) 100%), linear-gradient(180deg, #F5F7FA 0%, #DDE3E9 22%, #C5CED6 48%, #A8B1BB 68%, #8B94A0 86%, #4A525E 100%); } .metal-text.emerald { background-image: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 38%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 62%, rgba(255,255,255,0) 100%), linear-gradient(180deg, #52D9A8 0%, #1FC490 22%, #10b981 48%, #0E7E5E 68%, #0A6048 86%, #063D30 100%); } .metal-text.indigo { background-image: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 38%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0) 62%, rgba(255,255,255,0) 100%), linear-gradient(180deg, #8B8DF1 0%, #686AE8 22%, #4C4FB8 48%, #3A3D9E 68%, #2D2F73 86%, #191B4D 100%); }