/* ============================================================================= CargoMex Design Tokens — Control Tower Premium Source: deep-research-report.md (Apple HIG + Material + WCAG 2.1 AA) ============================================================================= */ :root { /* ---------- SURFACES ---------- */ --bg-canvas: #F5F7FB; --bg-surface: #FFFFFF; --bg-surface-alt: #FAFBFD; /* zebra rows, subtle hover */ --bg-glass: rgba(255, 255, 255, 0.78); --bg-glass-strong: rgba(255, 255, 255, 0.92); --bg-overlay: rgba(15, 23, 42, 0.42); /* ---------- TEXT ---------- */ --text-primary: #0F172A; /* contrast 17.9:1 on white */ --text-secondary: #475467; /* 7.7:1 */ --text-tertiary: #667085; /* metadata */ --text-inverse: #FFFFFF; --text-disabled: #98A2B3; --text-link: #4338CA; --text-link-hover: #3730A3; /* ---------- BRAND ---------- */ --brand-primary: #4338CA; /* indigo 700 — CTAs, focus, selection */ --brand-primary-hover: #3730A3; --brand-primary-soft: #EEF0FE; /* backgrounds for soft chips */ --brand-secondary: #1D4ED8; /* nav, links, info accent */ --brand-tertiary: #5B5BD6; --gradient-brand: linear-gradient(135deg, #4338CA 0%, #5B5BD6 45%, #60A5FA 100%); --gradient-brand-soft: linear-gradient(135deg, rgba(67,56,202,0.08) 0%, rgba(96,165,250,0.08) 100%); /* ---------- STATE ---------- */ --state-success: #157F3B; /* dentro SLA */ --state-success-soft: #E8F5EC; --state-warning: #B35A00; /* approaching SLA */ --state-warning-soft: #FDF1E1; --state-danger: #C81E1E; /* critical, blocked */ --state-danger-soft: #FBE9E9; --state-info: #0369A1; --state-info-soft: #E1F0FA; --state-neutral: #475467; --state-neutral-soft: #EEF0F4; /* Heatmap escala */ --heat-low: #157F3B; /* <70% */ --heat-mid: #B35A00; /* 70-85 */ --heat-high: #D97706; /* 85-95 */ --heat-critical: #C81E1E; /* >95 */ --heat-blocked: #94A3B8; /* ---------- BORDERS ---------- */ --border-subtle: rgba(15, 23, 42, 0.08); --border-default: rgba(15, 23, 42, 0.14); --border-strong: rgba(15, 23, 42, 0.22); --border-focus: rgba(67, 56, 202, 0.55); --border-glass: rgba(255, 255, 255, 0.55); /* ---------- RADIUS ---------- */ --radius-control: 12px; --radius-card: 20px; --radius-panel: 24px; --radius-pill: 999px; --radius-xs: 6px; /* ---------- SPACE ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ---------- SHADOWS ---------- */ --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06); --shadow-md: 0 10px 24px rgba(15, 23, 42, 0.10); --shadow-lg: 0 20px 48px rgba(15, 23, 42, 0.14); --shadow-focus: 0 0 0 4px rgba(67, 56, 202, 0.18); --shadow-success-glow: 0 0 0 4px rgba(21, 127, 59, 0.16); --shadow-danger-glow: 0 0 0 4px rgba(200, 30, 30, 0.16); /* ---------- BLUR (glass surfaces) ---------- */ --blur-glass: 14px; --blur-glass-soft: 10px; /* ---------- TYPOGRAPHY ---------- */ --font-primary: "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-tabular: "IBM Plex Sans", "Segoe UI", Roboto, Arial, sans-serif; --font-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Type scale (size / line-height / weight) */ --type-page-title-size: 32px; --type-page-title-lh: 40px; --type-page-title-weight: 650; --type-page-subtitle-size: 16px; --type-page-subtitle-lh: 24px; --type-page-subtitle-weight: 500; --type-section-size: 24px; --type-section-lh: 32px; --type-section-weight: 650; --type-panel-size: 18px; --type-panel-lh: 24px; --type-panel-weight: 600; --type-kpi-primary-size: 36px; --type-kpi-primary-lh: 40px; --type-kpi-primary-weight: 700; --type-kpi-secondary-size: 24px; --type-kpi-secondary-lh: 32px; --type-kpi-secondary-weight: 600; --type-label-size: 14px; --type-label-lh: 20px; --type-label-weight: 600; --type-body-size: 14px; --type-body-lh: 20px; --type-body-weight: 400; --type-tabular-size: 13px; --type-tabular-lh: 18px; --type-tabular-weight: 450; --type-micro-size: 12px; --type-micro-lh: 16px; --type-micro-weight: 500; /* ---------- MOTION ---------- */ --motion-micro: 120ms; /* value updates */ --motion-hover: 160ms; /* hover/focus */ --motion-fast: 180ms; --motion-drawer: 220ms; /* drawers, sheets */ --motion-spring: cubic-bezier(0.22, 1, 0.36, 1); --motion-ease: cubic-bezier(0.4, 0, 0.2, 1); /* ---------- LAYOUT ---------- */ --shell-topnav-h: 72px; --shell-rail-w: 256px; --shell-rail-w-collapsed: 88px; --shell-rightrail-w: 360px; --shell-filterbar-h: 56px; --shell-grid-gap: 24px; /* ---------- Z-INDEX ---------- */ --z-base: 1; --z-sticky: 20; --z-rail: 30; --z-topnav: 40; --z-dropdown: 3000; /* above all sticky chrome */ --z-drawer: 5000; --z-modal: 9000; /* highest UI layer, except toast */ --z-toast: 9500; } /* Dark theme overrides — not the focus of this redesign but kept consistent */ [data-theme="dark"] { --bg-canvas: #0B1020; --bg-surface: #131A2C; --bg-surface-alt: #182142; --bg-glass: rgba(19, 26, 44, 0.78); --bg-glass-strong: rgba(19, 26, 44, 0.92); --text-primary: #F1F5F9; --text-secondary: #B8C0D9; --text-tertiary: #94A3B8; --text-inverse: #0F172A; --border-subtle: rgba(255, 255, 255, 0.08); --border-default: rgba(255, 255, 255, 0.14); --border-strong: rgba(255, 255, 255, 0.22); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30); --shadow-md: 0 10px 24px rgba(0, 0, 0, 0.40); --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55); } /* High contrast preference */ @media (prefers-contrast: more) { :root { --border-subtle: rgba(15, 23, 42, 0.20); --border-default: rgba(15, 23, 42, 0.32); } } /* Reduced motion preference */ @media (prefers-reduced-motion: reduce) { :root { --motion-micro: 0ms; --motion-hover: 0ms; --motion-fast: 0ms; --motion-drawer: 0ms; } *, *::before, *::after { animation-duration: 0ms !important; transition-duration: 0ms !important; } }