/* ============================================================================ Obolpay design tokens — Coinbase/Stripe hybrid Cobalt-blue action color (#0052FF) on Stripe-grade neutral surfaces. Light + dark themes; switch with . The Ø coin mark is the only retained Obol brand element (recolored blue). ========================================================================== */ :root { /* --- type --- */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* --- radii --- */ --r-xs: 6px; --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px; /* --- layout --- */ --maxw: 1120px; --nav-h: 64px; /* --- motion --- */ --ease: cubic-bezier(.22, .61, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); /* --- brand accents (theme-independent) --- */ --blue: #0052FF; /* Coinbase cobalt — primary action */ --blue-600: #0043D6; --blue-700: #003299; --violet: #635BFF; /* Stripe violet — gradient partner */ --grad-brand: linear-gradient(135deg, #0052FF 0%, #635BFF 100%); --grad-brand-soft: linear-gradient(135deg, rgba(0,82,255,.10) 0%, rgba(99,91,255,.10) 100%); } /* ---------------------------------------------------------------- LIGHT --- */ :root, :root[data-theme="light"] { color-scheme: light; --bg: #FFFFFF; --bg-subtle: #F6F8FB; /* page wash */ --surface: #FFFFFF; /* cards */ --surface-2: #F6F8FB; /* inset / hover */ --surface-3: #EEF2F8; --border: #E5E9F0; --border-strong: #CFD7E3; --text: #0A0B0D; /* ink */ --text-2: #4D5765; /* secondary */ --text-3: #8A93A2; /* tertiary / placeholder */ --accent: var(--blue); --accent-hover: var(--blue-600); --accent-contrast: #FFFFFF; --accent-soft: #E9F0FF; /* tinted fill */ --accent-ring: rgba(0, 82, 255, .28); --success: #0E8A55; --success-soft: #E1F4EC; --warn: #B45309; --warn-soft: #FBF0DD; --danger: #D7373F; --danger-soft: #FBE7E8; --info: #0B79C4; --info-soft: #E4F1FB; --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08); --shadow: 0 4px 12px -2px rgba(16, 24, 40, .10), 0 2px 6px -2px rgba(16, 24, 40, .06); --shadow-lg: 0 24px 48px -16px rgba(13, 28, 66, .22), 0 8px 16px -8px rgba(13, 28, 66, .10); --dot-grid: rgba(10, 11, 13, .035); } /* ----------------------------------------------------------------- DARK --- */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0A0B0D; --bg-subtle: #0D1117; --surface: #14171F; --surface-2: #1A1E28; --surface-3: #222734; --border: #242A35; --border-strong: #343C4A; --text: #ECF0F6; --text-2: #A2ABBA; --text-3: #6B7585; --accent: #4D82FF; /* brighter on dark for contrast */ --accent-hover: #6B97FF; --accent-contrast: #FFFFFF; --accent-soft: rgba(77, 130, 255, .15); --accent-ring: rgba(77, 130, 255, .40); --success: #3CC489; --success-soft: rgba(60, 196, 137, .15); --warn: #E0A33E; --warn-soft: rgba(224, 163, 62, .15); --danger: #FF6166; --danger-soft: rgba(255, 97, 102, .15); --info: #4FB8F0; --info-soft: rgba(79, 184, 240, .15); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40); --shadow: 0 6px 18px -4px rgba(0, 0, 0, .55); --shadow-lg: 0 28px 56px -20px rgba(0, 0, 0, .70); --dot-grid: rgba(255, 255, 255, .03); } /* Terminal / code panels — intentionally dark in BOTH themes (the "rail" look). */ :root { --term-bg: #0B0D12; --term-surface: #12161F; --term-border: #232A38; --term-text: #E6EDF3; --term-dim: #7E8AA0; --term-blue: #6B97FF; --term-violet: #9D96FF; --term-green: #5BD6A0; --term-amber: #E7B45A; --term-red: #FF7A7E; }