/** * theme-tokens.css — Awesome Support theme layer, file 1 of 6 (iteration II) * ========================================================================= * * OWNS (api-contract-II §4.1.1 row 1): * - the `:root` design-token block (architect decision D-1), * - the Inter web-font load, once for the whole application, with a * non-blocking `font-display`, * - the reset and the `body` defaults from `docs/input/design/global.css`. * * MUST NOT CONTAIN: any component rule. Component rules live in * theme-bootstrap.css / theme-shards.css / theme-vendor.css / * theme-components.css. * * THIS IS THE ONLY FILE IN THE THEME LAYER PERMITTED TO CONTAIN A COLOUR * LITERAL (api-contract-II §4.1.3 rule 1). Everywhere else the value is * consumed as `var(--token)`. The single exception elsewhere is an * alpha-blended derivative copied verbatim from * `docs/input/design/component-reference.css`, which always carries a * `verbatim from component-reference.css §N` comment on its line. * * Load order (binding, api-contract-II §4.1.2): this file is the FIRST theme * file and comes after every vendor stylesheet (Bootstrap, Shards, select2, * daterangepicker, sweetalert2), so the theme layer wins by cascade ORDER and * never by specificity inflation or `!important` escalation. * * Source of every value below: `docs/input/design/tokens.css` (the value * authority) — copied VERBATIM. Nothing here was chosen, tuned or rounded. */ /* ────────────────────────────────────────────────────────────────────────── * Inter web font — loaded exactly ONCE for the whole application * (design-spec-II §1.3). Every `@font-face` still carries `font-display: swap`, * so the font never blocks first paint (requirements-II §7.4). * * The client shell's former Google-Fonts `Source+Sans+Pro` link is removed in * the same change (api-contract-II §4.1.2) — Inter replaces it. * * Iteration III (#150): this used to import * `https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap`. * It now imports the same font from this application's own origin — see * `inter.css`, which mirrors Google's exact woff2 subsets so glyph outlines and * metrics are unchanged. The `@import` INDIRECTION is kept (rather than * inlining the faces here) so `theme-install.css` can share the one definition, * and so the request shape stays what it was: one stylesheet, then the font. * * `@import` must precede every rule in the file; that is why it is first. * ────────────────────────────────────────────────────────────────────────── */ @import url('inter.css'); /* ────────────────────────────────────────────────────────────────────────── * DESIGN TOKENS — copied verbatim from docs/input/design/tokens.css * * Decision D-1 (api-contract-II §8, design-spec-II §1.2): this file carries * the FIVE CORE GROUPS verbatim — Colours (primary / surfaces / borders / * text / semantic, plus the `--color-info` family), Typography, Spacing, * Border Radius, Shadows. * * DELIBERATELY EXCLUDED — pt_center DOMAIN tokens naming concepts Awesome * Support does not have, which would be dead weight and actively misleading: * --metric-maxweight / -est1rm / -volume / -reps / -freq * --plan-color-ember / -cobalt / -jade / -violet / -gold / -rose / -teal / -slate * --bm-accent-* , --bm-band-* , --bm-delta-* (Body Measurements) * --badge-alias-* , --badge-syn-* , --badge-desc-* , --badge-fuzzy-* * --hint-bg / -border / -ink / -term-ink * --color-timer-running / --color-timer-elapsed * --color-presence-loading * --color-primary-ink, --color-error-ink, --color-error-border, * --color-error-border-strong, --color-warning-ink, --color-warning-border, * --color-info-pill-bg, --color-info-pill-ink, --shadow-thumb * (nutrition-calculator affordances) * * If a later stage genuinely needs one of the excluded tokens it is COPIED * VERBATIM from `docs/input/design/tokens.css` — never re-derived, never * re-tuned. * * Note on the `--color-info` family: it is NOT excluded. `component-reference.css` * §7 consumes --color-info / -bg / -border for `.ds-alert-info`, and design-spec-II * §1.1 carries --color-info-ink with it (ruling D-A3: the info alert TITLE uses * --color-info-ink at 11.29:1, because --color-info on the info fill measures * 3.79:1 and fails AA). * ────────────────────────────────────────────────────────────────────────── */ :root { /* ── 1. Colours ───────────────────────────────────────────────────────── * tokens.css §1 (design-spec-II §1.1). Computed values that the theme * conformance assertions pin: --color-surface = rgb(13, 15, 20) (TC-2), * --color-primary = rgb(255, 107, 53) (TC-4), --color-surface-raised = * rgb(34, 38, 58) and --color-border = rgb(45, 49, 71) (TC-5). * ─────────────────────────────────────────────────────────────────────── */ /* Primary */ --color-primary: #FF6B35; /* vibrant orange — CTAs, active states */ --color-primary-hover: #E85A20; --color-primary-dark: #C44A18; /* pressed state */ --color-on-primary: #FFFFFF; /* text/icon colour on primary backgrounds */ --color-primary-soft: rgba(255, 107, 53, 0.16); /* soft ember tint — soft badges */ /* Surfaces */ --color-surface: #0D0F14; /* page background */ --color-surface-alt: #1A1D26; /* card / panel background */ --color-surface-raised: #22263A; /* elevated elements, hover states */ --color-surface-inset: #0F1219; /* recessed wells */ /* Borders */ --color-border: #2D3147; /* Text */ --color-text: #FFFFFF; --color-text-muted: #8892A4; /* Semantic */ --color-error: #FF4757; --color-error-bg: #2A1018; --color-success: #2ED573; --color-success-bg: #0D2A1A; --color-warning: #FFA502; --color-warning-bg: rgba(255, 165, 2, 0.10); /* Info family — consumed by .ds-alert-info (component-reference.css §7). * --color-info-ink is the AA-safe alert title ink (design-spec-II ruling D-A3). */ --color-info: #2979FF; /* cobalt info base */ --color-info-bg: rgba(41, 121, 255, 0.1); /* info note background wash */ --color-info-border: rgba(41, 121, 255, 0.35); /* info note 1px border */ --color-info-ink: #cfe0fb; /* softened info text on info notes */ /* ── 2. Typography ────────────────────────────────────────────────────── * tokens.css §2 (design-spec-II §1.3). TC-1 asserts that the computed * body `font-family` CONTAINS the substring `Inter`. * ─────────────────────────────────────────────────────────────────────── */ --font-family: 'Inter', sans-serif; --text-xs: 11px; /* line-height: 1.4 — badges, meta labels */ --text-sm: 13px; /* line-height: 1.5 — helper text, captions */ --text-base: 16px; /* line-height: 1.5 — body text */ --text-lg: 18px; /* line-height: 1.4 — subheadings */ --text-xl: 22px; /* line-height: 1.3 */ --text-2xl: 28px; /* line-height: 1.2 */ --text-3xl: 36px; /* line-height: 1.1 — page titles */ --font-weight-normal: 400; --font-weight-medium: 600; --font-weight-bold: 700; /* ── 3. Spacing — 4px base unit ───────────────────────────────────────── * tokens.css §3 (design-spec-II §1.4). * ─────────────────────────────────────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; /* ── 4. Border Radius ─────────────────────────────────────────────────── * tokens.css §4 (design-spec-II §1.5). TC-4 asserts --radius-md = 8px on * every .btn-primary. * ─────────────────────────────────────────────────────────────────────── */ --radius-sm: 4px; /* inputs, badges, tags */ --radius-md: 8px; /* buttons, cards, dropdowns, tooltips */ --radius-lg: 16px; /* modals, table wrapper */ --radius-xl: 24px; /* auth card */ --radius-full: 9999px; /* pills, avatars, toggles */ /* ── 5. Shadows ───────────────────────────────────────────────────────── * tokens.css §5 (design-spec-II §1.6). Shadows never separate two dark * surfaces — that is the 1px border's job. * ─────────────────────────────────────────────────────────────────────── */ --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4); --shadow-modal: 0 8px 48px rgba(0, 0, 0, 0.6); /* ── 6. Z-index scale ─────────────────────────────────────────────────── * design-spec-II §1.17. Not a pt_center token group — the values are the * ones component-reference.css §8/§12 and prototype.css already use, * lifted into named tokens so the theme layer never invents a new * stacking level. Shards' own `.main-sidebar` sits at 1070, which is why * the staff drawer/backdrop are re-pinned onto this scale in * theme-shards.css. * ─────────────────────────────────────────────────────────────────────── */ --z-backdrop: 200; /* drawer backdrop */ --z-drawer: 300; /* off-canvas drawer */ --z-modal: 1000; /* modal backdrop + modal */ /* STAFF SHELL ONLY. pt_center has no vendor chrome above its own scale; the * staff panel has two: Bootstrap's `.sticky-top` at 1020 (the staff top * navbar) and Shards' `.main-sidebar` at 1070. The staff drawer therefore * keeps Shards' 1070 — inheriting the vendor's level rather than inventing * one — and its backdrop has to land BETWEEN the two, so it dims the sticky * navbar while staying under the drawer. Added to the scale here, per * design-spec-II §1.17 ("a new stacking need is added to this scale * first"), instead of appearing as a magic number in theme-shards.css. */ --z-staff-backdrop: 1060; /* ── 7. Asset tokens ──────────────────────────────────────────────────── * Not pt_center tokens. These are inline SVG data URIs that REPLACE a * vendor glyph drawn in a light-theme colour, and a data URI is a colour * literal — so its only permitted home is this file (§4.1.3 rule 1: no * colour literal outside theme-tokens.css). Each one restates an existing * token value; none introduces a new colour. * ─────────────────────────────────────────────────────────────────────── */ /* Chevron for `.custom-select` / `select.form-control`, replacing * Bootstrap's #343a40 chevron which is invisible on the dark control. * Fill = --color-text-muted (#8892A4). */ --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%238892A4' d='M1.41 0 6 4.59 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E"); } /* ────────────────────────────────────────────────────────────────────────── * RESET — global.css "Box-sizing reset" * * Copied verbatim. Note that the universal selector has ZERO specificity, so * Bootstrap's Reboot element rules (`p`, `h1`–`h6`, `label`, `ol`, `ul`, `dl` * margins) still win — this reset removes only the margins/paddings that come * from the browser's UA stylesheet, which is exactly the pt_center baseline. * ────────────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ────────────────────────────────────────────────────────────────────────── * BODY DEFAULTS — global.css "Body defaults" * * Copied verbatim. This block is what TC-1 (font-family contains `Inter`) and * TC-2 (background-color === rgb(13, 15, 20)) assert against, on every route. * It also folds the legacy `body` rule of the deleted * `app/assets/helpdeskz/css/helpdesk.css` (Source Sans Pro / #4d4d4d ink / * `padding-bottom: 6rem` for the absolutely-positioned footer). The footer is * now a normal flow element at the end of the client shell's flex column * (theme-components.css §1), so no body padding reservation is needed. * ────────────────────────────────────────────────────────────────────────── */ body { font-family: var(--font-family); font-size: var(--text-base); font-weight: var(--font-weight-normal); color: var(--color-text); background-color: var(--color-surface); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ────────────────────────────────────────────────────────────────────────── * LINK RESET — global.css "Link reset" * * Copied verbatim. `color: inherit` is the pt_center baseline; the ember link * colour for body-copy links is applied one file later, in theme-bootstrap.css * (Bootstrap's `a` override), so that navigation surfaces which set their own * ink (navbar links, sidebar items, dropdown items) are not fought here. * Folds the legacy `a:hover { text-decoration: none }` of helpdesk.css. * ────────────────────────────────────────────────────────────────────────── */ a { color: inherit; text-decoration: none; } /* ────────────────────────────────────────────────────────────────────────── * IMAGE DEFAULTS — global.css "Image defaults" * * Copied verbatim. `max-width: 100%` is also load-bearing for TC-6 (no * horizontal overflow): an oversized inline image is one of the two classic * sources of a 375px overflow in this application, the other being an * unwrapped wide table. * ────────────────────────────────────────────────────────────────────────── */ img, svg { display: block; max-width: 100%; } /* ────────────────────────────────────────────────────────────────────────── * BUTTON RESET — global.css "Button reset" * * Copied verbatim. Bootstrap's `.btn` (specificity 0,1,0) still supplies its * own border, background, padding and font-size, so only bare `