/* AUREX PAY — Design Tokens v3 (ultra-refined) Dark elite + ouro líquido, with platina/esmeralda accent variants */ :root { /* SURFACES — true obsidian with slight warm tone */ --void: #08080A; /* absolute black */ --dark: #0C0C10; /* page dark sections */ --surf-0: #101016; /* card base */ --surf-1: #16161E; /* card raised */ --surf-2: #1D1D27; /* card highest */ --surf-3: #252532; --hairline: rgba(255,255,255,0.06); --hairline2: rgba(255,255,255,0.10); --hairline3: rgba(255,255,255,0.14); /* ACCENT — REAL metallic gold (warm, rich, not yellow) — default */ --acc-100: #F8E4B8; /* highlight gleam */ --acc-200: #EDC987; /* warm champagne */ --acc-300: #D9A859; /* polished gold */ --acc-400: #B8862F; /* primary — deep antique gold */ --acc-500: #8C611C; /* shadow gold */ --acc-600: #5C3F0F; /* burnt edge */ --acc-dim-1: rgba(184,134,47,0.08); --acc-dim-2: rgba(184,134,47,0.16); --acc-dim-3: rgba(184,134,47,0.28); --acc-dim-4: rgba(217,168,89,0.40); --acc-glow: rgba(217,168,89,0.55); /* metallic surface gradients */ --grad-metal: linear-gradient(135deg, #F8E4B8 0%, #D9A859 28%, #8C611C 58%, #B8862F 78%, #EDC987 100%); --grad-foil: linear-gradient(180deg, #EDC987 0%, #B8862F 50%, #5C3F0F 100%); --grad-shine: linear-gradient(105deg, transparent 35%, rgba(248,228,184,0.7) 50%, transparent 65%); /* TEXT */ --white: #F4F4F9; --soft: #C8C8DA; --body: #8E8EA6; --muted: #5A5A74; --mute-2: #3E3E52; /* SEMANTIC */ --pos: #3ECC84; --pos-dim: rgba(62,204,132,0.10); --neg: #E06A6A; --neg-dim: rgba(224,106,106,0.10); --info: #6FA4E8; --info-dim: rgba(111,164,232,0.10); /* TYPE */ --f-display: 'Fraunces', 'Times New Roman', serif; /* editorial headlines for brand moments */ --f-head: 'Space Grotesk', 'Helvetica Neue', sans-serif; --f-body: 'Inter', 'Helvetica Neue', sans-serif; --f-mono: 'JetBrains Mono', 'DM Mono', monospace; /* RADII */ --r-2: 6px; --r-3: 10px; --r-4: 14px; --r-5: 20px; --r-pill: 999px; /* SHADOWS — warm, not neutral */ --sh-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.32); --sh-2: 0 1px 0 rgba(255,255,255,0.05) inset, 0 20px 50px rgba(0,0,0,0.52); --sh-gold: 0 0 0 1px rgba(201,168,76,0.18), 0 18px 48px rgba(201,168,76,0.22); /* MOTION */ --ease: cubic-bezier(0.2, 0.7, 0.15, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* ACCENT VARIANTS — activated via [data-accent="platina|esmeralda"] on */ html[data-accent="platina"] { --acc-100: #EEF3F8; --acc-200: #D8E0EA; --acc-300: #B9C4D3; --acc-400: #A6B2C3; --acc-500: #8592A6; --acc-600: #606D82; --acc-dim-1: rgba(166,178,195,0.06); --acc-dim-2: rgba(166,178,195,0.12); --acc-dim-3: rgba(166,178,195,0.22); --acc-dim-4: rgba(166,178,195,0.34); --acc-glow: rgba(185,196,211,0.42); } html[data-accent="esmeralda"] { --acc-100: #D8F5E4; --acc-200: #A8E6C3; --acc-300: #6FD19B; --acc-400: #3FB67B; --acc-500: #2B9865; --acc-600: #1E744B; --acc-dim-1: rgba(63,182,123,0.06); --acc-dim-2: rgba(63,182,123,0.12); --acc-dim-3: rgba(63,182,123,0.22); --acc-dim-4: rgba(63,182,123,0.34); --acc-glow: rgba(111,209,155,0.42); } /* RESET */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { font-family: var(--f-body); background: var(--void); color: var(--body); line-height: 1.6; font-feature-settings: "ss01", "cv01", "cv02"; } a { text-decoration: none; color: inherit; } ul, ol { list-style: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } img, svg { display: block; max-width: 100%; } /* UTILITY */ .kicker { font-family: var(--f-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--acc-400); display: inline-flex; align-items: center; gap: 10px; } .kicker::before { content: ''; display: block; width: 22px; height: 1px; background: var(--acc-400); } .kicker.center::before { display: none; } .mono { font-family: var(--f-mono); } .display { font-family: var(--f-display); font-weight: 400; font-style: italic; letter-spacing: -0.02em; } .h-acc { color: var(--acc-400); }