/* ════════════════════════════════════════════════════════════ RateFlow — Light Theme Theme Inspired by modern enterprise design: - Deep navy blue brand palette - Clean, professional B2B SaaS aesthetic - High contrast, data-driven layouts - Trust-building visual signals Activated via: ════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════ FRONTEND TOKENS — Override design-system.css ════════════════════════════════════════════════════════════ */ html[data-theme="light"] { /* ══ Brand Colors ══ */ --freightos-navy: #0a1628; --freightos-navy-light: #0f2444; --freightos-blue: #0066cc; --freightos-blue-dark: #004d99; --freightos-blue-light: #e8f3ff; --freightos-orange: #ff6b35; /* ══ Colors — Backgrounds ══ */ --bg-primary: #f5f7fa; --bg-card: #ffffff; --bg-dropdown: #ffffff; /* ══ Colors — Accent ══ */ --color-accent: #0066cc; /* ══ Colors — Text ══ */ --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #94a3b8; --text-muted-solid: #94a3b8; /* ══ Colors — Borders ══ */ --border-subtle: #e2e8f0; --border-hover: #cbd5e1; --border-hint: #f1f5f9; /* ══ Colors — State ══ */ --color-danger: #dc2626; --color-danger-hover: rgba(220,38,38,0.08); --color-success: #059669; /* ══ Interaction ══ */ --hover-bg: rgba(0,102,204,0.06); --hover-bg-strong: rgba(0,102,204,0.1); --hover-bg-input: rgba(0,102,204,0.04); --hover-bg-nav: rgba(0,102,204,0.05); --hover-scale: 1; --active-scale: 0.98; --focus-ring: 0 0 0 3px rgba(0,102,204,0.12); --focus-bg: rgba(0,102,204,0.02); --transition-fast: 0.15s ease; --transition-normal: 0.25s ease; /* ══ Shadows ══ */ --shadow-dropdown: 0 4px 20px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04); --shadow-hover: 0 2px 8px rgba(0,0,0,0.06); --shadow-accent-sm: 0 2px 8px rgba(0,102,204,0.2); --shadow-accent-md: 0 4px 16px rgba(0,102,204,0.25); /* ══ Opacity ══ */ --opacity-disabled: 0.45; --opacity-other-month: 0.3; --opacity-other-month-hover: 0.5; --opacity-disabled-cell: 0.35; /* ══ Base Input ══ */ --input-bg: #ffffff; --input-bg-focus: #ffffff; --input-border: #e2e8f0; --input-focus-border: var(--color-accent); --input-focus-shadow: var(--focus-ring); --input-color: #0f172a; --input-placeholder: #94a3b8; --input-height: 40px; --input-radius: 8px; /* ══ Dropdown ══ */ --dropdown-bg: #ffffff; --dropdown-border: #e2e8f0; --dropdown-radius: 10px; --dropdown-shadow: 0 8px 32px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.04); --dropdown-padding: 6px; /* ══ Dropdown Option ══ */ --option-height: 36px; --option-color: #475569; --option-hover-bg: var(--hover-bg); --option-selected-bg: var(--hover-bg-strong); --option-selected-color: #0f172a; --option-radius: 6px; /* ══ Button ══ */ --btn-height: 40px; --btn-radius: 8px; --btn-font-size: 13px; --btn-primary-gradient: linear-gradient(135deg, #0066cc, #004d99); --btn-primary-shadow: 0 1px 3px rgba(0,102,204,0.25); --btn-primary-shadow-hover: 0 4px 12px rgba(0,102,204,0.35); --btn-secondary-bg: #f1f5f9; --btn-secondary-border: #e2e8f0; --btn-secondary-color: #475569; --btn-secondary-hover-bg: #e2e8f0; --btn-secondary-hover-border: #cbd5e1; --btn-ghost-hover-bg: #f1f5f9; /* ══ Button — Danger ══ */ --btn-danger-bg: rgba(220,38,38,0.06); --btn-danger-border: rgba(220,38,38,0.15); --btn-danger-color: #dc2626; --btn-danger-hover-bg: rgba(220,38,38,0.1); /* ══ Date Picker ══ */ --date-quick-btn-height: 28px; --date-quick-btn-font-size: 12px; --date-quick-btn-bg: #f1f5f9; --date-quick-btn-border: #e2e8f0; --date-quick-btn-color: #475569; --date-quick-btn-radius: 6px; --date-quick-btn-hover-bg: var(--color-accent); --date-cell-radius: 6px; --date-cell-hover-bg: rgba(0,102,204,0.1); --date-cell-selected-bg: var(--color-accent); --date-cell-today-border: var(--color-accent); --date-cell-today-color: var(--color-accent); --date-cell-color: #475569; --date-nav-btn-size: 30px; --date-nav-btn-color: #64748b; --date-nav-btn-hover-bg: #f1f5f9; --date-nav-btn-radius: var(--date-cell-radius); --date-weekday-color: #94a3b8; --date-footer-border: #e2e8f0; --date-footer-btn-border: #e2e8f0; --date-footer-btn-color: #94a3b8; --date-footer-btn-hover-border: #dc2626; --date-footer-btn-hover-color: #dc2626; --date-footer-btn-hover-bg: rgba(220,38,38,0.06); /* ══ Radius ══ */ --radius-base: 8px; --radius-sm: 6px; --radius-md: 10px; /* ══ Table — Rate Decision Interface ══ */ --table-radius: var(--radius-md); --table-header-bg: #f8fafc; --table-row-bg: transparent; --table-row-hover-bg: rgba(0,102,204,0.04); --table-row-hover-shadow: none; --table-row-border: #f1f5f9; --table-cell-padding-comfortable: var(--space-lg) var(--space-lg); --table-cell-padding-compact: var(--space-md) var(--space-md); --table-font-size: var(--font-size-base); --table-header-font-size: var(--font-size-xs); /* ══ Table — Info Hierarchy ══ */ --table-primary-weight: 600; --table-primary-size: var(--font-size-lg); --table-secondary-weight: 400; --table-secondary-size: var(--font-size-sm); --table-secondary-color: #64748b; --table-tertiary-weight: 400; --table-tertiary-size: var(--font-size-xs); /* ══ Table — Status Colors ══ */ --table-status-normal-bg: rgba(5,150,105,0.1); --table-status-normal-color: #059669; --table-status-normal-text: #059669; --table-status-warning-bg: rgba(217,119,6,0.1); --table-status-warning-color: #d97706; --table-status-warning-text: #d97706; --table-status-expired-bg: rgba(148,163,184,0.1); --table-status-expired-color: #94a3b8; --table-status-expired-text: #94a3b8; /* ══ Table — Hover Actions ══ */ --table-action-btn-size: 30px; --table-action-btn-radius: 6px; --table-action-btn-color: #94a3b8; --table-action-btn-hover-bg: #f1f5f9; --table-action-btn-hover-color: #0f172a; /* ══ Table — Density (Compact) ══ */ --table-compact-padding: var(--space-md) var(--space-md); --table-compact-gap: 0; --table-compact-font-size: var(--font-size-sm); /* ══ Fix: --bg-elevated missing in design-system.css ══ */ --bg-elevated: #f8fafc; } /* ════════════════════════════════════════════════════════════ COMPONENT-SPECIFIC OVERRIDES Override any hardcoded values or component-specific styles ════════════════════════════════════════════════════════════ */ html[data-theme="light"] { /* ── Dropdown option code badge ── */ .ds-option-code { background: #f1f5f9; color: #475569; } /* ── Port code destination badge ── */ .ds-port-code--dest { background: rgba(5,150,105,0.1); color: #059669; } /* ── Dropdown hint ── */ .ds-hint { background: #f8fafc; border-top-color: #e2e8f0; color: #94a3b8; } /* ── Date quick button hover ── */ .ds-date-quick-btn:hover { color: #ffffff; } /* ── Date cell selected ── */ .ds-date-cell--selected { color: #ffffff !important; } /* ── Date footer ── */ .ds-date-footer-btn { color: #94a3b8; } .ds-date-footer-btn:hover { border-color: #dc2626; color: #dc2626; } /* ── Scrollbar ── */ .ds-scrollbar::-webkit-scrollbar-thumb, .ds-dropdown::-webkit-scrollbar-thumb, .ps-dropdown::-webkit-scrollbar-thumb { background: #cbd5e1; } } /* ════════════════════════════════════════════════════════════ INDEX.HTML INLINE STYLE OVERRIDES Override variables that index.html sets in its