/* DataProX ERP Design Tokens */ :root { /* Typography - Inter */ --erp-font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --erp-font-sans: var(--erp-font-family); /* Semantic Font Sizes */ --erp-font-size-xs: 11px; /* Meta, tiny labels */ --erp-font-size-sm: 12px; /* Standard labels, helper text */ --erp-font-size-base: 13px; /* Body text, table data */ --erp-font-size-md: 14px; /* Form inputs, standard buttons */ --erp-font-size-lg: 16px; /* Subtitles, section headers */ --erp-font-size-xl: 18px; /* Card titles */ --erp-font-size-2xl: 24px; /* Page titles */ /* Font Weights */ --erp-font-weight-regular: 400; --erp-font-weight-medium: 500; --erp-font-weight-semibold: 600; --erp-font-weight-bold: 700; /* Line Heights */ --erp-line-height-tight: 1.25; --erp-line-height-normal: 1.5; --erp-line-height-relaxed: 1.75; /* Sidebar Semantic Typography Tokens (Phase 8) */ --erp-sidebar-font-family: var(--erp-font-family); --erp-sidebar-brand-font-size: 15.5px; --erp-sidebar-brand-font-weight: var(--erp-font-weight-bold); --erp-sidebar-tagline-font-size: var(--erp-font-size-xs); --erp-sidebar-tagline-font-weight: var(--erp-font-weight-semibold); --erp-sidebar-section-font-size: var(--erp-font-size-xs); --erp-sidebar-section-font-weight: var(--erp-font-weight-semibold); --erp-sidebar-nav-font-size: var(--erp-font-size-md); --erp-sidebar-nav-font-weight: var(--erp-font-weight-medium); --erp-sidebar-nav-active-font-weight: var(--erp-font-weight-semibold); --erp-sidebar-submenu-font-size: var(--erp-font-size-base); --erp-sidebar-submenu-font-weight: var(--erp-font-weight-medium); --erp-sidebar-submenu-active-font-weight: var(--erp-font-weight-semibold); --erp-sidebar-nav-line-height: 1.3; /* Colors - Brand & Semantic (Slate/Blue Premium SaaS) */ --erp-color-primary-50: #eff6ff; --erp-color-primary-100: #dbeafe; --erp-color-primary-500: #3b82f6; --erp-color-primary-600: #2563eb; --erp-color-primary-700: #1d4ed8; --erp-color-success-50: #f0fdf4; --erp-color-success-500: #22c55e; --erp-color-success-600: #16a34a; --erp-color-danger-50: #fef2f2; --erp-color-danger-500: #ef4444; --erp-color-danger-600: #dc2626; --erp-color-warning-50: #fffbeb; --erp-color-warning-500: #f59e0b; --erp-color-warning-600: #d97706; /* Grays - Slate Scale */ --erp-color-slate-50: #f8fafc; --erp-color-slate-100: #f1f5f9; --erp-color-slate-200: #e2e8f0; --erp-color-slate-300: #cbd5e1; --erp-color-slate-400: #94a3b8; --erp-color-slate-500: #64748b; --erp-color-slate-600: #475569; --erp-color-slate-700: #334155; --erp-color-slate-800: #1e293b; --erp-color-slate-900: #0f172a; /* Theme Aliases */ --erp-color-primary: var(--erp-color-primary-600); --erp-color-primary-hover: var(--erp-color-primary-700); --erp-bg-page: var(--erp-color-slate-50); --erp-bg-surface: #ffffff; --erp-bg-surface-hover: var(--erp-color-slate-50); --erp-bg-surface-active: var(--erp-color-slate-100); /* Text Colors */ --erp-text-primary: var(--erp-color-slate-900); --erp-text-secondary: var(--erp-color-slate-600); --erp-text-tertiary: var(--erp-color-slate-500); --erp-text-inverse: #ffffff; /* Borders */ --erp-border-light: var(--erp-color-slate-100); --erp-border-default: var(--erp-color-slate-200); --erp-border-dark: var(--erp-color-slate-300); --erp-border-focus: var(--erp-color-primary-500); /* Border Radius */ --erp-radius-sm: 4px; --erp-radius-md: 6px; --erp-radius-lg: 8px; --erp-radius-xl: 12px; --erp-radius-full: 9999px; /* Shadows */ --erp-shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05); --erp-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.1), 0 2px 4px -1px rgba(15, 23, 42, 0.06); --erp-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -2px rgba(15, 23, 42, 0.05); --erp-shadow-focus: 0 0 0 3px var(--erp-color-primary-100); /* Spacing (Base 4px scale) */ --erp-space-1: 4px; --erp-space-2: 8px; --erp-space-3: 12px; --erp-space-4: 16px; --erp-space-5: 20px; --erp-space-6: 20px; --erp-space-8: 28px; --erp-space-10: 40px; --erp-space-12: 40px; /* Dimensions & Form Control Sizing Standards (Phase C4-B) */ --erp-control-height-standard: 34px; /* Primary standard ERP form control */ --erp-control-height-compact: 30px; /* Compact controls: toolbar, search, compact filters */ --erp-control-height-dense: 26px; /* Dense controls: tables, inline actions, dense interfaces */ --erp-control-height-lg: 40px; /* Touch-friendly / large control variant */ /* Compatibility Aliases */ --erp-control-height-md: var(--erp-control-height-standard); --erp-control-height-sm: var(--erp-control-height-compact); --erp-sidebar-width: 270px; --erp-sidebar-width-collapsed: 64px; --erp-header-height: 50px; /* Z-Index */ --erp-z-dropdown: 1000; --erp-z-sticky: 1020; --erp-z-fixed: 1030; --erp-z-modal-backdrop: 1040; --erp-z-modal: 1050; --erp-z-popover: 1060; --erp-z-tooltip: 1070; /* Transitions */ /* Duration-only tokens for consumers with an explicit easing choice. */ --erp-duration-fast: 150ms; --erp-duration-normal: 250ms; --erp-transition-fast: 150ms ease-in-out; --erp-transition-normal: 250ms ease-in-out; --erp-transition: var(--erp-transition-normal); /* ========================================================================== PHASE C2 CONSOLIDATION — EXTENDED SCALES & COMPATIBILITY ALIASES ========================================================================== */ /* Extended Color Palette Steps (P0 - DataTables, Components, Dashboard) */ --erp-color-white: #ffffff; /* Primary Scale Extended */ --erp-color-primary-200: #bfdbfe; --erp-color-primary-300: #93c5fd; --erp-color-primary-400: #60a5fa; --erp-color-primary-800: #1e40af; --erp-color-primary-900: #1e3a8a; /* Success Scale Extended */ --erp-color-success-100: #dcfce7; --erp-color-success-200: #bbf7d0; --erp-color-success-300: #86efac; --erp-color-success-400: #4ade80; --erp-color-success-700: #15803d; --erp-color-success-800: #166534; --erp-color-success-900: #14532d; /* Danger Scale Extended */ --erp-color-danger-100: #fee2e2; --erp-color-danger-200: #fecaca; --erp-color-danger-300: #fca5a5; --erp-color-danger-400: #f87171; --erp-color-danger-700: #b91c1c; --erp-color-danger-800: #991b1b; --erp-color-danger-900: #7f1d1d; /* Warning Scale Extended */ --erp-color-warning-100: #fef3c7; --erp-color-warning-200: #fde68a; --erp-color-warning-300: #fcd34d; --erp-color-warning-400: #fbbf24; --erp-color-warning-700: #b45309; --erp-color-warning-800: #92400e; --erp-color-warning-900: #78350f; /* -------------------------------------------------------------------------- Backward-Compatible Color, Text & Surface Aliases -------------------------------------------------------------------------- */ /* Red Aliases (referenced in erp-shell.css) */ --erp-color-red-50: var(--erp-color-danger-50); --erp-color-red-200: var(--erp-color-danger-200); --erp-color-red-300: var(--erp-color-danger-300); --erp-color-red-600: var(--erp-color-danger-600); /* Semantic Status Aliases */ --erp-color-error: var(--erp-color-danger-600); --erp-color-success: var(--erp-color-success-600); /* Navigation & Overlay Color Aliases */ --erp-color-text-main: var(--erp-text-primary); --erp-color-primary-dark: var(--erp-color-primary-700); --erp-color-primary-light: var(--erp-color-primary-50); --erp-primary-muted: var(--erp-color-primary-100); /* Text Color Aliases */ --erp-text: var(--erp-text-primary); --erp-text-body: var(--erp-text-primary); --erp-text-heading: var(--erp-text-primary); --erp-text-muted: var(--erp-text-secondary); --erp-text-main: var(--erp-text-primary); --erp-text-label: var(--erp-color-slate-700); /* Background & Surface Aliases */ --erp-bg-body: var(--erp-bg-page); --erp-bg-dark: var(--erp-color-slate-900); --erp-bg-hover: var(--erp-bg-surface-hover); --erp-bg-surface-muted: var(--erp-color-slate-100); --erp-surface-default: var(--erp-bg-surface); --erp-surface-hover: var(--erp-bg-surface-hover); /* Border Aliases */ --erp-border-color: var(--erp-border-default); --erp-border-subtle: var(--erp-border-light); /* -------------------------------------------------------------------------- Backward-Compatible Typography Aliases (P0 - Reset, Overlays, Templates) -------------------------------------------------------------------------- */ --erp-font-main: var(--erp-font-family); --erp-text-xs: var(--erp-font-size-xs); --erp-text-sm: var(--erp-font-size-sm); --erp-text-base: var(--erp-font-size-base); --erp-text-md: var(--erp-font-size-md); --erp-text-lg: var(--erp-font-size-lg); --erp-text-xl: var(--erp-font-size-xl); --erp-text-2xl: var(--erp-font-size-2xl); --erp-font-regular: var(--erp-font-weight-regular); --erp-font-medium: var(--erp-font-weight-medium); --erp-font-semibold: var(--erp-font-weight-semibold); --erp-font-bold: var(--erp-font-weight-bold); --erp-line-height-base: var(--erp-line-height-normal); /* -------------------------------------------------------------------------- Phase C3: Central Semantic Typography Hierarchy (Sidebar & Admission Benchmarks) -------------------------------------------------------------------------- */ --erp-font-size-hero: 19px; /* Entity hero title (e.g. Student 360 name), primary profile KPI values */ --erp-font-size-page-title: var(--erp-font-size-xl, 18px); --erp-font-size-section: 15px; --erp-font-size-card: var(--erp-font-size-md, 14px); --erp-font-size-subcard: 13.5px; --erp-font-size-widget: 12.5px; /* Widgets, tab navigation, dropdown items */ --erp-font-size-label-sm: 11.5px; --erp-font-size-micro: 10.5px; /* Micro labels, compact badges, tertiary metadata, step indicators */ --erp-font-size-form-label: 13px; --erp-font-weight-form-label: 600; /* Canonical form label weight (reset: 500 preserved for P3) */ --erp-font-size-form-control: 13.5px; --erp-font-size-form-help: 12px; --erp-font-size-form-error: 12px; --erp-color-form-label: var(--erp-color-slate-700, #334155); --erp-border-form-control: var(--erp-border-default, #cbd5e1); --erp-focus-ring-form: 0 0 0 3px rgba(37, 99, 235, 0.15); --erp-font-size-btn: var(--erp-font-size-base, 13px); --erp-font-size-table-th: 11.5px; /* Canonical table header font size */ --erp-font-size-table-td: var(--erp-font-size-base, 13px); --erp-font-size-badge: var(--erp-font-size-xs, 11px); --erp-font-size-helper: 11.5px; --erp-font-size-breadcrumb: var(--erp-font-size-sm, 12px); --erp-letter-spacing-tight: -0.015em; --erp-letter-spacing-normal: 0em; --erp-letter-spacing-wide: 0.04em; --erp-letter-spacing-wider: 0.06em; /* -------------------------------------------------------------------------- Spacing Aliases & Refined Rhythm (P1 - Shell, Tables, Dashboard) -------------------------------------------------------------------------- */ --erp-space-1-5: 6px; --erp-space-2-5: 10px; --erp-spacing-4: var(--erp-space-4); --space-12: var(--erp-space-3); --space-16: var(--erp-space-4); --space-24: var(--erp-space-6); /* -------------------------------------------------------------------------- Shell, Table & Component Fallbacks -------------------------------------------------------------------------- */ --header-backdrop: rgba(255, 255, 255, 0.85); --header-border: var(--erp-border-light); --header-height: var(--erp-header-height); --sidebar-shadow: var(--erp-shadow-md); --erp-rtable-tablet-min-width: 640px; --bs-warning: var(--erp-color-warning-500); /* ========================================================================== PHASE C5-B: SHARED COMPONENT TOKENS (Cards, Buttons, Badges, Tables) ========================================================================== */ /* Info / Sky Palette */ --erp-color-info-50: #f0f9ff; --erp-color-info-100: #e0f2fe; --erp-color-info-200: #bae6fd; --erp-color-info-500: #0ea5e9; --erp-color-info-600: #0284c7; --erp-color-info-700: #0369a1; /* A. Semantic Card Tokens */ --erp-card-bg: var(--erp-bg-surface, #ffffff); --erp-card-border: 1px solid var(--erp-border-default, #e2e8f0); --erp-card-radius: var(--erp-radius-md, 6px); --erp-card-shadow: var(--erp-shadow-sm, 0 1px 2px 0 rgba(15, 23, 42, 0.05)); --erp-card-header-padding: 8px 12px; --erp-card-body-padding: 12px; --erp-card-footer-padding: 8px 12px; --erp-card-title-font-size: var(--erp-font-size-card, 14px); --erp-card-title-font-weight: var(--erp-font-weight-semibold, 600); /* B. Semantic Button Tokens */ --erp-btn-height: var(--erp-control-height-standard, 38px); --erp-btn-height-sm: var(--erp-control-height-compact, 34px); --erp-btn-height-dense: var(--erp-control-height-dense, 28px); --erp-btn-height-lg: var(--erp-control-height-lg, 44px); --erp-btn-font-size: var(--erp-font-size-btn, 13px); --erp-btn-font-size-sm: var(--erp-font-size-sm, 12px); --erp-btn-font-weight: var(--erp-font-weight-medium, 500); --erp-btn-radius: var(--erp-radius-md, 6px); --erp-btn-padding-x: 16px; --erp-btn-padding-x-sm: 12px; --erp-btn-gap: var(--erp-space-2, 8px); /* C. Semantic Badge Tokens */ --erp-radius-xs: 4px; --erp-badge-font-size: var(--erp-font-size-xs, 11px); --erp-badge-font-weight: var(--erp-font-weight-semibold, 600); --erp-badge-padding: 2px 8px; --erp-badge-radius: var(--erp-radius-full, 9999px); --erp-badge-radius-rounded: var(--erp-radius-xs, 4px); /* D. Semantic Table Tokens */ --erp-table-header-bg: var(--erp-color-slate-50, #f8fafc); --erp-table-header-color: var(--erp-color-slate-600, #475569); --erp-table-header-font-size: var(--erp-font-size-table-th, 11.5px); /* Canonical table header font size alias */ --erp-table-header-font-weight: var(--erp-font-weight-semibold, 600); --erp-table-header-padding: 8px 12px; --erp-table-cell-padding: 8px 12px; --erp-table-cell-padding-dense: 6px 10px; --erp-table-border-color: var(--erp-border-default, #e2e8f0); --erp-table-hover-bg: var(--erp-bg-surface-hover, #f8fafc); } /* Theme Support */ body.theme-green { --erp-color-primary-50: #f0fdf4; --erp-color-primary-100: #dcfce7; --erp-color-primary-500: #22c55e; --erp-color-primary-600: #16a34a; --erp-color-primary-700: #15803d; } body.theme-purple { --erp-color-primary-50: #faf5ff; --erp-color-primary-100: #f3e8ff; --erp-color-primary-500: #a855f7; --erp-color-primary-600: #9333ea; --erp-color-primary-700: #7e22ce; } /* Desktop workspace density. Preserve typography, control heights, and the base spacing scale; touch and narrow layouts retain their existing sizes. */ @media (min-width: 992px) and (pointer: fine) { body.erp-shell { --erp-workspace-padding: 12px; --erp-page-padding: 12px; --erp-page-header-gap: 12px; --erp-page-header-margin: 12px; --erp-page-header-padding: 8px; --erp-toolbar-padding: 8px; --erp-toolbar-margin: 12px; --erp-form-field-margin: 8px; --erp-form-row-gap: 12px; --erp-table-header-padding: 6px 10px; --erp-table-cell-padding: 6px 10px; --erp-btn-padding-x: 12px; --erp-dashboard-kpi-height: 96px; --erp-dashboard-kpi-gap: 10px; --erp-dashboard-rail-width: 300px; } }