/* Colors — Smart Vyapaar Design System One interactive color: Action Blue. Orange is a RARE growth accent only. Surface rhythm (light ↔ near-black tiles) does the work of dividers. */ :root { /* ---- Brand & accent -------------------------------------------------- */ --color-primary: #0066cc; /* Action Blue — every interactive element */ --color-primary-focus: #0071e3; /* brighter sibling — focus ring only */ --color-primary-on-dark: #2997ff; /* Sky Link Blue — in-copy links on dark */ --color-on-primary: #ffffff; /* Smart Vyapaar growth accent — used SPARINGLY (the rising-arrow moment, a single highlighted word, the "growth" motif). Never as a 2nd CTA color. */ --brand-orange: #f5811f; --brand-orange-ink: #d96a10; /* ---- Surface --------------------------------------------------------- */ --color-canvas: #ffffff; /* dominant canvas */ --color-canvas-parchment: #f5f5f7; /* signature off-white, alternating tile */ --color-surface-pearl: #fafafc; /* ghost-button fill */ --color-surface-tile-1: #272729; /* primary dark tile */ --color-surface-tile-2: #2a2a2c; /* micro-step lighter */ --color-surface-tile-3: #252527; /* micro-step darker / player frames */ --color-surface-black: #000000; /* global nav, video void */ --color-surface-chip-translucent: rgba(210, 210, 215, 0.64); /* chip over photo */ /* ---- Text ------------------------------------------------------------ */ --color-ink: #1d1d1f; /* headlines, body, dark utility fill */ --color-body: #1d1d1f; --color-body-on-dark: #ffffff; --color-body-muted: #cccccc; /* secondary copy on dark */ --color-ink-muted-80: #333333; /* body on pearl button */ --color-ink-muted-48: #7a7a7a; /* disabled text, fine print */ /* ---- Hairlines & borders -------------------------------------------- */ --color-divider-soft: #f0f0f0; /* soft ring on ghost buttons */ --color-hairline: #e0e0e0; /* 1px card / chip border */ --color-border-glass: rgba(0, 0, 0, 0.08); /* ---- Semantic aliases (light) --------------------------------------- */ --surface-page: var(--color-canvas); --surface-alt: var(--color-canvas-parchment); --surface-dark: var(--color-surface-tile-1); --text-primary: var(--color-ink); --text-secondary: var(--color-ink-muted-80); --text-tertiary: var(--color-ink-muted-48); --text-on-dark: var(--color-body-on-dark); --link: var(--color-primary); --border: var(--color-hairline); --focus-ring: var(--color-primary-focus); } /* ---- Dark mode ------------------------------------------------------- */ /* Light-first system; opt into dark with [data-theme="dark"] on . Flips only the semantic aliases — the base palette is unchanged. */ [data-theme="dark"] { --surface-page: var(--color-surface-tile-1); --surface-alt: var(--color-surface-tile-3); --surface-dark: var(--color-surface-black); --text-primary: var(--color-body-on-dark); --text-secondary: var(--color-body-muted); --text-tertiary: #8a8a8e; --link: var(--color-primary-on-dark); --border: rgba(255, 255, 255, 0.12); }