/* * Conduit Design System * Brand anchors: Conduit Design / Brand Identity / Brand elements colors. * Figma node 1153:44774. Non-500 HSL steps are derived UI shades and tints. */ :root, :root[data-theme="night-market"] { color-scheme: dark; /* Exact source swatches. Keep these separate from derived UI colors. */ --brand-ink: #05001d; --brand-purple: #bb00ff; --brand-orange: #f7771b; --brand-rose: #d32973; /* Decorative legacy anchor; never utility error. */ --brand-red: #ef4444; --brand-violet: #5521c3; --theme-color: var(--brand-ink); --cash-app-green: #00e013; --project-tip-heart: var(--brand-rose); /* Base hue/saturation for color calculations */ --base-h: 0; --base-s: 0%; /* Primary - Purple */ --primary-h: 284; --primary-s: 100%; --primary-50: hsla(var(--primary-h), var(--primary-s), 97%, 1); --primary-100: hsla(var(--primary-h), var(--primary-s), 94%, 1); --primary-150: hsla(var(--primary-h), var(--primary-s), 90%, 1); --primary-200: hsla(var(--primary-h), var(--primary-s), 85%, 1); --primary-300: hsla(var(--primary-h), var(--primary-s), 75%, 1); --primary-400: hsla(var(--primary-h), var(--primary-s), 65%, 1); --primary-500: var(--brand-purple); --primary-600: hsla(var(--primary-h), var(--primary-s), 40%, 1); --primary-700: hsla(var(--primary-h), var(--primary-s), 30%, 1); --primary-800: hsla(var(--primary-h), var(--primary-s), 20%, 1); --primary-900: hsla(var(--primary-h), var(--primary-s), 12%, 1); --primary-950: hsla(var(--primary-h), var(--primary-s), 6%, 1); /* Secondary - Orange */ --secondary-h: 25.09; --secondary-s: 93.22%; --secondary-50: hsla(var(--secondary-h), var(--secondary-s), 97%, 1); --secondary-100: hsla(var(--secondary-h), var(--secondary-s), 94%, 1); --secondary-150: hsla(var(--secondary-h), var(--secondary-s), 90%, 1); --secondary-200: hsla(var(--secondary-h), var(--secondary-s), 85%, 1); --secondary-300: hsla(var(--secondary-h), var(--secondary-s), 75%, 1); --secondary-400: hsla(var(--secondary-h), var(--secondary-s), 65%, 1); --secondary-500: var(--brand-orange); --secondary-600: hsla(var(--secondary-h), var(--secondary-s), 40%, 1); --secondary-700: hsla(var(--secondary-h), var(--secondary-s), 30%, 1); --secondary-800: hsla(var(--secondary-h), var(--secondary-s), 20%, 1); --secondary-900: hsla(var(--secondary-h), var(--secondary-s), 12%, 1); --secondary-950: hsla(var(--secondary-h), var(--secondary-s), 6%, 1); /* Tertiary - Rose */ --tertiary-h: 333.88; --tertiary-s: 67.46%; --tertiary-50: hsla(var(--tertiary-h), var(--tertiary-s), 97%, 1); --tertiary-100: hsla(var(--tertiary-h), var(--tertiary-s), 94%, 1); --tertiary-150: hsla(var(--tertiary-h), var(--tertiary-s), 90%, 1); --tertiary-200: hsla(var(--tertiary-h), var(--tertiary-s), 85%, 1); --tertiary-300: hsla(var(--tertiary-h), var(--tertiary-s), 75%, 1); --tertiary-400: hsla(var(--tertiary-h), var(--tertiary-s), 65%, 1); --tertiary-500: var(--brand-rose); --tertiary-600: hsla(var(--tertiary-h), var(--tertiary-s), 40%, 1); --tertiary-700: hsla(var(--tertiary-h), var(--tertiary-s), 30%, 1); --tertiary-800: hsla(var(--tertiary-h), var(--tertiary-s), 20%, 1); --tertiary-900: hsla(var(--tertiary-h), var(--tertiary-s), 12%, 1); --tertiary-950: hsla(var(--tertiary-h), var(--tertiary-s), 6%, 1); /* Accent - Violet */ --accent-h: 259.26; --accent-s: 71.05%; --accent-50: hsla(var(--accent-h), var(--accent-s), 97%, 1); --accent-100: hsla(var(--accent-h), var(--accent-s), 94%, 1); --accent-150: hsla(var(--accent-h), var(--accent-s), 90%, 1); --accent-200: hsla(var(--accent-h), var(--accent-s), 85%, 1); --accent-300: hsla(var(--accent-h), var(--accent-s), 75%, 1); --accent-400: hsla(var(--accent-h), var(--accent-s), 65%, 1); --accent-500: var(--brand-violet); --accent-600: hsla(var(--accent-h), var(--accent-s), 40%, 1); --accent-700: hsla(var(--accent-h), var(--accent-s), 30%, 1); --accent-800: hsla(var(--accent-h), var(--accent-s), 20%, 1); --accent-900: hsla(var(--accent-h), var(--accent-s), 12%, 1); --accent-950: hsla(var(--accent-h), var(--accent-s), 6%, 1); /* Neutral - Gray */ --neutral-h: 220; --neutral-s: 10%; --neutral-50: hsla(var(--neutral-h), var(--neutral-s), 98%, 1); --neutral-100: hsla(var(--neutral-h), var(--neutral-s), 96%, 1); --neutral-150: hsla(var(--neutral-h), var(--neutral-s), 92%, 1); --neutral-200: hsla(var(--neutral-h), var(--neutral-s), 88%, 1); --neutral-300: hsla(var(--neutral-h), var(--neutral-s), 78%, 1); --neutral-400: hsla(var(--neutral-h), var(--neutral-s), 62%, 1); --neutral-500: hsla(var(--neutral-h), var(--neutral-s), 46%, 1); --neutral-600: hsla(var(--neutral-h), var(--neutral-s), 36%, 1); --neutral-700: hsla(var(--neutral-h), var(--neutral-s), 26%, 1); --neutral-800: hsla(var(--neutral-h), var(--neutral-s), 16%, 1); --neutral-900: hsla(var(--neutral-h), var(--neutral-s), 10%, 1); --neutral-950: hsla(var(--neutral-h), var(--neutral-s), 5%, 1); /* Utility signals remain recognizable independently of the brand accents. */ --success: hsla(142, 71%, 45%, 1); --warning: var(--brand-orange); --error: var(--brand-red); --info: var(--brand-violet); /* Readable copy on base surfaces. These are UI roles, not extra brand swatches. */ --success-text: hsla(142, 71%, 55%, 1); --warning-text: var(--brand-orange); --error-text: var(--brand-red); --info-text: var(--accent-300); --link-text: var(--primary-300); --destructive-action: hsla(0, 72%, 51%, 1); --destructive-action-hover: hsla(0, 74%, 42%, 1); --bitcoin-price: var(--brand-orange); /* Text on colored/dark surfaces (e.g. gradient buttons, filled badges) */ --on-primary: hsla(0, 0%, 100%, 1); /* * Avatar fallback background -- intentionally theme-invariant (always dark). * White icons (brightness-0 invert) remain visible in both light and dark modes. */ --avatar-bg: var(--neutral-950); /* * shadcn/ui semantic tokens (canonical) * Keep these as the primary contract for shared UI components. */ --background: var(--brand-ink); --foreground: var(--neutral-50); --card: rgba(255, 255, 255, 0.04); --card-foreground: var(--foreground); --popover: rgba(255, 255, 255, 0.06); --popover-foreground: var(--foreground); --primary: var(--primary-500); --primary-foreground: white; --secondary: var(--secondary-500); --secondary-foreground: var(--brand-ink); --muted: rgba(255, 255, 255, 0.06); --muted-foreground: var(--neutral-300); --accent: var(--accent-500); --accent-foreground: white; --destructive: var(--error); --destructive-foreground: white; /* Text */ /* * Back-compat aliases (non-shadcn) * We can remove these after UI has been migrated to shadcn token names. */ --text-primary: var(--foreground); --text-secondary: var(--muted-foreground); --text-muted: var(--neutral-400); --text-inverse: var(--background); /* Back-compat surfaces */ --surface: var(--card); --surface-elevated: var(--popover); --surface-dialog: #090314; --surface-overlay: #0d0520; /* floating menus / dropdowns */ /* Border */ --border: rgba(255, 255, 255, 0.12); --input: var(--border); --ring: var(--primary-500); /* Back-compat alias */ --border-focus: var(--ring); /* * --border-overlay: used for the ring/outline on floating surfaces (dropdowns, dialogs). * Dark: neutral-700 (26% L) -- visible but not harsh against dark overlays. * Light: overridden to neutral-300 (78% L) -- visible against white surfaces. */ --border-overlay: var(--neutral-700); /* Spacing scale */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* Border radius */ --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-full: 9999px; --radius: var(--radius-md); /* Shadows */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); --shadow-glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04); --shadow-dialog: 0 28px 80px rgba(0, 0, 0, 0.6); } /* Day Market preserves the current light value set. */ :root[data-theme="day-market"] { color-scheme: light; /* * Surface hierarchy in light mode: * background (neutral-150, 92%) -> surface/card (white) -> elevated (white) * The deeper background gives white surfaces real contrast to lift against. */ --background: var(--neutral-150); --foreground: var(--neutral-900); --theme-color: var(--background); /* Foreground roles retain their hue with enough contrast for small copy. */ --warning-text: hsla(25, 100%, 30%, 1); --success: hsla(142, 72%, 35%, 1); --success-text: hsla(142, 72%, 24%, 1); --error-text: hsla(0, 74%, 42%, 1); --bitcoin-price: hsla(25, 100%, 34%, 1); --info-text: var(--brand-violet); --link-text: var(--primary-600); /* Tier 1 - base panels / cards */ --card: white; --card-foreground: var(--foreground); /* Tier 2 - popovers / inline elevated panels */ --popover: white; --popover-foreground: var(--foreground); --muted: var(--neutral-100); --muted-foreground: var(--neutral-700); --text-primary: var(--foreground); --text-secondary: var(--muted-foreground); --text-muted: var(--neutral-600); --text-inverse: white; /* Semantic surface aliases */ --surface: var(--card); /* base panel/card */ --surface-elevated: var(--popover); /* inline raised panel */ --surface-dialog: white; /* full dialogs */ --surface-overlay: white; /* floating menus / dropdowns */ /* Borders are one step darker so they read against white surfaces */ --border: var(--neutral-200); --input: var(--neutral-200); --border-overlay: var(--neutral-300); /* Inset highlight visible on white */ --shadow-glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 var(--neutral-200); /* Floating element shadows -- softer than dark mode but still visible */ --shadow-dialog: 0 8px 30px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.06); }