/* ════════════════════════════════════════════════════════════ RateFlow — Slate Indigo Light Theme A crafted light theme with layered depth and refined color. - Slate gray-blue base — no dead white - Indigo accent — brand unified with dark theme - Four-layer elevation system - Subtle but meaningful depth Activated via: ════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════ FRONTEND TOKENS — Override design-system.css ════════════════════════════════════════════════════════════ */ html[data-theme="light"] { /* ══ Brand Colors — Indigo unified with dark theme ══ */ --freightos-navy: #111827; --freightos-navy-light: #1e293b; --freightos-blue: #4f6ef7; --freightos-blue-dark: #3a4fd9; --freightos-blue-light: #eef1ff; --freightos-orange: #ff6b35; /* ══ Colors — Background Layer System ══ */ --bg-primary: #f4f6f9; --bg-card: #ffffff; --bg-dropdown: #ffffff; /* ══ Colors — Accent ══ */ --color-accent: #4f6ef7; /* ══ Colors — Text ══ */ --text-primary: #111827; --text-secondary: #4b5563; --text-muted: #9ca3af; --text-muted-solid: #9ca3af; /* ══ Colors — Borders ══ */ --border-subtle: #e5e7eb; --border-hover: #d1d5db; --border-hint: #f1f5f9; /* ══ Colors — State ══ */ --color-danger: #dc2626; --color-danger-hover: rgba(220,38,38,0.08); --color-success: #059669; /* ══ Interaction ══ */ --hover-bg: rgba(79,110,247,0.06); --hover-bg-strong: rgba(79,110,247,0.1); --hover-bg-input: rgba(79,110,247,0.04); --hover-bg-nav: rgba(79,110,247,0.05); --hover-scale: 1; --active-scale: 0.98; --focus-ring: 0 0 0 3px rgba(79,110,247,0.12); --focus-bg: rgba(79,110,247,0.02); --transition-fast: 0.15s ease; --transition-normal: 0.25s ease; /* ══ Shadows — Layered elevation ══ */ --shadow-dropdown: 0 8px 32px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.03); --shadow-hover: 0 2px 8px rgba(0,0,0,0.06); --shadow-accent-sm: 0 2px 8px rgba(79,110,247,0.2); --shadow-accent-md: 0 4px 16px rgba(79,110,247,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: #e5e7eb; --input-focus-border: var(--color-accent); --input-focus-shadow: var(--focus-ring); --input-color: #111827; --input-placeholder: #9ca3af; --input-height: 40px; --input-radius: 8px; /* ══ Dropdown ══ */ --dropdown-bg: #ffffff; --dropdown-border: #e5e7eb; --dropdown-radius: 10px; --dropdown-shadow: 0 8px 32px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.03); --dropdown-padding: 6px; /* ══ Dropdown Option ══ */ --option-height: 36px; --option-color: #4b5563; --option-hover-bg: var(--hover-bg); --option-selected-bg: var(--hover-bg-strong); --option-selected-color: #111827; --option-radius: 6px; /* ══ Button ══ */ --btn-height: 40px; --btn-radius: 8px; --btn-font-size: 13px; --btn-primary-gradient: linear-gradient(135deg, #4f6ef7, #3a4fd9); --btn-primary-shadow: 0 1px 3px rgba(79,110,247,0.25); --btn-primary-shadow-hover: 0 4px 12px rgba(79,110,247,0.35); --btn-secondary-bg: #f0f1f5; --btn-secondary-border: #e5e7eb; --btn-secondary-color: #4b5563; --btn-secondary-hover-bg: #e4e6eb; --btn-secondary-hover-border: #d1d5db; --btn-ghost-hover-bg: #f0f1f5; /* ══ 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: #f0f1f5; --date-quick-btn-border: #e5e7eb; --date-quick-btn-color: #4b5563; --date-quick-btn-radius: 6px; --date-quick-btn-hover-bg: var(--color-accent); --date-cell-radius: 6px; --date-cell-hover-bg: rgba(79,110,247,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: #4b5563; --date-nav-btn-size: 30px; --date-nav-btn-color: #6b7280; --date-nav-btn-hover-bg: #f0f1f5; --date-nav-btn-radius: var(--date-cell-radius); --date-weekday-color: #9ca3af; --date-footer-border: #e5e7eb; --date-footer-btn-border: #e5e7eb; --date-footer-btn-color: #9ca3af; --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(79,110,247,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: #6b7280; --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: #9ca3af; --table-status-expired-text: #9ca3af; /* ══ Table — Hover Actions ══ */ --table-action-btn-size: 30px; --table-action-btn-radius: 6px; --table-action-btn-color: #9ca3af; --table-action-btn-hover-bg: #f0f1f5; --table-action-btn-hover-color: #111827; /* ══ 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 ══ */ --bg-elevated: #fafbfc; } /* ════════════════════════════════════════════════════════════ COMPONENT-SPECIFIC OVERRIDES ════════════════════════════════════════════════════════════ */ html[data-theme="light"] { /* ── Dropdown option code badge ── */ .ds-option-code { background: #f0f1f5; color: #4b5563; } /* ── Port code destination badge ── */ .ds-port-code--dest { background: rgba(5,150,105,0.1); color: #059669; } /* ── Dropdown hint ── */ .ds-hint { background: #fafbfc; border-top-color: #e5e7eb; color: #9ca3af; } /* ── 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: #9ca3af; } .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: #d1d5db; } } /* ════════════════════════════════════════════════════════════ INDEX.HTML INLINE STYLE OVERRIDES ════════════════════════════════════════════════════════════ */ html[data-theme="light"] { --bg-secondary: #ffffff; --bg-hover: #f0f1f5; --border: #e5e7eb; --accent: #4f6ef7; --accent-light: #7c8ffa; --accent-dark: #3a4fd9; --accent-glow: rgba(79,110,247,0.12); --success: #059669; --warning: #d97706; --danger: #dc2626; --gradient-1: linear-gradient(135deg, #4f6ef7 0%, #7c8ffa 50%, #4f6ef7 100%); --gradient-2: linear-gradient(135deg, #ff6b35 0%, #ff8c5a 100%); --gradient-hero: linear-gradient(180deg, rgba(79,110,247,0.03) 0%, #f4f6f9 60%); --shadow-sm: 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 12px rgba(0,0,0,0.06); --shadow-lg: 0 12px 32px rgba(0,0,0,0.08); --shadow-glow: 0 0 40px rgba(79,110,247,0.08); } /* ════════════════════════════════════════════════════════════ GLOBAL ELEMENT OVERRIDES ════════════════════════════════════════════════════════════ */ html[data-theme="light"] { /* ── Selection ── */ ::selection { background: rgba(79,110,247,0.15); color: #111827; } /* ── Scrollbar ── */ ::-webkit-scrollbar-track { background: #f0f1f5; } ::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #9ca3af; } }