/* ============================================================= CoinHODL - design tokens Theme-independent scale: spacing, radius, shadow, type, layout. Brand color itself lives in theme-light.css / theme-dark.css (it shifts value between the two modes), but the raw CoinHODL brand hexes are pinned here so both themes derive from the same source of truth. Palette below is taken directly from the CoinHODL design-system reference: Deep Navy / Electric Blue / Aqua Mint / Indigo / Slate / Coot White, Inter + Plus Jakarta Sans typography, and the five semantic status colors. ============================================================= */ :root { /* ---- CoinHODL brand palette (from design-system reference) ---- */ --coinhodl-deep-navy: #0B1320; --coinhodl-electric-blue: #2563EB; --coinhodl-electric-blue-strong: #3B82F6; --coinhodl-aqua-mint: #14B8A6; --coinhodl-indigo: #6366F1; --coinhodl-slate: #64748B; --coinhodl-coot-white: #E5E7EB; /* Kept for any legacy reference - CoinHODL electric blue is now the single source of truth for --brand in both themes (see theme-light.css / theme-dark.css). */ --ripple-blue-light: #00A5DF; --ripple-blue-dark: #00649B; --ripple-gray: #434C54; /* ---- Type ---- Headings: Inter. Body/UI copy: Plus Jakarta Sans. Both loaded as Google Fonts from the layout (see _Layout.cshtml / _PublicLayout.cshtml / _AuthLayout.cshtml). */ --font-heading: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-sans: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; /* ---- Spacing ---- */ --space-1: 6px; --space-2: 10px; --space-3: 14px; --space-4: 18px; --space-5: 28px; /* ---- Radius ---- */ --radius-sm: .5rem; --radius: .75rem; --radius-lg: 1.25rem; --radius-xl: 1.75rem; /* ---- Layout ---- */ --sb-w: 272px; --sb-w-compact: 76px; --page-max: 1320px; /* ---- Motion ---- */ --ease: cubic-bezier(.22,.61,.36,1); /* ---- Button roles ---- One fixed palette for every filled button in the app, independent of light/dark theme - each -bg is deliberately picked so plain white button text clears WCAG AA contrast on top of it (the app's brand/ status colors elsewhere are tuned for a dark background instead, and are too light for that - that mismatch is why button text has been hard to read). To change what a role looks like everywhere at once, edit its -bg/-bg-hover value here - nothing else needs to change. Roles: view (primary navigation / "View X"), add (create/positive/ confirm/execute), edit, delete (destructive, permanent), cancel (dismiss a form/step - NOT destructive), back (secondary/neutral navigation), slate (neutral/tertiary). Mapped onto the CoinHODL design-system swatches: view=Electric Blue (primary), add=Success, edit=Indigo (info), delete=Danger, cancel=Warning, back=Aqua Mint (secondary), slate=Slate. See app-shell.css for how each role maps onto a button class, and public.css for the auth-page primary CTA. */ --btn-view-bg: #2563eb; --btn-view-bg-hover: #3b76f6; --btn-view-text: #fff; --btn-add-bg: #16a34a; --btn-add-bg-hover: #1cbf59; --btn-add-text: #fff; --btn-edit-bg: #4f46e5; --btn-edit-bg-hover: #6366f1; --btn-edit-text: #fff; --btn-delete-bg: #ef4444; --btn-delete-bg-hover: #f16565; --btn-delete-text: #fff; --btn-cancel-bg: #f59e0b; --btn-cancel-bg-hover: #ffab1f; --btn-cancel-text: #1a1200; --btn-back-bg: #14b8a6; --btn-back-bg-hover: #22cdba; --btn-back-text: #fff; --btn-slate-bg: #64748b; --btn-slate-bg-hover: #78879a; --btn-slate-text: #fff; } html { scroll-behavior: smooth; } /* Headings use the Inter half of the CoinHODL font pairing everywhere (body copy stays on Plus Jakarta Sans, set as --font-sans and applied via `html, body { font-family }` in public.css / app-shell.css). Centralized here so both the authenticated app shell and the public/auth pages pick it up identically. */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-heading); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }