/* ============================================================================= * hypen-tokens.css — CANONICAL cross-app design tokens (Hypen Design System) * ----------------------------------------------------------------------------- * IDENTICAL copy lives in every Hypen app's public/css (self-contained, no * shared image base — just a per-app file copy). Master reference: * master-portal: docs/analysis/design-tokens/hypen-tokens.css * * Load this LAST — after each app's Bootstrap/AdminLTE + design-system.css + * platform-.css — so its :root wins the cascade. It does three jobs: * (A) define the --hn-* source of truth (type / spacing / layout / inputs / * radius / card / neutrals), * (B) ALIAS the legacy variable names the apps already consume (--text-*, * --space-*, --sidebar-width, --border-*, --text-primary, ...) onto the * --hn-* values, so every existing rule realigns with ZERO view edits, * (C) carry all 6 per-app ACCENT blocks, selected purely by * [data-platform=""] on /. * * Accents are the CURRENT / branded values per app — do NOT change them here; * harmonisation is about type/spacing/sidebar/inputs, not brand colour. * Source: master-portal docs/analysis/design-consistency-plan.md * ========================================================================== */ :root { /* ---- TYPOGRAPHY ---------------------------------------------------------- */ --hn-font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --hn-font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace; --hn-font-base: 0.875rem; /* 14px body — THE anchor */ --hn-font-xs: 0.75rem; --hn-font-sm: 0.875rem; --hn-font-md: 1rem; --hn-font-lg: 1.125rem; --hn-font-xl: 1.25rem; --hn-h1: 1.5rem; --hn-h1-weight: 700; /* page title 24px / bold */ --hn-h2: 1rem; --hn-h2-weight: 600; /* card / section title 16px / semibold */ --hn-line-body: 1.6; --hn-line-head: 1.2; /* ---- SPACING (16px base unit) ------------------------------------------- */ --hn-space-1: .25rem; --hn-space-2: .5rem; --hn-space-3: .75rem; --hn-space-4: 1rem; --hn-space-5: 1.25rem; --hn-space-6: 1.5rem; --hn-space-8: 2rem; --hn-space-10: 2.5rem; --hn-space-12: 3rem; --hn-space-16: 4rem; --hn-content-pad: var(--hn-space-6) var(--hn-space-8); /* 24px 32px */ /* ---- LAYOUT ------------------------------------------------------------- */ --hn-sidebar-w: 244px; --hn-sidebar-collapsed: 64px; --hn-sidebar-bg: #fafafa; --hn-sidebar-border: #e5e5e5; --hn-sidebar-logo-h: 64px; --hn-topbar-h: 56px; /* ---- INPUTS ------------------------------------------------------------- */ --hn-input-h: 40px; --hn-input-pad: .5rem .75rem; --hn-input-radius: 6px; --hn-input-font: var(--hn-font-sm); --hn-input-border: #d4d4d4; --hn-input-focus-ring: 0 0 0 3px rgba(var(--hn-accent-rgb), .12); /* ---- RADIUS ------------------------------------------------------------- */ --hn-radius-sm: 4px; --hn-radius-md: 6px; --hn-radius-lg: 8px; --hn-radius-xl: 12px; --hn-radius-2xl: 16px; --hn-radius-full: 9999px; --hn-radius-card: 12px; --hn-radius-input: 6px; /* ---- CARD --------------------------------------------------------------- */ --hn-card-bg: #fff; --hn-card-border: 1px solid #e5e5e5; --hn-card-radius: 12px; --hn-card-shadow: 0 1px 2px rgba(0,0,0,.05); --hn-card-pad: var(--hn-space-5); /* body 20px */ --hn-card-header-pad: var(--hn-space-4) var(--hn-space-5); /* 16px 20px */ --hn-card-footer-pad: var(--hn-space-3) var(--hn-space-5); /* 12px 20px */ /* ---- NEUTRALS (force any slate-palette app back to neutral gray) -------- */ --hn-text-primary: #171717; --hn-text-secondary: #737373; --hn-text-muted: #a3a3a3; --hn-border-light: #e5e5e5; --hn-border-default: #d4d4d4; --hn-bg-secondary: #fafafa; --hn-shadow-xs: 0 1px 2px rgba(0,0,0,.05); --hn-shadow-md: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.05); /* ---- LEGACY ALIASES: realign every existing app rule, no view edits ----- */ --text-xs: var(--hn-font-xs); --text-sm: var(--hn-font-sm); --text-base: var(--hn-font-md); --text-lg: var(--hn-font-lg); --text-xl: var(--hn-font-xl); --text-2xl: var(--hn-h1); --space-3: var(--hn-space-3); --space-4: var(--hn-space-4); --space-5: var(--hn-space-5); --space-6: var(--hn-space-6); --space-8: var(--hn-space-8); --sidebar-width: var(--hn-sidebar-w); --sidebar-collapsed-width: var(--hn-sidebar-collapsed); --topbar-height: var(--hn-topbar-h); --border-light: var(--hn-border-light); --border-default: var(--hn-border-default); --text-primary: var(--hn-text-primary); --text-secondary: var(--hn-text-secondary); --text-muted: var(--hn-text-muted); } body { font-family: var(--hn-font-sans); font-size: var(--hn-font-base); line-height: var(--hn-line-body); color: var(--hn-text-primary); } /* ============================================================================= * ACCENT — one block per app. The app's / carries * data-platform=""; only these 6 var-sets differ. Values are the CURRENT * branded accents (verified against each running app) — do NOT recolour. * ========================================================================== */ [data-platform="iportal"] { --hn-accent:#1d4ed8; --hn-accent-light:#dbeafe; --hn-accent-dark:#1e40af; --hn-accent-hover:#1e40af; --hn-accent-rgb:29,78,216; --hn-accent-text:#fff; } [data-platform="iqms"] { --hn-accent:#15803d; --hn-accent-light:#dcfce7; --hn-accent-dark:#166534; --hn-accent-hover:#166534; --hn-accent-rgb:21,128,61; --hn-accent-text:#fff; } [data-platform="ihr"] { --hn-accent:#c2410c; --hn-accent-light:#ffedd5; --hn-accent-dark:#9a3412; --hn-accent-hover:#9a3412; --hn-accent-rgb:194,65,12; --hn-accent-text:#fff; } [data-platform="flexidocs"] { --hn-accent:#6366f1; --hn-accent-light:#eef2ff; --hn-accent-dark:#4f46e5; --hn-accent-hover:#4f46e5; --hn-accent-rgb:99,102,241; --hn-accent-text:#fff; } [data-platform="omnigest"] { --hn-accent:#0e7490; --hn-accent-light:#cffafe; --hn-accent-dark:#164e63; --hn-accent-hover:#155e75; --hn-accent-rgb:14,116,144; --hn-accent-text:#fff; } [data-platform="rocket-tracker"]{ --hn-accent:#b91c1c; --hn-accent-light:#fef2f2; --hn-accent-dark:#991b1b; --hn-accent-hover:#991b1b; --hn-accent-rgb:185,28,28; --hn-accent-text:#fff; } /* alias the active accent onto the legacy names every existing rule reads */ [data-platform] { --accent: var(--hn-accent); --accent-light: var(--hn-accent-light); --accent-dark: var(--hn-accent-dark); --accent-hover: var(--hn-accent-hover); --accent-rgb: var(--hn-accent-rgb); --accent-text: var(--hn-accent-text); }