/* app/assets/stylesheets/tokens.css */ /* ════════════════════════════════════════════════════════════════════ TRUA DESIGN SYSTEM — canonical design tokens (SINGLE SOURCE OF TRUTH). Owned by canon (trua-collect); mirrored verbatim to c5-pilot + i9-pilot per CHARTER-ttb-design-system.md (XCC-02). Design tokens are declared here and NOWHERE else — the drift lint enforces this. See docs/trua-design-system.md for the design language. One register, architectural and uniform (XCC-02 D1): blue+green identity, TIGHT radii across ALL surfaces and both wallets, crisp structural shadows. Surfaces differentiate by density, color emphasis, brand presence, and whitespace — never by radius. This file is the union of canon's and i9's token systems (XCC-02 Phase 2): i9's richer set is the base (extra semantic stops, --shadow-0, --space-0, inverse/strong mappings, crisper shadows); canon's --tt-* shell aliases + layout tokens are unioned in so the legacy form-wizard surfaces keep rendering. Both legacy vocabularies coexist transitionally. ════════════════════════════════════════════════════════════════════ */ :root { /* --- Palette: Primary Blue (brand, anchor, authority) --- */ --blue-100: #E8EDF5; /* lightest tint — soft hover, callout-brand bg */ --blue-300: #A3B0CB; /* border on callout-brand */ --blue-500: #5F73A0; /* secondary text on light brand surfaces */ --blue-600: #31487A; /* SPEC — Lighter Blue. Links, focus, mid-emphasis */ --blue-700: #22365E; /* primary hover, text-on-light-brand */ --blue-900: #15264C; /* SPEC — Deep Blue. Primary brand. CTAs, headings, page-header stripe */ /* --- Palette: Accent Green --- */ --green-100: #F0F7E1; /* soft surface */ --green-300: #C7DC8E; /* mid */ --green-500: #9DBF59; /* SPEC — Bright Green. Accent, success, "verified" */ --green-700: #6F8C36; /* darker for text-on-light */ --green-900: #42561D; /* deepest */ /* --- Palette: Neutrals --- */ --neutral-0: #FFFFFF; /* SPEC — White. Elevated surface */ --neutral-50: #FAFBFC; /* barely-off white — guided/wallet surface warmth */ --neutral-100: #F5F5F5; /* SPEC — Off-White. Page bg */ --neutral-300: #D9D9D9; /* SPEC — Light Gray. Borders, dividers */ --neutral-500: #7A7A7A; /* SPEC — Gray. Muted text, placeholder */ --neutral-700: #4A4A4A; /* SPEC — Medium Gray. Body text */ --neutral-900: #1E1E1E; /* SPEC — Dark Gray. Text-strong, dark surfaces */ /* --- Palette: Status (info / success / warning / error), -10 bg / -20 border / -30 mid / -40 accent / -50 text --- Info aliases the primary blue; success aliases the green accent; warning is a calm amber (not the retired brand orange); error is red. */ --info-10: var(--blue-100); --info-20: #C5D2E8; --info-30: var(--blue-300); --info-40: var(--blue-600); --info-50: var(--blue-900); --success-10: var(--green-100); --success-20: #DCEBB8; --success-30: var(--green-300); --success-40: var(--green-500); --success-50: var(--green-700); --warning-10: #FFF4DB; --warning-20: #FFE2A8; --warning-30: #E8B85C; --warning-40: #C88B1F; /* amber, not orange — keeps warning distinct from any brand recall */ --warning-50: #7A4F0D; --error-10: #FEEBEB; --error-20: #FBC9C9; --error-30: #ED7A7A; --error-40: #D63030; --error-50: #8C1818; /* --- Semantic mappings (refer to scales above; prefer these in views) --- */ --color-bg: var(--neutral-100); --color-bg-elevated: var(--neutral-0); --color-bg-subtle: var(--neutral-100); --color-bg-inverse: var(--blue-900); --color-text: var(--neutral-700); --color-text-muted: var(--neutral-500); --color-text-strong: var(--blue-900); --color-text-inverse: var(--neutral-0); --color-text-link: var(--blue-600); --color-border: var(--neutral-300); --color-border-strong: #BFBFBF; --color-border-focus: var(--blue-600); --color-brand: var(--blue-900); --color-brand-hover: var(--blue-700); --color-brand-soft: var(--blue-100); --color-accent: var(--green-500); --color-accent-text: var(--green-700); --color-accent-hover: var(--green-700); /* --- Font families (XCC-02 D4) --- */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', monospace; /* --- Type scale (Inter, no decorative weights) --- */ --text-2xs: 0.6875rem; /* 11px — captions / footnotes */ --text-xs: 0.75rem; /* 12px — meta */ --text-sm: 0.8125rem; /* 13px — secondary body */ --text-md: 0.9375rem; /* 15px — body */ --text-lg: 1.0625rem; /* 17px — lead body */ --text-xl: 1.25rem; /* 20px — heading sm */ --text-2xl: 1.5rem; /* 24px — heading md */ --text-3xl: 1.875rem; /* 30px — heading lg */ --text-4xl: 2.25rem; /* 36px — heading xl */ --text-5xl: 3rem; /* 48px — heading 2xl */ --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.5; --leading-loose: 1.65; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* --- Spacing scale (8pt grid with half-step) --- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* --- Radii: tight, architectural (XCC-02 D1) — uniform across all surfaces --- */ --radius-0: 0; /* flush / tabular edges */ --radius-1: 2px; /* DEFAULT — buttons, inputs, cards, panels */ --radius-2: 4px; /* nested / emphasis only */ --radius-3: 6px; /* large panels — rare */ --radius-pill: 9999px; /* status pills, badges, avatars — shape primitives, NOT a softness lever */ /* --- Shadows: subtle, structural (no soft halos) --- */ --shadow-0: none; --shadow-1: 0 1px 0 rgba(11, 24, 38, 0.05); /* hairline separator */ --shadow-2: 0 1px 2px rgba(11, 24, 38, 0.08); /* resting card */ --shadow-3: 0 2px 4px rgba(11, 24, 38, 0.10), 0 1px 2px rgba(11, 24, 38, 0.06); /* raised card */ --shadow-4: 0 4px 8px rgba(11, 24, 38, 0.12); /* popover */ --shadow-focus: 0 0 0 3px rgba(53, 122, 204, 0.25); /* focus ring */ /* --- Layout maxes --- */ --layout-canvas-max: 720px; /* wallet — narrow, holder-portable */ --layout-employer-max: 1240px; /* employer — wide, desktop HR */ --layout-inspector-max: 880px; /* inspector — medium, forensic */ --layout-rail-w: 240px; /* --- Transitions --- */ --tx-fast: 100ms ease-out; --tx: 150ms ease-out; --tx-slow: 240ms ease-out; /* --- Legacy aliases: i9 v2 surface (--navy / --light / --dark), mapped to v3 scales. Used by ~131 i9 view/component references; swept to v3 names over time. --- */ --navy-10: var(--blue-100); --navy-20: #C5D2E8; --navy-30: var(--blue-300); --navy-40: var(--blue-500); --navy-50: var(--blue-500); --navy-60: var(--blue-700); --navy-70: var(--blue-900); --navy-80: var(--neutral-900); --light-white: var(--neutral-0); --light-off: var(--neutral-100); --light-misty: var(--neutral-100); --light-cloud: var(--neutral-300); --light-silver: #BFBFBF; --light-pewter: var(--neutral-500); --dark-30: var(--neutral-700); --dark-50: var(--neutral-700); --dark-60: var(--neutral-900); --dark-70: var(--neutral-900); --dark-80: #0A0A0A; /* --- Legacy aliases: canon/c5 "tt" form-wizard shell, mapped to v3 scales. --- */ --tt-canvas-max: 720px; --tt-sticky-nav-min: 96px; --tt-padding-sm: 16px; --tt-padding-md: 24px; --tt-padding-lg: 32px; --tt-navy: var(--blue-900); --tt-navy-light: var(--blue-700); --tt-sky: var(--blue-600); --tt-sky-light: var(--blue-500); --tt-lime: var(--green-500); --tt-lime-dark: var(--green-700); --tt-primary: var(--blue-900); --tt-primary-hover: var(--blue-700); --tt-accent: var(--blue-600); --tt-success: var(--green-500); --tt-success-dark: var(--green-700); --tt-text-body: var(--neutral-700); --tt-text-heading: var(--blue-900); --tt-border: var(--neutral-300); --tt-divider: #ECECEC; --tt-muted: var(--neutral-500); --tt-disabled: var(--neutral-100); --tt-selection-bg: var(--blue-900); --tt-selection-text: #fff; --tt-radius: var(--radius-1); --tt-radius-sm: var(--radius-1); --tt-radius-card: var(--radius-2); --tt-input-height: 40px; --tt-input-height-md: 47px; /* --- Bootstrap 5 overrides — re-map --bs-* to tokens (utilities carry forward) --- */ --bs-primary: var(--color-brand); --bs-primary-rgb: 21, 38, 76; /* blue-900 #15264C */ --bs-secondary: var(--blue-600); --bs-secondary-rgb: 49, 72, 122; /* blue-600 #31487A */ --bs-success: var(--success-40); --bs-success-rgb: 157, 191, 89; /* green-500 #9DBF59 */ --bs-info: var(--info-40); --bs-info-rgb: 49, 72, 122; --bs-warning: var(--warning-40); --bs-warning-rgb: 200, 139, 31; /* amber #C88B1F */ --bs-danger: var(--error-40); --bs-danger-rgb: 214, 48, 48; /* red #D63030 */ --bs-light: var(--neutral-100); --bs-dark: var(--neutral-900); --bs-body-bg: var(--color-bg); --bs-body-color: var(--color-text); --bs-border-color: var(--color-border); --bs-link-color: var(--color-text-link); --bs-link-hover-color: var(--color-brand); --bs-border-radius: var(--radius-1); --bs-border-radius-sm: var(--radius-1); --bs-border-radius-lg: var(--radius-2); }