:root { /* * Yoshine ERP visual foundation * ----------------------------- * This file is intentionally token-only. Page and component rules consume * these values from yoshine_components.css so business styles can migrate * without another round of one-off colours, radii or control heights. */ /* Project-wide primary text color. All black/near-black body copy resolves here. */ --erp-text-primary: #323232; --erp-text-secondary: #59677a; --erp-text-muted: #8490a1; --erp-text-disabled: #a8b1bf; --erp-text-inverse: #ffffff; --tblr-body-color: var(--erp-text-primary); --tblr-body-color-rgb: 50, 50, 50; --tblr-emphasis-color: var(--erp-text-primary); --tblr-emphasis-color-rgb: 50, 50, 50; --tblr-secondary-color: rgba(50, 50, 50, .75); --tblr-secondary-color-rgb: 50, 50, 50; --tblr-tertiary-color: rgba(50, 50, 50, .5); --tblr-tertiary-color-rgb: 50, 50, 50; --tblr-dark: var(--erp-text-primary); --tblr-dark-rgb: 50, 50, 50; --tblr-gray-dark: var(--erp-text-primary); --tblr-gray-900: var(--erp-text-primary); --tblr-highlight-color: var(--erp-text-primary); --tblr-black: var(--erp-text-primary); --tblr-black-rgb: 50, 50, 50; --bs-black: var(--erp-text-primary); --bs-black-rgb: 50, 50, 50; --ys-blue-50: #eef4ff; --ys-blue-100: #dce8ff; --ys-blue-500: #315cf5; --ys-blue-600: #2149dc; --ys-blue-700: #1838b7; --ys-navy-950: var(--erp-text-primary); --ys-cyan-400: #18d4f4; --ys-cyan-500: #08badf; --ys-green-50: #edf9f3; --ys-green-600: #159461; --ys-orange-50: #fff5e8; --ys-orange-600: #dd7500; --ys-red-50: #fff0f1; --ys-red-500: #ef3f4f; --ys-violet-50: #f5f0ff; --ys-violet-600: #7147e8; --ys-slate-25: #fbfcfe; --ys-slate-50: #f6f8fc; --ys-slate-100: #eef2f7; --ys-slate-200: #e1e7ef; --ys-slate-300: #cbd5e1; --ys-slate-500: #718096; --ys-slate-700: #334155; --ys-slate-900: var(--erp-text-primary); --ys-surface: #ffffff; /* Semantic product colours. */ --erp-color-primary: #315cf5; --erp-color-primary-hover: #244bd9; --erp-color-primary-active: #1c3fbd; --erp-color-primary-soft: #eef3ff; --erp-color-primary-border: #cbd8ff; --erp-color-success: #159461; --erp-color-success-soft: #edf9f3; --erp-color-warning: #d97706; --erp-color-warning-soft: #fff6e8; --erp-color-danger: #e64252; --erp-color-danger-soft: #fff0f2; --erp-color-info: #1687eb; --erp-color-info-soft: #eef7ff; --erp-surface-canvas: #f2f5fa; --erp-surface-raised: #ffffff; --erp-surface-subtle: #f7f9fc; --erp-surface-muted: #f0f3f7; --erp-border-subtle: #edf1f6; --erp-border-default: #dfe6ef; --erp-border-strong: #cbd5e1; /* Typography scale. Decorative eyebrows may use 10px; information may not. */ --erp-font-size-eyebrow: 10px; --erp-font-size-meta: 11px; --erp-font-size-label: 12px; --erp-font-size-body: 13px; --erp-font-size-body-lg: 14px; --erp-font-size-section: 16px; --erp-font-size-title-sm: 19px; --erp-font-size-title: 26px; --erp-font-size-display: 30px; --erp-line-height-tight: 1.2; --erp-line-height-snug: 1.35; --erp-line-height-body: 1.55; --erp-font-weight-regular: 450; --erp-font-weight-medium: 560; --erp-font-weight-semibold: 650; --erp-font-weight-bold: 760; /* One spacing rhythm across shell, cards and controls. */ --erp-space-1: 4px; --erp-space-2: 8px; --erp-space-3: 12px; --erp-space-4: 16px; --erp-space-5: 20px; --erp-space-6: 24px; --erp-space-8: 32px; /* Component geometry. */ --erp-control-height-compact: 30px; --erp-control-height: 36px; --erp-control-height-toolbar: 38px; --erp-control-height-large: 42px; --erp-radius-xs: 6px; --erp-radius-control: 9px; --erp-radius-card: 12px; --erp-radius-panel: 14px; --erp-radius-shell: 16px; --erp-radius-pill: 999px; --ys-radius-sm: 8px; --ys-radius-md: 12px; --ys-radius-lg: 16px; --ys-shadow-shell: 0 22px 60px rgba(19, 40, 79, .08); --ys-shadow-card: 0 8px 24px rgba(22, 45, 82, .055); --erp-shadow-sm: 0 1px 3px rgba(15, 23, 42, .04); --erp-shadow-card: 0 7px 22px rgba(25, 42, 70, .045); --erp-shadow-floating: 0 18px 48px rgba(22, 34, 49, .16); --erp-shadow-overlay: 0 24px 64px rgba(22, 34, 49, .20); /* Interaction and layering. */ --erp-focus-ring: 0 0 0 3px rgba(49, 92, 245, .11); --erp-focus-outline: rgba(49, 92, 245, .72); --erp-motion-fast: 120ms; --erp-motion-normal: 180ms; --erp-motion-slow: 240ms; --erp-ease-out: cubic-bezier(.2, .8, .2, 1); --erp-z-popover: 1000; --erp-z-sticky: 1100; --erp-z-drawer: 2000; --erp-z-modal: 2200; --erp-z-toast: 2400; --ys-transition: 160ms ease; /* Stable public aliases used by documentation and contract tests. */ --ys-text-primary: var(--erp-text-primary); --ys-text-secondary: var(--erp-text-secondary); --ys-text-muted: var(--erp-text-muted); --ys-text-disabled: var(--erp-text-disabled); --ys-text-inverse: var(--erp-text-inverse); --ys-font-size-xs: var(--erp-font-size-eyebrow); --ys-font-size-sm: var(--erp-font-size-meta); --ys-font-size-md: var(--erp-font-size-label); --ys-font-size-base: var(--erp-font-size-body); --ys-font-size-lg: var(--erp-font-size-body-lg); --ys-font-size-xl: var(--erp-font-size-section); --ys-font-size-2xl: var(--erp-font-size-title-sm); --ys-font-size-title: var(--erp-font-size-title); --ys-font-size-display: var(--erp-font-size-display); --ys-space-1: var(--erp-space-1); --ys-space-2: var(--erp-space-2); --ys-space-3: var(--erp-space-3); --ys-space-4: var(--erp-space-4); --ys-space-6: var(--erp-space-6); --ys-space-8: var(--erp-space-8); --ys-control-height-sm: var(--erp-control-height-compact); --ys-control-height-md: var(--erp-control-height); --ys-control-height-lg: var(--erp-control-height-large); --ys-radius-xs: var(--erp-radius-xs); --ys-radius-pill: var(--erp-radius-pill); --ys-focus-ring: var(--erp-focus-ring); --ys-motion-fast: var(--erp-motion-fast); --ys-motion-standard: var(--erp-motion-normal); --ys-motion-slow: var(--erp-motion-slow); /* Shared table selection states. Keep these as the single visual source of truth. */ --ys-table-selection-hover-bg: #eef7ff; --ys-table-selection-bg: #e6f4ff; --ys-table-selection-line: #2f9df4; --ys-table-selection-line-soft: rgba(47, 157, 244, .78); --ys-table-selection-divider: #d9e6f2; }