/* ASAS - design tokens * * The single source of truth for colour, type, space, geometry and motion. * Nothing below this file may hardcode a colour or a size. * * IDENTITY: the Monolith (visual identity, final, September 2026 - see * docs/ux/BRAND.md). "A dark room and one light source. Everything cool is * surface; everything warm is the AI. Only one thing is allowed to glow." * - Dark field is home: `:root` IS the dark theme, so the first paint is on * brand before any script runs. `[data-theme="light"]` is the Bone field, * offered as a preference; it never glows. * - Gold is the single accent and the primary action. The GLOW (a blur, not a * colour) is reserved for the filament, the primary button's hover and the * one item that needs a person - see --glow-*. * - Surfaces are square-cut with a hairline bevel on the top edge; actions * (buttons, chips, segments) are pills. * * Every colour carries its MEASURED WCAG 2.x contrast ratio against the * background(s) it is allowed to sit on. The numbers are produced by * `node src/public/assets/tokens.contrast.mjs` - regenerate and re-verify * after changing any value here. Do not hand-edit a ratio comment. */ /* ------------------------------------------------------------------ FONTS * Self-hosted, SIL OFL 1.1 (licences beside the files in /assets/fonts). The * content security policy is default-src 'self', so a third-party font host * would be refused. Latin and Arabic are split by unicode-range: an English * page never downloads the Arabic faces and vice versa. */ @font-face { font-family: "Alexandria"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/alexandria-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Alexandria"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/alexandria-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Alexandria"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/alexandria-arabic-600-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: "Alexandria"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/alexandria-arabic-700-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/instrument-sans-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/instrument-sans-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/instrument-sans-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } :root, [data-theme="dark"] { /* ------------------------------------------------------ BRAND PRIMITIVES * The Monolith palette, verbatim from the identity. Views never use these * directly - they use the semantic tokens below. */ --asas-void: #07080D; /* the field */ --asas-deep: #0E1017; /* panels */ --asas-steel: #1C2130; /* surfaces, the body */ --asas-steel-2: #2E3548; /* borders, bevel */ --asas-fog: #8A93AE; /* secondary text */ --asas-bone: #F3F1EC; /* primary text, light field */ --asas-filament: #FFFFFF; --asas-gold: #F5C542; /* inner glow, accent, primary action */ --asas-amber: #C25A00; /* outer glow - never text */ --asas-ember: #7A2E00; /* vignettes, <= 30% */ /* The only gradient in the system: around the filament, in hero vignettes * and on the primary button's hover. Never a background fill, never text. */ --asas-glow-ramp: linear-gradient(90deg, #FFFFFF, #F5C542 35%, #C25A00 70%, #7A2E00); --asas-monolith-surface: linear-gradient(180deg, #3D4557 0%, #181C27 45%, #0A0C12 100%); --asas-hero-vignette: radial-gradient(60% 50% at 50% 50%, rgba(194, 90, 0, .18), transparent 70%); /* Glow - one thing at a time. */ --glow-primary: 0 0 24px rgba(245, 197, 66, .35); --glow-attention: 0 0 0 1px rgba(245, 197, 66, .55), 0 0 14px rgba(245, 197, 66, .22); --glow-filament: 0 0 6px rgba(245, 197, 66, .85), 0 0 14px rgba(194, 90, 0, .6); /* ---------------------------------------------------------------- CANVAS */ --bg-canvas: #07080D; /* application background (void) */ --bg-surface: #0E1017; /* cards, tables, panels (deep) */ --bg-subtle: #121520; /* table headers, section bands */ --bg-sunken: #0A0B11; /* wells, thread list, code */ --bg-hover: #171B26; /* row / control hover */ --bg-selected: #1C2130; /* selected row (steel) */ --bg-inverse: #0A0B11; /* sidebar */ --bg-nav-active: #161A24; /* active nav item */ --bg-tooltip: #1C2130; --bg-overlay: rgba(3, 4, 8, .72); /* ------------------------------------------------------------------ TEXT */ /* Ratios measured on: canvas / surface / subtle / sunken / hover / selected */ --text-primary: #F3F1EC; /* 17.73 16.83 16.12 17.41 15.23 14.21 - AA (bone) */ --text-secondary: #B8BDCB; /* 10.65 10.12 9.69 10.46 9.15 8.54 - AA */ --text-tertiary: #8A93AE; /* 6.54 6.21 5.95 6.42 5.62 5.24 - AA (fog) */ /* Disabled text is EXEMPT from 1.4.3 (inactive components). Held to >=3:1 * on canvas and surface anyway. Never the sole signal that an action is * unavailable - always pair it with the reason in adjacent text. */ --text-disabled: #5C6378; /* 3.35 3.18 */ --text-inverse: #F3F1EC; /* 17.41 on inverse, 15.41 on nav-active - AA */ --text-inverse-muted: #B8BDCB; /* 10.46 on inverse, 9.26 on nav-active - AA */ --text-inverse-subtle: #8A93AE; /* 6.42 on inverse - AA, nav group labels */ /* --------------------------------------------------------------- BORDERS */ /* BINDING RULE: a border that is the SOLE affordance of a control must be * --border-input (>=3:1, WCAG 1.4.11). Decorative separators may sit below * 3:1 because they never carry meaning on their own. */ --border-subtle: #1A1E2A; /* DECORATIVE row hairline */ --border-default: #232838; /* DECORATIVE container edge */ --border-strong: #2E3548; /* DECORATIVE section separator (steel 2) */ --border-bevel: #3A4256; /* DECORATIVE lit top edge of a surface */ --border-input: #626B87; /* 3.78 3.59 3.44 3.72 - AA non-text */ /* ------------------------------------------------ ACCENT (gold) --------- */ /* Gold is the one accent: primary action, focus, the active-place filament, * links. As a colour it is ordinary; the GLOW is the rare thing. */ --accent-1: #1A1812; /* warm tint background (selected filter) */ --accent-2: #4A3F1C; /* tint border */ --accent-3: #F5C542; /* 12.11 on inverse, 10.72 on nav-active - AA */ --accent-4: #C9A43E; /* charts, non-text emphasis */ --accent-6: #F5C542; /* 12.34 11.72 11.22 12.11 10.60 9.89 - AA */ --accent-7: #FFD970; /* hover / active */ /* --------------------------------------------------------------- ACTIONS */ --action-bg: #F5C542; --action-bg-hover: #F8D062; --action-bg-active: #E2B32F; --action-fg: #07080D; /* 12.34 on action-bg - AA */ /* ------------------------------------------------------------- SEMANTICS */ /* The identity's functional colours - confirmed #3DA86F, attention #F5C542, * failed #E0523A, info #6E8BFF - desaturated for dark panels. They NEVER glow. */ --success-1: #0F1F17; --success-2: #1E3B2B; --success-6: #5DB585; /* 8.02 7.61 7.29 7.87 6.89 6.42 - AA */ --success-7: #86CBA5; --warning-1: #1D1910; --warning-2: #463A18; --warning-6: #E3BE5C; /* 11.23 10.66 10.21 11.03 9.65 9.00 - AA (attention) */ --warning-7: #F0D488; /* Dots and bars. */ --warning-fill: #E3BE5C; --danger-1: #231210; --danger-2: #4A2019; --danger-6: #E0705D; /* 6.33 6.01 5.76 6.22 5.44 5.07 - AA */ --danger-7: #EE9A8B; --danger-fg: #07080D; /* 6.33 on danger-6 - AA (white would be 3.0) */ --info-1: #121831; --info-2: #25305E; --info-6: #8A9EEB; /* 7.79 7.39 7.08 7.64 6.69 6.24 - AA */ --neutral-fill: #626B87; /* 3.78 3.59 3.72 - idle status dot, AA non-text */ /* ------------------------------------------- CONVERSATION AUTHORSHIP */ /* Everything warm is the AI: an AI message carries an amber filament rule on * its inline-start edge. Surface alone never carries the distinction - each * is paired with a chip and an alignment. See components.css. */ --msg-customer-bg: var(--bg-surface); --msg-ai-bg: #11141C; --msg-ai-rule: #C25A00; /* DECORATIVE amber filament; the chip carries it */ --msg-human-bg: #161B28; /* Elevation. Cards carry NO shadow - they are defined by their border and * bevel. Shadows exist only to signal a layer above the page. */ --shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --shadow-2: 0 16px 40px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .4); /* ------------------------------------------------------------ TYPOGRAPHY */ /* Display + wordmark: Alexandria (600 Latin, 700 Arabic), sentence case, * never all-caps. Body/UI: Instrument Sans with tabular numerals. Arabic * body: IBM Plex Sans Arabic, ~7% larger than the Latin it is paired with. */ --font-display: "Alexandria", "Instrument Sans", system-ui, "Segoe UI", sans-serif; --font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-arabic: "IBM Plex Sans Arabic", "Instrument Sans", "Segoe UI", Tahoma, "Geeza Pro", "Noto Sans Arabic", system-ui, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace; /* Role: size / line-height / weight / tracking. * HARD RULE: nothing above 32px anywhere in the application. Landing-page * type scale is banned inside the product. */ --t-display-size: 28px; --t-display-lh: 34px; --t-display-w: 600; --t-display-ls: -.025em; --t-page-size: 22px; --t-page-lh: 28px; --t-page-w: 600; --t-page-ls: -.02em; --t-section-size: 15px; --t-section-lh: 20px; --t-section-w: 600; --t-section-ls: -.01em; --t-sub-size: 13px; --t-sub-lh: 18px; --t-sub-w: 600; --t-body-size: 14px; --t-body-lh: 20px; --t-body-w: 400; --t-strong-w: 600; --t-secondary-size: 13px; --t-secondary-lh: 18px; --t-label-size: 12px; --t-label-lh: 16px; --t-label-w: 500; --t-meta-size: 11px; --t-meta-lh: 14px; --t-meta-w: 500; --t-meta-ls: .02em; --t-overline-size: 11px; --t-overline-lh: 14px; --t-overline-w: 600; --t-overline-ls: .08em; --t-cell-size: 13px; --t-cell-lh: 18px; --t-metric-size: 26px; --t-metric-lh: 30px; --t-metric-w: 600; --t-metric-ls: -.025em; --t-metric-lg-size: 32px; --t-metric-lg-lh: 36px; --t-code-size: 12px; --t-code-lh: 16px; /* --------------------------------------------------------------- SPACING */ --s-1: 2px; --s-2: 4px; --s-3: 6px; --s-4: 8px; --s-5: 12px; --s-6: 16px; --s-7: 20px; --s-8: 24px; --s-9: 32px; --s-10:40px; --s-11:48px; --s-12:64px; --gutter: 24px; /* narrowed at breakpoints in base.css */ /* -------------------------------------------------------------- GEOMETRY */ /* Surfaces are square-cut (the identity's card radius is 0); actions are * pills. Fields keep a hair of rounding so a 1px border does not alias. */ --r-xs: 2px; /* checkbox, code */ --r-sm: 2px; /* inputs, selects */ --r-md: 0; /* cards, tables, menus, popovers */ --r-lg: 0; /* dialogs, drawers */ --r-sheet: 16px; /* phone bottom-sheet top corners */ --r-full: 999px; /* buttons, chips, badges, avatars */ --bw: 1px; /* Two-part ring: an inner band in the local background then gold, so the * indicator survives tinted, hovered and selected rows alike. */ --focus-ring: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--accent-6); --focus-ring-inverse: 0 0 0 2px var(--bg-inverse), 0 0 0 4px var(--accent-3); /* Control and row heights - density is the point */ --h-xs: 24px; --h-sm: 28px; --h-md: 32px; --h-lg: 40px; --row-compact: 32px; --row-default: 40px; --row-comfortable: 48px; /* Layout */ --nav-w: 248px; --nav-rail-w: 60px; --header-h: 52px; --pageheader-h: 56px; --thread-list-w: 340px; --context-w: 320px; --drawer-w: 480px; --content-max: 1280px; /* forms and records; tables and inbox are full-bleed */ /* ---------------------------------------------------------------- MOTION */ /* "The body is still. The light moves." One signature - the filament - and * otherwise the calm of good software: ease-out, no bounce, no parallax. * All motion stops under prefers-reduced-motion (base.css). */ --dur-fast: 120ms; /* colour / opacity state change */ --dur-base: 240ms; /* layer enter and exit (identity: 240ms) */ --dur-slow: 320ms; /* drawer, sheet */ --dur-ignite: 900ms; /* the Monolith, once per session */ --dur-breath: 4.8s; /* idle filament */ --ease-out: cubic-bezier(.2, .7, .2, 1); --ease-in: cubic-bezier(.4, 0, 1, 1); /* ------------------------------------------------------------------ Z */ --z-nav: 10; --z-sticky: 20; --z-drawer: 30; --z-dialog: 40; --z-toast: 50; --z-tooltip: 60; } /* Bone field. Offered as a preference; the identity keeps the light field for * documents, so it NEVER glows: glow tokens resolve to nothing or a hairline * and gold becomes a fill only. The sidebar stays dark so the product keeps its * anchor. The semantic names are identical, so every view switches as a unit * and no component carries theme-specific branches. */ [data-theme="light"] { --bg-canvas:#F3F1EC; --bg-surface:#FBFAF7; --bg-subtle:#F6F4EF; --bg-sunken:#ECE9E2; --bg-hover:#EEEBE3; --bg-selected:#E6E2D8; --bg-inverse:#0E1017; --bg-nav-active:#1C2130; --bg-tooltip:#1C2130; --bg-overlay:rgba(14,16,23,.48); --text-primary:#14161D; /* 16.01 17.31 16.44 14.90 15.17 13.97 - AA */ --text-secondary:#474D5E; /* 7.47 8.08 7.67 6.95 7.08 6.52 - AA */ --text-tertiary:#5B6173; /* 5.47 5.91 5.62 5.09 5.18 4.77 - AA */ --text-disabled:#8A8F9C; --text-inverse:#F3F1EC; --text-inverse-muted:#B8BDCB; --text-inverse-subtle:#8A93AE; --border-subtle:#E6E2D9; --border-default:#D8D3C8; --border-strong:#C3BDB0; --border-bevel:#FFFFFF; --border-input:#7E8494; /* 3.31 3.58 3.40 3.08 - AA non-text */ --accent-1:#F6EED7; --accent-2:#E4CF8E; --accent-3:#F5C542; /* on the dark sidebar */ --accent-4:#B08A1E; --accent-6:#7A3A00; /* 7.65 8.27 7.85 7.12 7.25 6.67 - AA (ember link) */ --accent-7:#5E2C00; --action-bg:#14161D; --action-bg-hover:#262A35; --action-bg-active:#07080D; --action-fg:#F3F1EC; --success-1:#E4F2EA; --success-2:#B7DCC6; --success-6:#146239; --success-7:#0F4D2D; --warning-1:#F8EFD6; --warning-2:#E8D49A; --warning-6:#7D5A00; --warning-7:#624600; --warning-fill:#9A7815; --danger-1:#F9E6E2; --danger-2:#EDC0B7; --danger-6:#B3261E; --danger-7:#8F1D17; --danger-fg:#FFFFFF; --info-1:#E6EAFA; --info-2:#BFC9F0; --info-6:#3450C8; --neutral-fill:#7E8494; --msg-ai-bg:#F4EFE3; --msg-ai-rule:#C25A00; --msg-human-bg:#ECEAF2; --glow-primary:none; --glow-attention:0 0 0 1px #9A7815; --glow-filament:none; --focus-ring:0 0 0 2px var(--bg-surface), 0 0 0 4px #7A3A00; --shadow-1:0 1px 2px rgba(14,16,23,.08); --shadow-2:0 12px 32px rgba(14,16,23,.16),0 2px 6px rgba(14,16,23,.08); } /* White-label seam. Deliberately scoped to the PUBLIC customer-facing pages * only, and unused in Release 1: `businesses` has no branding columns * (name, timezone, languages, hours, services, staff, faq), so there is no * data to drive it. Defined here so a later `business_branding` migration can * light it up without touching the operator application. Do not build tenant * theming into the operator UI. */ [data-brand] { --brand-accent: var(--accent-6); --brand-logo: none; }