/* * Pro Kinetics Design System - Enhanced Design Tokens * Comprehensive style guide based on FTA Center patterns * Version: 2.2 - Inter font moved to base.html preload (non-render-blocking) */ /* Inter font is loaded via preload/preconnect in base.html — see . */ :root { /* ================================ * BRAND COLORS — PK Slate & Orange * Aligned to prokinetics.com.au palette * ================================ */ /* Primary: PK Slate (from PK website footer #252f36) */ --pk-slate: #252f36; --pk-slate-light: #36454f; --pk-slate-dark: #1b2228; --pk-slate-lighter: #5a6872; /* Accent: PK Orange (established FlowDocs brand) */ --pk-orange: #e5641a; --pk-orange-light: #f2783a; --pk-orange-dark: #c8520e; --pk-orange-darker: #a84409; --pk-orange-subtle: rgba(229, 100, 26, 0.06); --pk-orange-muted: #e5925c; --pk-orange-hover: #c8520e; /* Brand accent — resolves to orange */ --pk-accent: var(--pk-orange); --pk-accent-light: var(--pk-orange-light); --pk-accent-dark: var(--pk-orange-dark); --pk-accent-subtle: var(--pk-orange-subtle); --pk-accent-hover: var(--pk-orange-hover); /* Extended palette (kept for components that reference them) */ --pk-blue: #5b7fa5; --pk-blue-light: #7a9ab8; --pk-blue-dark: #3d6083; --pk-blue-subtle: #eaf0f7; --pk-blue-muted: #8aabc4; --pk-teal: #3d7a7a; --pk-teal-light: #5a9a9a; --pk-teal-dark: #2d5a5a; --pk-teal-subtle: #e8f2f2; --pk-teal-muted: #7aabab; --pk-plum: #7a5a6a; --pk-plum-light: #9a7a8a; --pk-plum-dark: #5a3a4a; --pk-plum-subtle: #f2eaee; --pk-plum-muted: #ab8a9a; --pk-steel: #5a7a8a; --pk-steel-light: #7a9aaa; --pk-steel-dark: #3a5a6a; --pk-steel-subtle: #eaf0f4; --pk-steel-muted: #8aabba; /* Brand Citrine Palette (retained for dark mode accent) */ --pk-citrine: #f2c200; --pk-citrine-light: #f5d24d; --pk-citrine-dark: #d4aa00; --pk-citrine-darker: #b08e00; --pk-citrine-subtle: #fdf8e8; --pk-citrine-muted: #e0c94d; /* Neutral Palette — retained for surface/sage tokens */ --pk-slate-darker: #171b1e; --pk-slate-subtle: #f4f6f7; /* Surface Colors - Expanded hierarchy */ --pk-white: #ffffff; --pk-off-white: #fdfdfe; --pk-neutral-bg: #f5f5f4; --pk-neutral-border: #e7e5e4; --pk-surface-1: #ffffff; --pk-surface-2: #fafaf9; --pk-surface-3: #f5f5f4; --pk-surface-4: #e7e5e4; /* Sage color system (from design-system.css) */ --pk-sage: #e2e6e3; --pk-sage-light: #eff1f0; --pk-sage-dark: #d1d6d2; /* ================================ * SEMANTIC COLORS — Ink-Adjacent * Muted, sophisticated tones * ================================ */ --pk-success: #16a34a; --pk-success-light: #f0fdf4; --pk-success-dark: #166534; --pk-success-600: #16a34a; --pk-success-700: #15803d; --pk-warning: #d97706; --pk-warning-light: #fffbeb; --pk-warning-dark: #92400e; --pk-warning-600: #d97706; --pk-warning-700: #b45309; --pk-error: #dc2626; --pk-error-light: #fef2f2; --pk-error-dark: #991b1b; --pk-error-600: #dc2626; --pk-error-700: #b91c1c; --pk-info: #2563eb; --pk-info-light: #eff6ff; --pk-info-dark: #1e40af; --pk-info-600: #2563eb; --pk-info-700: #1d4ed8; /* Caution (needs_review / retry) */ --pk-caution-light: #fffbeb; --pk-caution-dark: #92400e; /* Dark-mode accent tokens (light-mode values = same as base) */ --pk-green-accent: var(--pk-slate); --pk-green-muted-hover: var(--pk-slate-light); --pk-blue-accent: var(--pk-blue); --pk-success-accent: var(--pk-success); --pk-error-accent: var(--pk-error); --pk-warning-accent: var(--pk-warning); --pk-error-border: #f5cece; --pk-warning-border: #f5dfa0; --pk-plum-dark-bg: var(--pk-plum-subtle); --pk-plum-accent: var(--pk-plum); --pk-orange-dark-bg: var(--pk-orange-subtle); --pk-btn-text: var(--pk-white); --pk-emerald-600: #3d7a5a; /* Gray Scale - Stone */ --pk-gray-50: #fafaf9; --pk-gray-100: #f5f5f4; --pk-gray-200: #e7e5e4; --pk-gray-300: #d6d3d1; --pk-gray-400: #a8a29e; --pk-gray-500: #78716c; --pk-gray-600: #57534e; --pk-gray-700: #44403c; --pk-gray-800: #292524; --pk-gray-900: #1c1917; /* Semantic Aliases */ --color-background-muted: var(--pk-gray-100); --color-text-muted: var(--pk-gray-500); --color-text-placeholder: var(--pk-gray-400); --color-border: var(--pk-gray-200); --color-border-light: var(--pk-gray-300); --color-surface-subtle: var(--pk-gray-50); /* Table Component Tokens — Modern SaaS */ --table-cell-padding: 12px 16px; --table-cell-padding-compact: 8px 12px; --table-header-bg: var(--pk-gray-50); --table-header-border: var(--pk-gray-200); --table-border: var(--pk-gray-200); --table-row-hover: #faf8f5; --table-row-stripe: var(--pk-gray-50); --table-sorted-tint: rgba(229, 100, 26, 0.06); /* ================================ * TYPOGRAPHY SCALE - FTA Center optimized * ================================ */ /* Font Families - Modern Inter + System Stack */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, "Liberation Mono", monospace; --font-heading: var(--font-sans); --font-body: var(--font-sans); /* Data display - uses Inter with tabular numerals for aligned numbers */ --font-data: var(--font-sans); /* Font Sizes — complete scale with gap-filling tokens * T-shirt scale (unchanged): 2xs–5xl * Semantic tokens (new): micro, caption, label — fill 10/12/14px gaps */ --text-2xs: 0.5625rem; /* 9px */ --text-micro: 0.625rem; /* 10px — trend badges, compact labels */ --text-xs: 0.6875rem; /* 11px — table headers, compact data */ --text-caption: 0.75rem; /* 12px — secondary text, timestamps */ --text-sm: 0.8125rem; /* 13px — body text, table cells */ --text-label: 0.875rem; /* 14px — form labels, nav items */ --text-base: 0.9375rem; /* 15px — base body size */ --text-md: 1rem; /* 16px */ --text-lg: 1.0625rem; /* 17px */ --text-xl: 1.125rem; /* 18px */ --text-2xl: 1.375rem; /* 22px */ --text-3xl: 1.625rem; /* 26px */ --text-4xl: 2rem; /* 32px */ --text-5xl: 2.5rem; /* 40px */ /* Line Heights - Optimized for density */ --leading-none: 1; --leading-tight: 1.2; --leading-snug: 1.3; --leading-normal: 1.4; --leading-relaxed: 1.5; --leading-loose: 1.6; /* Font Weights */ --font-light: 300; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; /* Letter Spacing */ --tracking-tight: -0.025em; --tracking-normal: 0; --tracking-wide: 0.025em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; /* ================================ * SPACING SCALE - Enhanced * ================================ */ --space-0: 0; --space-1: 0.1875rem; /* 3px */ --space-2: 0.375rem; /* 6px */ --space-3: 0.5625rem; /* 9px */ --space-4: 0.75rem; /* 12px */ --space-5: 1rem; /* 16px */ --space-6: 1.25rem; /* 20px */ --space-7: 1.5rem; /* 24px */ --space-8: 1.75rem; /* 28px */ --space-10: 2.25rem; /* 36px */ --space-12: 2.75rem; /* 44px */ --space-16: 3.5rem; /* 56px */ --space-20: 4.5rem; /* 72px */ /* ================================ * BORDER RADIUS - FTA Center pattern * ================================ */ --radius-none: 0; --radius-sm: 0.125rem; /* 2px */ --radius-base: 0.25rem; /* 4px */ /* Minimum pointer target (WCAG 2.2 AA, 2.5.8). The floor for controls that get no button box — native checkboxes render ~13px untouched. */ --target-min: 1.5rem; /* 24px */ /* Painted checkbox box for dense contexts. Legitimate ONLY where a wrapping label carries --target-min as its own min-width/min-height. */ --checkbox-size-compact: 1rem; /* 16px */ --radius-md: 0.375rem; /* 6px */ --radius-lg: 0.5rem; /* 8px */ --radius-xl: 0.75rem; /* 12px */ --radius-2xl: 1rem; /* 16px */ --radius-full: 9999px; /* ================================ * SHADOWS - FTA Center optimized * ================================ */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-base: 0 2px 4px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.03); --shadow-lg: 0 6px 16px -4px rgba(0, 0, 0, 0.1); --shadow-xl: 0 12px 24px -6px rgba(0, 0, 0, 0.12); --shadow-2xl: 0 20px 40px -8px rgba(0, 0, 0, 0.15); --shadow-inner: inset 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* FTA Center specific shadows */ --shadow-orange: 0 4px 12px rgba(229, 100, 26, 0.25); --shadow-orange-subtle: 0 2px 8px rgba(229, 100, 26, 0.15); --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.06); /* Focus ring tokens - standardized across all components */ --shadow-focus-ring: 0 0 0 3px rgba(229, 100, 26, 0.1); --shadow-focus-ring-error: 0 0 0 3px rgba(239, 68, 68, 0.2); /* Overlay tokens */ --overlay-backdrop: rgba(0, 0, 0, 0.5); --overlay-loading: rgba(255, 255, 255, 0.8); /* Environment warning tokens */ --env-warning-bg: #fef3f2; --env-warning-text: #c1121f; --env-warning-border: #fecdca; /* Disputed badge border */ --badge-disputed-border: #fcd34d; /* ================================ * TRANSITIONS - Enhanced for interactions * ================================ */ --transition-fast: 150ms ease-in-out; --transition-base: 250ms ease-in-out; --transition-slow: 400ms ease-in-out; --transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1); --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); /* ================================ * Z-INDEX SCALE * ================================ */ --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; --z-toast: 1080; /* ================================ * COMPONENT SIZING - FTA Center patterns * ================================ */ /* Form Controls */ --input-height-sm: 32px; --input-height-base: 38px; --input-height-lg: 44px; /* Buttons */ --btn-height-sm: 32px; --btn-height-base: 38px; --btn-height-lg: 44px; /* Touch targets for mobile */ --touch-target: 44px; /* ================================ * BREAKPOINTS * ================================ */ --breakpoint-xs: 0; --breakpoint-sm: 576px; --breakpoint-md: 768px; --breakpoint-lg: 992px; --breakpoint-xl: 1200px; --breakpoint-xxl: 1400px; /* ================================ * Redesign v2 additions * ================================ */ --stone-50: var(--pk-gray-50); --stone-100: var(--pk-gray-100); --stone-200: var(--pk-gray-200); --stone-300: var(--pk-gray-300); --stone-400: var(--pk-gray-400); --stone-500: var(--pk-gray-500); --stone-600: var(--pk-gray-600); --stone-700: var(--pk-gray-700); --stone-800: var(--pk-gray-800); --stone-900: var(--pk-gray-900); --container-max-width: 1200px; --header-height: 56px; --header-bg: #ffffff; --header-border: var(--pk-gray-200); --page-bg: var(--pk-gray-100); } /* ================================ * MOBILE RESPONSIVE TOKENS * ================================ */ /* Small mobile devices (portrait phones, up to 575.98px) */ @media (max-width: 575.98px) { :root { /* Optimized mobile typography — smaller for density */ --text-2xs: 0.5rem; /* 8px */ --text-micro: 0.5625rem; /* 9px */ --text-xs: 0.625rem; /* 10px */ --text-caption: 0.6875rem; /* 11px */ --text-sm: 0.75rem; /* 12px */ --text-label: 0.8125rem; /* 13px */ --text-base: 0.8125rem; /* 13px */ --text-md: 0.875rem; /* 14px */ --text-lg: 0.9375rem; /* 15px */ --text-xl: 1rem; /* 16px */ --text-2xl: 1.125rem; /* 18px */ /* Adjusted spacing for mobile */ --space-card-mobile: var(--space-4); --space-section-mobile: var(--space-6); /* Touch-optimized sizing */ --input-height-base: var(--touch-target); --btn-height-base: var(--touch-target); --btn-height-sm: 40px; } } /* Dark mode overrides are in dark-mode.css */ /* ================================ * ACCESSIBILITY TOKENS * ================================ */ /* High contrast mode support */ @media (prefers-contrast: high) { :root { --shadow-focus: 0 0 0 3px var(--pk-orange); --border-focus: 2px solid var(--pk-orange); } } /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0.01ms; --transition-base: 0.01ms; --transition-slow: 0.01ms; --transition-smooth: 0.01ms; } }