/* * ============================================================ * Techsperience Portal — Design Tokens * ============================================================ * Usage: place this file first in index.html, before * bootstrap.min.css and techsperience-portal.css. * * Bootstrap 5 custom property overrides (--bs-*) let all * built-in components inherit brand values automatically. * Techsperience-specific tokens are prefixed --ts-* or --tp-*. * ============================================================ */ /* ── Web fonts ───────────────────────────────────────────── * Loaded here so tokens.css is self-contained. Fonts.md * lists privacy / performance notes. * ────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Michroma&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* ── Brand spectrum palette ──────────────────────────── */ --ts-magenta: #ab05af; --ts-purple: #6729c2; --ts-indigo: #4e4daa; --ts-slate: #537570; --ts-green: #70b70c; --ts-lime: #8ab30b; --ts-olive: #cfa90a; --ts-amber: #e9a509; --ts-orange: #f76f06; --ts-red: #ee2a02; /* Soft tints (50-weight backgrounds) */ --ts-magenta-50: #fbeefb; --ts-purple-50: #f1ebfb; --ts-indigo-50: #ecedf7; --ts-slate-50: #eef2f1; --ts-green-50: #f1f8e6; --ts-amber-50: #fdf4da; --ts-orange-50: #feeada; --ts-red-50: #fde2d9; /* ── Neutrals (cool-leaning grays) ──────────────────── */ --ts-black: #0e1012; --ts-ink: #1a1d21; --ts-gray-900: #23272d; --ts-gray-800: #333942; --ts-gray-700: #4a5260; --ts-gray-600: #6b7484; --ts-gray-500: #8b93a1; --ts-gray-400: #b3b9c4; --ts-gray-300: #d3d7de; --ts-gray-200: #e6e8ed; --ts-gray-100: #f1f3f6; --ts-gray-50: #f7f8fa; --ts-white: #ffffff; /* ── Semantic surface / foreground tokens ────────────── */ --tp-bg: var(--ts-white); --tp-bg-subtle: var(--ts-gray-50); --tp-bg-muted: var(--ts-gray-100); --tp-bg-inverse: var(--ts-black); --tp-fg: var(--ts-ink); --tp-fg-1: var(--ts-ink); --tp-fg-2: var(--ts-gray-700); --tp-fg-3: var(--ts-gray-600); --tp-fg-muted: var(--ts-gray-500); --tp-fg-inverse: var(--ts-white); --tp-fg-on-accent: var(--ts-white); --tp-border: var(--ts-gray-200); --tp-border-strong: var(--ts-gray-300); --tp-border-focus: var(--ts-purple); --tp-accent: var(--ts-purple); --tp-accent-hover: #571fad; --tp-accent-pressed: #481a95; --tp-accent-soft: var(--ts-purple-50); /* ── Status semantic tokens ──────────────────────────── */ --tp-success: var(--ts-green); --tp-success-bg: var(--ts-green-50); --tp-warning: var(--ts-amber); --tp-warning-bg: var(--ts-amber-50); --tp-danger: var(--ts-red); --tp-danger-bg: var(--ts-red-50); --tp-info: var(--ts-indigo); --tp-info-bg: var(--ts-indigo-50); --tp-muted: var(--ts-gray-500); --tp-muted-bg: var(--ts-gray-100); /* ── Gradients ───────────────────────────────────────── */ --ts-gradient-spectrum: linear-gradient( 90deg, #ab05af 0%, #6729c2 14%, #4e4daa 28%, #537570 42%, #70b70c 56%, #cfa90a 70%, #f76f06 85%, #ee2a02 100% ); --ts-gradient-warm: linear-gradient(135deg, #e9a509 0%, #ee2a02 100%); --ts-gradient-cool: linear-gradient(135deg, #6729c2 0%, #4e4daa 100%); --ts-gradient-green: linear-gradient(135deg, #8ab30b 0%, #70b70c 100%); /* ── Typography ──────────────────────────────────────── */ --tp-font-display: 'Michroma', 'Questrial', 'Inter', system-ui, sans-serif; --tp-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --tp-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace; --tp-fs-11: 0.6875rem; /* 11px */ --tp-fs-12: 0.75rem; /* 12px */ --tp-fs-13: 0.8125rem; /* 13px */ --tp-fs-14: 0.875rem; /* 14px */ --tp-fs-16: 1rem; /* 16px — base */ --tp-fs-18: 1.125rem; /* 18px */ --tp-fs-20: 1.25rem; /* 20px */ --tp-fs-24: 1.5rem; /* 24px */ --tp-fs-32: 2rem; /* 32px */ --tp-fs-40: 2.5rem; /* 40px */ --tp-fw-regular: 400; --tp-fw-medium: 500; --tp-fw-semibold: 600; --tp-fw-bold: 700; --tp-lh-tight: 1.08; --tp-lh-snug: 1.24; --tp-lh-body: 1.55; --tp-lh-loose: 1.7; --tp-tracking-tight: -0.02em; --tp-tracking-normal: 0; --tp-tracking-wide: 0.04em; --tp-tracking-display: 0.12em; /* ── Spacing (4 px base) ─────────────────────────────── */ --tp-space-1: 4px; --tp-space-2: 8px; --tp-space-3: 12px; --tp-space-4: 16px; --tp-space-5: 24px; --tp-space-6: 32px; --tp-space-7: 48px; --tp-space-8: 64px; --tp-space-9: 96px; /* ── Border radii ────────────────────────────────────── */ --tp-radius-xs: 4px; --tp-radius-sm: 6px; --tp-radius-md: 10px; --tp-radius-lg: 16px; --tp-radius-xl: 24px; --tp-radius-pill: 999px; /* ── Shadows (cool, low-saturation) ─────────────────── */ --tp-shadow-xs: 0 1px 2px rgba(20,24,34,0.06); --tp-shadow-sm: 0 1px 2px rgba(20,24,34,0.06), 0 2px 4px rgba(20,24,34,0.04); --tp-shadow-md: 0 4px 10px rgba(20,24,34,0.08), 0 2px 4px rgba(20,24,34,0.04); --tp-shadow-lg: 0 16px 40px rgba(20,24,34,0.12), 0 4px 12px rgba(20,24,34,0.06); --tp-shadow-focus: 0 0 0 3px rgba(103,41,194,0.25); /* ── Motion ──────────────────────────────────────────── */ --tp-ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0); --tp-ease-emphasized: cubic-bezier(0.2, 0.0, 0.0, 1.2); --tp-dur-fast: 120ms; --tp-dur-base: 200ms; --tp-dur-slow: 360ms; /* ── Layout ──────────────────────────────────────────── */ --tp-topbar-height: 60px; --tp-sidebar-width: 220px; --tp-content-max: 1200px; /* ── Breakpoints (reference only — use in media queries) */ /* --tp-bp-sm: 576px --tp-bp-md: 768px --tp-bp-lg: 992px --tp-bp-xl: 1200px */ /* ================================================================ * Bootstrap 5 overrides — map BS variables to our tokens so every * built-in component (btn, badge, alert, card, table, form, etc.) * inherits brand values automatically. * ================================================================ */ /* Colours */ --bs-primary: var(--ts-purple); --bs-primary-rgb: 103, 41, 194; --bs-secondary: var(--ts-gray-600); --bs-secondary-rgb: 107, 116, 132; --bs-success: var(--ts-green); --bs-success-rgb: 112, 183, 12; --bs-info: var(--ts-indigo); --bs-info-rgb: 78, 77, 170; --bs-warning: var(--ts-amber); --bs-warning-rgb: 233, 165, 9; --bs-danger: var(--ts-red); --bs-danger-rgb: 238, 42, 2; --bs-light: var(--ts-gray-50); --bs-light-rgb: 247, 248, 250; --bs-dark: var(--ts-ink); --bs-dark-rgb: 26, 29, 33; /* Body */ --bs-body-font-family: var(--tp-font-sans); --bs-body-font-size: var(--tp-fs-14); --bs-body-font-weight: var(--tp-fw-regular); --bs-body-line-height: var(--tp-lh-body); --bs-body-color: var(--ts-ink); --bs-body-bg: var(--ts-gray-50); /* Links */ --bs-link-color: var(--ts-purple); --bs-link-hover-color: #571fad; --bs-link-color-rgb: 103, 41, 194; --bs-link-hover-color-rgb: 87, 31, 173; /* Typography */ --bs-font-sans-serif: var(--tp-font-sans); --bs-font-monospace: var(--tp-font-mono); --bs-heading-color: var(--ts-ink); /* Border */ --bs-border-color: var(--ts-gray-200); --bs-border-color-translucent: rgba(20,24,34,0.1); --bs-border-radius: var(--tp-radius-md); --bs-border-radius-sm: var(--tp-radius-sm); --bs-border-radius-lg: var(--tp-radius-lg); --bs-border-radius-xl: var(--tp-radius-xl); --bs-border-radius-pill: var(--tp-radius-pill); /* Focus ring */ --bs-focus-ring-color: rgba(103,41,194,0.25); --bs-focus-ring-width: 3px; /* Cards */ --bs-card-bg: var(--ts-white); --bs-card-border-color: var(--ts-gray-200); --bs-card-border-radius: var(--tp-radius-md); --bs-card-box-shadow: var(--tp-shadow-sm); --bs-card-spacer-y: var(--tp-space-5); --bs-card-spacer-x: var(--tp-space-5); --bs-card-cap-bg: var(--ts-gray-50); --bs-card-cap-padding-y: var(--tp-space-3); --bs-card-cap-padding-x: var(--tp-space-5); /* Tables */ --bs-table-color: var(--ts-ink); --bs-table-bg: transparent; --bs-table-striped-bg: rgba(103,41,194,0.03); --bs-table-hover-bg: rgba(103,41,194,0.05); --bs-table-border-color: var(--ts-gray-200); /* Inputs / Forms */ --bs-input-bg: var(--ts-white); --bs-input-border-color: var(--ts-gray-300); --bs-input-border-radius: var(--tp-radius-sm); --bs-input-focus-border-color: var(--ts-purple); --bs-input-focus-box-shadow: var(--tp-shadow-focus); --bs-input-placeholder-color: var(--ts-gray-400); --bs-input-color: var(--ts-ink); /* Badges */ --bs-badge-border-radius: var(--tp-radius-pill); --bs-badge-padding-x: 0.55em; --bs-badge-padding-y: 0.3em; --bs-badge-font-size: 0.7em; --bs-badge-font-weight: var(--tp-fw-semibold); /* Modals */ --bs-modal-border-radius: var(--tp-radius-lg); --bs-modal-header-border-color: var(--ts-gray-200); --bs-modal-footer-border-color: var(--ts-gray-200); --bs-modal-bg: var(--ts-white); --bs-modal-box-shadow: var(--tp-shadow-lg); /* Dropdowns */ --bs-dropdown-bg: var(--ts-white); --bs-dropdown-border-color: var(--ts-gray-200); --bs-dropdown-border-radius: var(--tp-radius-md); --bs-dropdown-box-shadow: var(--tp-shadow-md); --bs-dropdown-link-color: var(--ts-gray-700); --bs-dropdown-link-hover-color: var(--ts-ink); --bs-dropdown-link-hover-bg: var(--ts-gray-50); --bs-dropdown-link-active-bg: var(--ts-purple-50); --bs-dropdown-link-active-color: var(--ts-purple); --bs-dropdown-item-padding-x: var(--tp-space-4); --bs-dropdown-item-padding-y: var(--tp-space-2); /* Nav / Tabs */ --bs-nav-link-color: var(--ts-gray-600); --bs-nav-link-hover-color: var(--ts-ink); --bs-nav-tabs-border-color: var(--ts-gray-200); --bs-nav-tabs-link-active-color: var(--ts-purple); --bs-nav-tabs-link-active-border-color: var(--ts-gray-200) var(--ts-gray-200) var(--ts-white); --bs-nav-pills-link-active-bg: var(--ts-purple); /* List groups */ --bs-list-group-bg: var(--ts-white); --bs-list-group-border-color: var(--ts-gray-200); --bs-list-group-action-hover-bg: var(--ts-gray-50); --bs-list-group-action-active-bg: var(--ts-gray-100); --bs-list-group-active-bg: var(--ts-purple); --bs-list-group-active-border-color: var(--ts-purple); /* Alerts */ --bs-alert-border-radius: var(--tp-radius-md); --bs-alert-padding-x: var(--tp-space-4); --bs-alert-padding-y: var(--tp-space-3); /* Breadcrumb */ --bs-breadcrumb-divider-color: var(--ts-gray-400); --bs-breadcrumb-active-color: var(--ts-gray-600); /* Pagination */ --bs-pagination-color: var(--ts-purple); --bs-pagination-hover-color: #571fad; --bs-pagination-active-bg: var(--ts-purple); --bs-pagination-active-border-color: var(--ts-purple); --bs-pagination-focus-box-shadow: var(--tp-shadow-focus); --bs-pagination-border-color: var(--ts-gray-200); /* Spinner */ --bs-spinner-border-width: 2px; /* Toast / popover */ --bs-toast-bg: rgba(255,255,255,0.95); --bs-toast-border-color: var(--ts-gray-200); --bs-toast-box-shadow: var(--tp-shadow-md); --bs-popover-bg: var(--ts-white); --bs-popover-border-color: var(--ts-gray-200); --bs-popover-box-shadow: var(--tp-shadow-md); --bs-popover-border-radius: var(--tp-radius-md); }