/* ========================================================================= Portal design tokens. One place for the colours, type and spacing the SmartTalent portal already uses, so screens added later inherit the look instead of inventing one. Every value here was read out of the existing stylesheets, not chosen: body copy + font stack ....... main.css page title, 3px underline .... attendance.css (.page_title) .card border and radius ...... main.css .card-head blue .............. main.css brand blue #0091ff ........... 35 uses across the portal Nothing in this file styles an element. It only declares variables, so it is safe to load everywhere and cannot alter an existing screen. The one place values were adjusted is the solid-fill hues at the bottom. The portal's brighter accents are used behind white text on the org chart, where #0091ff gives 3.2:1 -- below the 4.5:1 WCAG AA needs for the 9-11px labels on those boxes. Each has been darkened along its own hue until it passes; they read as the same family, just deeper. ========================================================================= */ :root { /* ---- type ------------------------------------------------------------ The stack main.css sets on , repeated so a component can ask for it explicitly rather than relying on inheritance through an iframe. */ --pt-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --pt-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --pt-size-base: 14px; /* body, matches main.css */ --pt-size-title: 20px; /* .page_title h2 */ --pt-size-head: 15px; /* .card-head */ --pt-size-sm: 13px; --pt-size-xs: 12px; --pt-size-label: 10.5px; /* uppercase field labels */ --pt-weight-normal: 400; --pt-weight-medium: 500; --pt-weight-semi: 600; --pt-line: 1.5; /* ---- text ------------------------------------------------------------ #7f7f7f appears in the portal but only reaches 4.0:1 on white, so it is deliberately not offered as a text colour here; --pt-muted is the lightest that still passes. */ --pt-ink: #131313; /* headings and primary text */ --pt-body: #495057; /* paragraph text */ --pt-muted: #6c757d; /* secondary, 4.7:1 */ --pt-on-fill:#ffffff; /* text on a solid brand fill */ /* ---- brand ----------------------------------------------------------- */ --pt-primary: #0091ff; /* links, active tab, the title underline */ --pt-primary-dark: #035fa5; /* hover, and any fill carrying white text */ --pt-primary-ms: #0078d4; --pt-accent: #4f7cfb; /* .card-head */ /* ---- surfaces -------------------------------------------------------- */ --pt-surface: #ffffff; --pt-ground: #f7f9fb; /* page behind cards */ --pt-tint: #f0f8ff; /* the portal's aliceblue callout */ --pt-rule: #eaeaea; /* divider */ --pt-rule-lt: #f2f4f6; /* lighter divider inside a card */ --pt-border: rgba(0, 0, 0, .125); /* .card */ --pt-radius: .25rem; /* .card */ --pt-radius-lg: 6px; /* .card_container */ --pt-shadow: 0 2px 12px rgba(19, 19, 19, .07); /* ---- spacing --------------------------------------------------------- */ --pt-gap-xs: 4px; --pt-gap-sm: 8px; --pt-gap: 12px; --pt-gap-md: 16px; --pt-gap-lg: 24px; /* ---- category fills -------------------------------------------------- White text on each of these; all >= 4.5:1. Same hues as the portal accents above, darkened only as far as contrast required. */ --pt-fill-deep: #024b83; /* 9.0:1 */ --pt-fill-blue: #035fa5; /* 6.6:1 */ --pt-fill-azure: #3a63d8; /* 5.3:1 */ --pt-fill-indigo: #5348c9; /* 6.7:1 */ --pt-fill-teal: #00857c; /* 4.5:1 */ --pt-fill-magenta: #a13fc4; /* 5.2:1 */ --pt-fill-amber: #8a6d00; /* 4.9:1 */ --pt-fill-grey: #6c757d; /* 4.7:1 */ }