/* ============================================================ JewelsUp — Color tokens Brand: gold (from logo #C8A451) + ink black + warm neutrals. Palette reads as premium/luxury but stays legible for a data-dense B2B platform. ============================================================ */ :root { /* ---- Brand: Gold ---- */ --gold-50: #FBF7ED; --gold-100: #F5EBCF; --gold-200: #EBD9A6; --gold-300: #DDC17B; --gold-400: #CFAE5E; --gold-500: #C8A451; /* core brand gold — from logo */ --gold-600: #B08D3E; /* hover / pressed */ --gold-700: #8C6E2E; --gold-800: #6B5322; --gold-900: #4A3917; /* ---- Ink / near-black (from logo bg #030505) ---- */ --ink-950: #0B0B0D; /* deepest surface */ --ink-900: #121216; --ink-800: #1A1A20; --ink-700: #26262E; --ink-600: #35353F; /* ---- Warm neutrals ---- */ --neutral-0: #FFFFFF; --neutral-50: #FAF9F7; --neutral-100: #F4F2EE; --neutral-200: #E8E5DF; --neutral-300: #D6D1C7; --neutral-400: #B4ADA0; --neutral-500: #8C8578; --neutral-600: #655F55; --neutral-700: #4A453D; --neutral-800: #2E2B26; --neutral-900: #1B1915; /* ---- Semantic (muted to fit luxury palette) ---- */ --green-50: #ECF6EF; --green-500: #2E8B57; --green-600: #24714599; --green-700: #1F6540; --red-50: #FBEDEC; --red-500: #C0473E; --red-600: #A23A32; --red-700: #85302A; --amber-50: #FBF2E2; --amber-500: #C98A2B; --amber-600: #A97223; --blue-50: #EAF1F6; --blue-500: #3B6E93; --blue-600: #2F5A7A; /* ============================================================ Semantic aliases — LIGHT theme (default) ============================================================ */ /* Text */ --text-strong: var(--ink-900); --text-body: var(--neutral-800); --text-muted: var(--neutral-600); --text-subtle: var(--neutral-500); --text-inverse: var(--neutral-0); --text-brand: var(--gold-700); --text-on-brand: var(--ink-950); /* Surfaces */ --surface-page: var(--neutral-50); --surface-card: var(--neutral-0); --surface-sunken: var(--neutral-100); --surface-raised: var(--neutral-0); --surface-inverse: var(--ink-950); --surface-brand: var(--gold-500); --surface-brand-subtle: var(--gold-50); /* Borders */ --border-subtle: var(--neutral-200); --border-default: var(--neutral-300); --border-strong: var(--neutral-400); --border-brand: var(--gold-500); /* Interaction */ --brand: var(--gold-500); --brand-hover: var(--gold-600); --brand-active: var(--gold-700); --focus-ring: rgba(200, 164, 81, 0.45); /* Semantic text/surfaces */ --success: var(--green-600); --success-surface:var(--green-50); --danger: var(--red-600); --danger-surface: var(--red-50); --warning: var(--amber-600); --warning-surface:var(--amber-50); --info: var(--blue-600); --info-surface: var(--blue-50); /* Overlay */ --overlay-scrim: rgba(11, 11, 13, 0.55); } /* ============================================================ Dark theme — apply .theme-dark on a container or Mirrors the logo's native black+gold presentation. ============================================================ */ .theme-dark { --text-strong: var(--neutral-0); --text-body: var(--neutral-200); --text-muted: var(--neutral-400); --text-subtle: var(--neutral-500); --text-inverse: var(--ink-950); --text-brand: var(--gold-400); --text-on-brand: var(--ink-950); --surface-page: var(--ink-950); --surface-card: var(--ink-900); --surface-sunken: var(--ink-800); --surface-raised: var(--ink-800); --surface-inverse: var(--neutral-0); --surface-brand: var(--gold-500); --surface-brand-subtle: rgba(200, 164, 81, 0.12); --border-subtle: var(--ink-700); --border-default: var(--ink-600); --border-strong: var(--neutral-700); --border-brand: var(--gold-500); --focus-ring: rgba(207, 174, 94, 0.5); --overlay-scrim: rgba(0, 0, 0, 0.66); }