/* GENERATED by tools/build_assets.php from views/tokens.css — do not edit. */ /* --------------------------------------------------------------------------- Star Travel NG — design tokens (Tech Spec §8) Single source of truth for colour, type, spacing, radius and breakpoints. Values come from the approved Stitch designs; when a screen is re-pulled into design/stitch/ and a token has moved, it changes here once and everywhere. Nothing in this file is a component — see assets/css/app.css for those. --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- Inter — self-hosted. The design system is set in Inter, but the CSP (`default-src 'self'`) rules out Google Fonts, so the variable font is served from our own assets. One file per subset covers weights 100-900. Until 21 Aug 2026 no font was loaded at all and every page silently fell back to Segoe UI — the largest single reason the app did not look like the Stitch designs. --------------------------------------------------------------------------- */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin.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: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* ------------------------------------------------------------------- PALETTE Everything derives from the brand red. There is no blue anywhere in this system: an indigo or a cool blue-grey sitting beside a warm red is what makes an interface look assembled from parts rather than designed. Client direction, 20 Aug 2026. Brand red #EC2127 is hue 358, so: - the brand ramp is that hue at different lightness, down to the oxblood used for the Star portal chrome; - the neutrals are warm-tinted rather than cool, so they sit with the red instead of fighting it; - the status colours are analogous (amber, plum) or the classic red complement (green), never introduced from elsewhere. ------------------------------------------------------------------- */ /* Brand ramp — one hue, six lightnesses ------------------------------ */ /* #EC2127 is the brand red and stays the brand red, but white on it is 4.36:1 — under the 4.5:1 AA needs for text, and so is the red itself on white. So the identity colour is used for accents, fills, underlines, icons and focus rings, where contrast is not a text concern, and a fractionally darker --color-primary-action carries anything with a label on it. The two are indistinguishable side by side; one of them is readable. */ --color-primary: #EC2127; --color-primary-action: #D41A20; /* 5.29:1 both on and against white */ --color-primary-dark: #C4171C; --color-primary-darker: #8E1014; --color-primary-deep: #4A0E12; /* Star portal chrome */ --color-primary-light: #FDECEC; --color-primary-contrast: #FFFFFF; /* Neutrals — warm-tinted to match the red ---------------------------- */ --color-ink: #1F1A1A; --color-ink-muted: #635858; --color-ink-subtle: #7E7171; /* 4.68:1 on white — AA at body size */ --color-line: #ECE6E6; --color-line-strong: #D5CBCB; --color-surface: #FFFFFF; --color-surface-sunken: #F8F5F4; --color-surface-raised: #FFFFFF; /* Status — one palette, used by the status chip everywhere ----------- */ /* Green stays: it is the complement of the brand red, and "active means green" is worth more to a user than palette purity. It is pulled warm so it reads as part of the same system. */ --color-success: #2C7A45; --color-success-bg: #E8F4EC; /* Amber is analogous to the brand red — a natural neighbour. */ --color-warning: #A85A00; --color-warning-bg: #FDF0E1; /* Danger is the brand red darkened, not a second red. */ --color-danger: #B3161D; --color-danger-bg: #FCE8E9; /* Part-paid was blue. It is now mulberry — red-violet, so it sits in the brand family while staying clearly distinct from pending amber. */ --color-accent: #8A3A63; --color-accent-bg: #F7EBF1; --color-neutral: #635858; --color-neutral-bg: #F0EBEA; /* Informational alerts share the mulberry accent, so no blue is needed. */ --color-info: var(--color-accent); --color-info-bg: var(--color-accent-bg); /* Spacing — 8px rhythm, exported scale ------------------------------- */ --space-1: 4px; /* base */ --space-2: 8px; /* xs */ --space-3: 12px; /* sm */ --space-4: 16px; /* md */ --space-5: 24px; /* lg */ --space-6: 32px; /* xl */ --space-7: 48px; --gutter: 20px; --margin-mobile: 16px; --margin-desktop: 48px; /* Radius — exported scale. 8px is the default visual language: precise without being severe. Containers wider than 400px may step up to 12px. */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-pill: 9999px; /* Type — the scale exported from the Stitch design system ------------ ("Warm Professionalism", design/stitch/design-system.md). The named roles below are the design's; the --text-* aliases are kept so existing markup keeps working. Hierarchy comes from weight and colour rather than large jumps in size, which is why the steps are close together. */ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --headline-lg: 32px; /* 700, 40px, -0.02em */ --headline-lg-mobile: 24px; /* 700, 32px, -0.01em */ --headline-md: 24px; /* 600, 32px */ --headline-sm: 20px; /* 600, 28px */ --body-lg: 18px; /* 400, 28px */ --body-md: 16px; /* 400, 24px */ --body-sm: 14px; /* 400, 20px */ --label-md: 14px; /* 600, 16px, 0.01em */ --label-sm: 12px; /* 500, 16px */ --leading-headline-lg: 40px; --leading-headline-md: 32px; --leading-headline-sm: 28px; --leading-body-lg: 28px; --leading-body-md: 24px; --leading-body-sm: 20px; --leading-label: 16px; --tracking-headline: -0.02em; --tracking-label: 0.01em; --text-xs: var(--label-sm); --text-sm: var(--body-sm); --text-base: var(--body-md); --text-lg: var(--body-lg); --text-xl: var(--headline-sm); --text-2xl: var(--headline-md); --text-3xl: var(--headline-lg); --leading-tight: 1.25; --leading-normal: 1.5; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Elevation ---------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(31, 26, 26, 0.05); --shadow-md: 0 4px 12px rgba(31, 26, 26, 0.05); /* design level 2 */ --shadow-lg: 0 8px 24px rgba(31, 26, 26, 0.10); /* Portal identity — the one place each portal's chrome colour lives. The three portals are told apart by DEPTH, not by hue: agency on white, the staff portals on brand red chrome with UITS carrying a warm near-black sidebar. Using a different hue per portal (the earlier indigo) broke the palette for no real gain. The staff top bar is #B81119 (client direction, 26 August 2026), taken from the Stitch export in design/stitch/agencies-directory-2. It sits between --color-primary-dark and --color-primary-darker on the ramp, and white on it is 6.72:1 — AA at every size. It replaced the oxblood --color-primary-deep, which stays in the ramp because the ghost button, the tab count and two other components are built on it. */ --color-portal-header: #B81119; --color-portal-uits: #241C1C; /* Layout ------------------------------------------------------------- */ --sidebar-width: 248px; --topbar-height: 60px; --tabbar-height: 60px; --content-max: 1200px; /* design grid: 12 columns, centred */ /* Motion — respected only when the user has not asked for less ------- */ --transition-fast: 120ms ease; --transition-base: 200ms ease; } /* Breakpoints are 360 / 768 / 1080 (Tech Spec §8). CSS custom properties cannot be used in media queries, so they live here as documentation and are written literally in app.css: 360px small phone floor 768px phone -> tablet: bottom tab bar gives way to the sidebar 1080px desktop: sidebar expands, tables stop collapsing to cards */ @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0ms; --transition-base: 0ms; } }