:root { /* ── Base neutrals ─────────────────────────────────────────── */ --white: #ffffff; --off-white: #f5f5f3; --paper: #fafaf8; --graphite-100: #ebebe8; --graphite-200: #d8d8d4; --graphite-300: #b4b4b0; --graphite-400: #8a8a86; --graphite-500: #6a6a68; --graphite-600: #4a4a48; --graphite-700: #2e2e2d; --graphite-800: #1c1c1b; --graphite-900: #121211; --black: #000000; /* ── Product accents (one per product, used sparingly) ─────── */ --accent-converter: #2e6bff; --accent-pdf: #e8402f; --accent-writer: #7b5cff; --accent-sheets: #17b26a; --accent-slides: #ff7a1a; /* On-light readable variants (AA on white) */ --accent-converter-ink: #1e4fd0; --accent-pdf-ink: #c22a1c; --accent-writer-ink: #5a3ce0; --accent-sheets-ink: #0f8b51; --accent-slides-ink: #c25400; /* Tints for dark surfaces: rgb triplets for rgba() composition */ --accent-converter-rgb: 46 107 255; /* @kind color */ --accent-pdf-rgb: 232 64 47; /* @kind color */ --accent-writer-rgb: 123 92 255; /* @kind color */ --accent-sheets-rgb: 23 178 106; /* @kind color */ --accent-slides-rgb: 255 122 26; /* @kind color */ /* ── Status (availability), transparency-first ─────────────── */ --status-available: #17b26a; --status-development: #ff7a1a; --status-soon: #8a8a86; /* ── Semantic aliases — LIGHT (corporate site) ─────────────── */ --surface-page: var(--off-white); --surface-raised: var(--white); --surface-sunken: var(--graphite-100); --surface-inverse: var(--graphite-900); --text-primary: var(--graphite-900); --text-secondary: var(--graphite-500); --text-muted: var(--graphite-400); --text-inverse: var(--white); --line-hairline: rgba(18, 18, 17, 0.09); --line-strong: rgba(18, 18, 17, 0.18); --overlay-scrim: rgba(18, 18, 17, 0.55); /* ── Accent binding. Product surfaces re-bind --accent. ────── */ --accent: var(--graphite-900); --accent-rgb: 18 18 17; /* @kind color */ --accent-contrast: var(--white); } /* Dark surface scope — product pages, app chrome, inverted sections. Apply .acom-dark to any container (or ) to flip the semantics. */ .acom-dark { --surface-page: var(--graphite-900); --surface-raised: var(--graphite-800); --surface-sunken: var(--black); --surface-inverse: var(--off-white); --text-primary: #f2f2f0; --text-secondary: #a5a5a1; --text-muted: #6f6f6c; --text-inverse: var(--graphite-900); --line-hairline: rgba(255, 255, 255, 0.1); --line-strong: rgba(255, 255, 255, 0.22); --overlay-scrim: rgba(0, 0, 0, 0.66); --accent: var(--white); --accent-rgb: 255 255 255; /* @kind color */ --accent-contrast: var(--graphite-900); } /* Product accent scopes — compose with .acom-dark */ .acom-converter { --accent: var(--accent-converter); --accent-rgb: var(--accent-converter-rgb); /* @kind color */ --accent-contrast: #ffffff; } .acom-pdf { --accent: var(--accent-pdf); --accent-rgb: var(--accent-pdf-rgb); /* @kind color */ --accent-contrast: #ffffff; } .acom-writer { --accent: var(--accent-writer); --accent-rgb: var(--accent-writer-rgb); /* @kind color */ --accent-contrast: #ffffff; } .acom-sheets { --accent: var(--accent-sheets); --accent-rgb: var(--accent-sheets-rgb); /* @kind color */ --accent-contrast: #ffffff; } .acom-slides { --accent: var(--accent-slides); --accent-rgb: var(--accent-slides-rgb); /* @kind color */ --accent-contrast: #121211; }