/* Design tokens. Every colour in the app comes from here, so light and dark are one switch: , resolved in layouts/app.blade.php from the user's appearance (system | light | dark). Name tokens by role, never by colour. */ :root { color-scheme: light; --bg: #ffffff; /* page */ --bg-soft: #f9f9f9; /* sidebar, page backdrop */ --surface: #ffffff; /* cards, lists, dialogs, menus */ --surface-2: #f5f5f5; /* inputs, hover, subtle fills */ --surface-3: #ececec; /* pressed, selected */ --selection-bg: var(--surface-3); /* selected list item; distinct from hover */ --border: #eeeeee; --border-strong: #dddddd; --text: #111111; --text-2: #555555; /* secondary */ --text-3: #999999; /* muted, placeholders, timestamps */ --accent: #111111; /* primary buttons, active states */ --accent-hover: #333333; --accent-text: #ffffff; /* text on accent */ --link: #2563eb; --brand: #567148; /* Sensever green: accents, icons, labels */ --brand-soft: #eef2eb; /* pale green fills */ --brand-strong: #263c2c; /* dark green text/fills */ --focus: #007aff66; --danger: #e53e3e; --danger-soft: #fdecec; --success: #2f9e5c; --success-soft: #e8f5ec; --warning: #c77d00; --warning-soft: #fff5e0; --info: #2563eb; --violet: #7862ab; /* “in progress” status */ --violet-soft: #f3effa; --info-soft: #eef4ff; --presence-online: #35b66a; --presence-offline: #b5bcb8; --overlay: rgb(0 0 0 / 35%); --shadow-color: rgb(16 24 20 / 10%); --shadow: 0 8px 24px var(--shadow-color); --skeleton: #eeeeee; --skeleton-shine: #f6f6f6; --chat-bg: #fcfdfb; --bubble-in: #ffffff; --bubble-in-border: #e9ece6; --bubble-out: #edf2e8; --bubble-out-border: #e6ecdf; --bubble-meta: #8c958e; --quote-bg: #229ed912; --quote-accent: #229ed9; --glass-background: linear-gradient(135deg, rgb(255 255 255 / 40%), rgb(255 255 255 / 10%)); --glass-fallback-background: rgb(246 247 248 / 94%); } :root[data-scheme="dark"] { color-scheme: dark; --bg: #0f1317; --bg-soft: #13181d; --surface: #171c22; --surface-2: #1f262e; --surface-3: #29313b; --border: #252d36; --border-strong: #35404b; --text: #e8edf2; --text-2: #b4bfca; --text-3: #7f8b97; --accent: #e8edf2; --accent-hover: #ffffff; --accent-text: #0f1317; --link: #6cb4ff; --brand: #93c49c; --brand-soft: #1b2a21; --brand-strong: #d3ead8; --focus: #6cb4ff80; --danger: #ff6b6b; --danger-soft: #3b2023; --success: #43cf80; --success-soft: #16301f; --warning: #f0b440; --warning-soft: #372c14; --info: #6cb4ff; --violet: #b9a3f0; --violet-soft: #2a2340; --info-soft: #172539; --presence-online: #43cf80; --presence-offline: #5f6b76; --overlay: rgb(0 0 0 / 60%); --shadow-color: rgb(0 0 0 / 45%); --skeleton: #222a33; --skeleton-shine: #2b343e; --chat-bg: #10161b; --bubble-in: #1e2630; --bubble-in-border: #1e2630; --bubble-out: #2b5278; --bubble-out-border: #2b5278; --bubble-meta: #93a7ba; --quote-bg: rgb(255 255 255 / 7%); --quote-accent: #6cb4ff; --glass-background: linear-gradient(135deg, rgb(30 38 46 / 72%), rgb(20 26 32 / 55%)); --glass-fallback-background: rgb(23 28 34 / 94%); } /* Legacy variable names still used by older stylesheets. */ :root { --gray-bg: var(--bg-soft); --gray-bg-hover: var(--surface-2); --gray-bg-active: var(--surface-3); --gray-border: var(--border); --line: var(--border); --muted: var(--text-3); --soft: var(--surface-2); }