/** * TradenSell design tokens - single source for brand colours. * Retheme: adjust accent block, then border / selected / active / disabled as needed. */ :root { /* Surfaces & text (dark theme default) */ --ts-primary: #0a0a0a; --ts-primary-rgb: 10, 10, 10; --ts-surface: #0c0c0c; --ts-elevated: #141414; --ts-elevated-2: #1a1a1a; --ts-body: #e8e8e8; --ts-muted: rgba(255, 255, 255, 0.55); --ts-heading: #f5f5f5; --ts-emphasis: #ffffff; --ts-radius: 0.75rem; --ts-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Brand accent (primary) */ --ts-accent: #7cfc00; --ts-accent-rgb: 124, 252, 0; --ts-accent-lighter: #9eff3a; --ts-accent-darker: #5fd400; --ts-accent-gradient-end: #4ade80; /* Accent-derived (use rgb token so opacity tracks palette) */ --ts-accent-soft: rgba(var(--ts-accent-rgb), 0.14); --ts-accent-text: #b8ff57; --ts-accent-text-hover: #d4ff8a; --ts-accent-text-soft: #e8ffc8; --ts-accent-text-muted: #a3f955; --ts-accent-icon: rgba(var(--ts-accent-rgb), 0.85); --ts-accent-on: #111111; --ts-accent-on-muted: #0a0a0a; --ts-accent-btn-hover-bg: #c8ff70; --ts-accent-btn-hover: #b8ff4d; --ts-accent-btn-active: #22d3ee; --ts-accent-price: var(--ts-accent-text); --ts-accent-fill-strong: rgba(var(--ts-accent-rgb), 0.85); --ts-accent-fill-medium: rgba(var(--ts-accent-rgb), 0.35); --ts-accent-fill-light: rgba(var(--ts-accent-rgb), 0.2); --ts-accent-fill-subtle: rgba(var(--ts-accent-rgb), 0.12); --ts-accent-fill-faint: rgba(var(--ts-accent-rgb), 0.08); --ts-accent-fill-whisper: rgba(var(--ts-accent-rgb), 0.06); --ts-accent-fill-ghost: rgba(var(--ts-accent-rgb), 0.04); --ts-accent-shadow: rgba(var(--ts-accent-rgb), 0.25); --ts-accent-glow: rgba(var(--ts-accent-rgb), 0.08); --ts-accent-focus-ring: rgba(var(--ts-accent-rgb), 0.15); --ts-accent-focus-border: rgba(var(--ts-accent-rgb), 0.45); --ts-accent-border-strong: rgba(var(--ts-accent-rgb), 0.55); --ts-accent-border-medium: rgba(var(--ts-accent-rgb), 0.35); --ts-accent-border-light: rgba(var(--ts-accent-rgb), 0.28); --ts-accent-border-subtle: rgba(var(--ts-accent-rgb), 0.22); --ts-accent-border-faint: rgba(var(--ts-accent-rgb), 0.18); /* Borders - neutral (inputs, dividers) vs accent (cards, chrome) */ --ts-border-neutral: rgba(255, 255, 255, 0.12); --ts-border-accent: rgba(var(--ts-accent-rgb), 0.14); --ts-border: var(--ts-border-accent); --ts-border-input: var(--ts-border-neutral); --ts-border-focus: var(--ts-accent-focus-border); --ts-border-hover: var(--ts-accent-border-light); --ts-border-selected: var(--ts-accent-border-strong); --ts-border-active: var(--ts-accent); --ts-border-disabled: rgba(255, 255, 255, 0.15); /* Selected - toggles, pay/delivery tiles, filter chips */ --ts-selected-bg: var(--ts-accent-soft); --ts-selected-border: var(--ts-accent-border-strong); --ts-selected-text: var(--ts-body); /* Active - current page, tabs, list rows, gallery thumb */ --ts-active-bg: var(--ts-accent); --ts-active-border: var(--ts-accent); --ts-active-text: var(--ts-accent-on-muted); --ts-active-soft-bg: var(--ts-accent-soft); --ts-active-soft-border: var(--ts-accent-border-medium); --ts-active-soft-text: var(--ts-heading); --ts-active-indicator: var(--ts-accent); /* Disabled - buttons, pagination, inactive controls */ --ts-disabled-opacity: 0.45; --ts-disabled-bg: rgba(255, 255, 255, 0.08); --ts-disabled-border: var(--ts-border-disabled); --ts-disabled-text: rgba(255, 255, 255, 0.5); --ts-disabled-muted-text: rgba(255, 255, 255, 0.35); /* Hover - unselected interactive surfaces */ --ts-hover-bg: var(--ts-accent-fill-faint); --ts-hover-border: var(--ts-accent-border-light); --ts-hover-text: var(--ts-body); /* Semantic (not brand - success/error stay independent of accent retheme) */ --ts-success: #34d399; --ts-success-rgb: 52, 211, 153; --ts-success-soft: rgba(var(--ts-success-rgb), 0.18); --ts-success-text: #6ee7b7; } /* Light theme palette overrides */ html[data-bs-theme="light"] { --ts-body: #1a1b1e; --ts-muted: rgba(0, 0, 0, 0.58); --ts-surface: #f0f2f5; --ts-elevated: #ffffff; --ts-elevated-2: #f8f9fa; --ts-heading: #111827; --ts-emphasis: #000000; --ts-accent: #3a7d0a; --ts-accent-rgb: 61, 130, 0; --ts-accent-lighter: #4a9a12; --ts-accent-darker: #2d6208; --ts-accent-gradient-end: #3d9a4a; --ts-accent-soft: rgba(var(--ts-accent-rgb), 0.14); --ts-accent-text: #3d8200; --ts-accent-text-hover: #2f6600; --ts-accent-text-soft: #356f08; --ts-accent-text-muted: #4a7a18; --ts-accent-icon: rgba(var(--ts-accent-rgb), 0.9); --ts-accent-on: #ffffff; --ts-accent-btn-hover-bg: #2f6600; --ts-accent-price: var(--ts-accent-text); --ts-accent-fill-subtle: rgba(var(--ts-accent-rgb), 0.18); --ts-accent-fill-faint: rgba(var(--ts-accent-rgb), 0.12); --ts-accent-fill-whisper: rgba(var(--ts-accent-rgb), 0.08); --ts-accent-shadow: rgba(var(--ts-accent-rgb), 0.2); --ts-accent-glow: rgba(var(--ts-accent-rgb), 0.06); --ts-accent-focus-ring: rgba(var(--ts-accent-rgb), 0.2); --ts-accent-focus-border: rgba(var(--ts-accent-rgb), 0.5); --ts-accent-border-strong: rgba(var(--ts-accent-rgb), 0.45); --ts-accent-border-medium: rgba(var(--ts-accent-rgb), 0.35); --ts-border-neutral: rgba(0, 0, 0, 0.12); --ts-border-accent: rgba(0, 0, 0, 0.14); --ts-border: var(--ts-border-neutral); --ts-border-disabled: rgba(0, 0, 0, 0.08); --ts-selected-bg: rgba(var(--ts-accent-rgb), 0.12); --ts-selected-border: var(--ts-accent-darker); --ts-selected-text: var(--ts-body); --ts-active-bg: var(--ts-accent); --ts-active-border: var(--ts-accent); --ts-active-text: var(--ts-accent-on); --ts-active-soft-bg: rgba(var(--ts-accent-rgb), 0.1); --ts-active-indicator: var(--ts-accent); --ts-disabled-bg: #f0f1f3; --ts-disabled-border: rgba(0, 0, 0, 0.08); --ts-disabled-text: rgba(0, 0, 0, 0.38); --ts-disabled-muted-text: rgba(0, 0, 0, 0.38); --ts-hover-bg: rgba(var(--ts-accent-rgb), 0.12); --ts-hover-border: var(--ts-accent-border-medium); }