/* Nile CRM v2 — design tokens Identity: "Blue Nile" — built from the colours Nile Logistics already owns. Measured off nilelogistics.com: wordmark navy #203954 (11.8:1), nav blue #437FC4 (4.14:1 — misses AA as text), lime #B4E027 (1.54:1 — can never be text). So: NAVY BUILDS (rail, dark ground), BLUE DRIVES (the only thing you can click — the site blue deepened one step to #1668B0 so it clears AA as text and under white), LIME IS SPENT (the live edge: active rail, the count that changed, won — never text; where a green must be read it becomes --lime-ink #4A6B00). Every semantic value below clears WCAG AA both as text on its own soft tint and with --on-solid on top of it. The dark theme is designed on its own with a matching navy cast — not an inversion. */ @font-face { font-family: "Plex Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: "Plex Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: "Plex Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: "Plex Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: "Plex Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/ibm-plex-sans-arabic-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Plex Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/ibm-plex-sans-arabic-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Plex Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/ibm-plex-sans-arabic-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Plex Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/ibm-plex-sans-arabic-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../assets/fonts/inter-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* ---- palette (brand) ---- */ --navy: #1B3A5C; --navy-deep: #122A44; --navy-ink: #0C1B2A; --blue-50: #DBEBFA; --blue-100: #C3DDF6; --blue-300: #7FBDEE; --blue-500: #1E9BE6; --blue-600: #1265B8; --blue-700: #0F559C; --blue-800: #0C4580; --lime: #B4E027; --lime-ink: #4E7300; --on-lime: #16250A; --lime-50: #EEF8C8; --lime-100: #DFF3A0; --lime-mid: #74C12E; --leaf-50: #E6F6D8; --leaf-600: #357D0C; --leaf-700: #2F7F0A; --sky-50: #DDF3F7; --sky-600: #076F80; --sky-500: #17B3C8; --indigo-50: #E8E6FA; --indigo-500: #7C6CFF; --indigo-600: #5347D6; --indigo-700: #4038B0; --amber-50: #FCEFC9; --amber-100: #F8E19E; --amber-500: #F2B33D; --amber-700: #8F5C05; --rose-50: #FCE1E7; --rose-500: #F0466A; --rose-700: #C41E3A; --slate-50: #EDF1F5; --slate-300: #BBC8D6; --slate-500: #8A9DB3; --slate-600: #556A82; /* ---- semantic (light) ---- `--x` is the readable shade; `--x-vivid` is decoration only (dots, chart marks, borders) — never text. */ --brand: var(--blue-600); --brand-vivid: var(--blue-500); --brand-strong: var(--navy); --brand-soft: var(--blue-50); --brand-ink: var(--navy-deep); --accent: var(--lime-ink); --accent-vivid: var(--lime); --accent-strong: #3A5400; --accent-soft: var(--lime-50); --ai: var(--indigo-600); --ai-vivid: var(--indigo-500); --ai-soft: var(--indigo-50); --ai-strong: var(--indigo-700); --success: var(--leaf-700); --success-vivid: var(--lime-mid); --success-soft: var(--leaf-50); --warning: var(--amber-700); --warning-vivid: var(--amber-500); --warning-soft: var(--amber-50); --danger: var(--rose-700); --danger-vivid: var(--rose-500); --danger-soft: var(--rose-50); --info: var(--blue-600); --info-vivid: var(--blue-500); --info-soft: var(--blue-50); --bg: #EFF3F7; --bg-canvas: linear-gradient(180deg, #F3F6F9 0%, #EDF1F5 100%); --surface: #FFFFFF; --surface-2: #F3F6FA; --surface-3: #E4ECF4; --surface-hover: #EEF3F8; /* --border is the hairline inside a card; --border-strong is a boundary that must be seen (inputs, table rules, card edges) and clears 3:1 on white — the old value measured 1.64. */ --border: #D6DFE8; --border-strong: #7E91A5; /* text-3 and text-4 were measured as the same grey; they are now one token. */ --text: #0C1B2A; --text-2: #2E4257; --text-3: #4F627A; --text-4: #4F627A; --text-inverse: #FFFFFF; /* The rail is navy in BOTH themes — a surface that is dark in both uses literal light text, never --on-solid. */ --sidebar-bg: linear-gradient(180deg, #142E4B 0%, #122A44 100%); --sidebar-text: #A8BDD0; --sidebar-text-active: #FFFFFF; --sidebar-active-bg: #1B3A5C; --sidebar-hover-bg: rgba(255,255,255,.06); --sidebar-rail: var(--lime); --topbar-bg: rgba(255,255,255,.82); --shadow-sm: 0 1px 2px rgba(12,27,42,.07); --shadow: 0 2px 4px rgba(12,27,42,.10), 0 1px 2px rgba(12,27,42,.05); --shadow-lg: 0 10px 24px rgba(12,27,42,.14), 0 2px 6px rgba(12,27,42,.07); --shadow-brand: 0 2px 6px rgba(22,104,176,.22); --shadow-accent: 0 2px 6px rgba(180,224,39,.35); --ring: 0 0 0 3px rgba(22,104,176,.28); --on-solid: #FFFFFF; --glass: rgba(255,255,255,.66); --scrollbar: #BBC8D6; /* ---- type ---- */ /* Chosen by the client on the live samples: Alexandria for Arabic (geometric, tall, very legible), Inter for English, IBM Plex Mono for figures. Loaded from Google Fonts in index.html; the bundled Plex is the offline fallback so nothing ever renders in Tahoma. Arabic body text gets a taller line-height (base.css). */ --font-ar: "Alexandria", "Plex Arabic", "Segoe UI", Tahoma, sans-serif; --font-en: "Inter", "Alexandria", "Plex Arabic", "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --fs-xs: 11.5px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 18px; --fs-2xl: 22px; --fs-3xl: 27px; --fs-hero: 32px; --lh-tight: 1.25; --lh-snug: 1.4; --lh-base: 1.55; --fw-med: 500; --fw-semi: 600; --fw-bold: 700; /* ---- shape & space ---- */ --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-pill: 999px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 16px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --row-h: 40px; --control-h: 34px; --sidebar-w: 232px; --sidebar-w-collapsed: 60px; --topbar-h: 54px; /* ---- motion ---- */ --ease: cubic-bezier(.2,.8,.2,1); --ease-out: cubic-bezier(.16,1,.3,1); --ease-spring: cubic-bezier(.34,1.56,.64,1); --t-fast: 140ms; --t-base: 220ms; --t-slow: 420ms; /* ---- stage colours: a ramp that TRAVELS ---- grey while nobody has touched it, brand blue through Operations, arriving at lime when it is won. Lost leaves the ramp. A rep can read progress from the colour alone. */ --stage-new: var(--slate-600); --stage-new-vivid: var(--slate-500); --stage-new-soft: var(--slate-50); --stage-at_operations: var(--blue-600); --stage-at_operations-vivid: var(--blue-600); --stage-at_operations-soft: var(--blue-50); --stage-quoted: var(--sky-600); --stage-quoted-vivid: var(--sky-500); --stage-quoted-soft: var(--sky-50); --stage-negotiation: var(--leaf-600); --stage-negotiation-vivid: var(--lime-mid); --stage-negotiation-soft: var(--leaf-50); --stage-won: var(--lime-ink); --stage-won-vivid: var(--lime); --stage-won-soft: var(--lime-50); --stage-lost: var(--rose-700); --stage-lost-vivid: var(--rose-500); --stage-lost-soft: var(--rose-50); --hot: var(--rose-700); --warm: var(--amber-700); --cold: var(--blue-600); } /* ---- dark theme: a navy ground that matches the light neutrals' cast (the old dark greys carried 2–8× more chroma than the light ones). Accents are LIGHT so solid fills carry dark ink (--on-solid). Lime clears 12.9:1 here, so in dark it may be read. ---- */ [data-theme="dark"] { --brand: #62B0F0; --brand-vivid: #1E9BE6; --brand-strong: #9AD0F6; --brand-soft: rgba(98,176,240,.20); --brand-ink: #C6E2F8; --accent: #C9F03D; --accent-vivid: #C9F03D; --accent-strong: #DDF57A; --accent-soft: rgba(201,240,61,.18); --lime: #C9F03D; --lime-ink: #C9F03D; --on-lime: #16250A; --lime-50: rgba(201,240,61,.18); --ai: #B0A4FF; --ai-vivid: #9C8CFF; --ai-soft: rgba(176,164,255,.22); --ai-strong: #CFC6FF; --success: #86DB5A; --success-vivid: #93D94A; --success-soft: rgba(134,219,90,.20); --warning: #F0B94A; --warning-vivid: #F2B33D; --warning-soft: rgba(240,185,74,.20); --danger: #FF7F96; --danger-vivid: #F0466A; --danger-soft: rgba(255,127,150,.20); --info: #62B0F0; --info-vivid: #1E9BE6; --info-soft: rgba(98,176,240,.20); --bg: #0A1520; --bg-canvas: linear-gradient(180deg, #0B1724 0%, #0A1520 100%); --surface: #0F1E2D; --surface-2: #16293B; --surface-3: #1D3549; --surface-hover: #182D40; /* the old dark border measured 1.30:1 — invisible. This one clears 3:1 on the surface. */ --border: #2E4860; --border-strong: #4F7699; --text: #E8EFF5; --text-2: #A9BECE; --text-3: #8FA5B9; --text-4: #8FA5B9; --text-inverse: #0A1520; --sidebar-bg: linear-gradient(180deg, #0D1E30 0%, #0B1A28 100%); --sidebar-text: #A8BDD0; --sidebar-text-active: #FFFFFF; --sidebar-active-bg: #1B3A5C; --sidebar-hover-bg: rgba(255,255,255,.05); --sidebar-rail: var(--lime); --topbar-bg: rgba(15,30,45,.78); --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 2px 5px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.35); --shadow-lg: 0 12px 28px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4); --shadow-brand: 0 2px 6px rgba(92,168,232,.24); --shadow-accent: 0 2px 6px rgba(201,240,61,.22); --ring: 0 0 0 3px rgba(92,168,232,.32); --on-solid: #0A1520; --glass: rgba(15,30,45,.72); --scrollbar: #3D5F7D; --stage-new: #94ACC2; --stage-new-vivid: #8A9DB3; --stage-new-soft: rgba(148,172,194,.18); --stage-at_operations: #62B0F0; --stage-at_operations-vivid: #1E9BE6; --stage-at_operations-soft: rgba(98,176,240,.20); --stage-quoted: #4FC8DE; --stage-quoted-vivid: #17B3C8; --stage-quoted-soft: rgba(79,200,222,.20); --stage-negotiation: #93D94A; --stage-negotiation-vivid: #74C12E; --stage-negotiation-soft: rgba(147,217,74,.20); --stage-won: #C9F03D; --stage-won-vivid: #B4E027; --stage-won-soft: rgba(201,240,61,.18); --stage-lost: #FF7F96; --stage-lost-vivid: #F0466A; --stage-lost-soft: rgba(255,127,150,.20); --hot: #FF7F96; --warm: #F0B94A; --cold: #62B0F0; color-scheme: dark; } /* ---------- stacking order ---------- One scale for the whole app, highest last. Anything that must be reachable while the floating assistant is open has to sit above it — dialogs and menus were below it, which is why the assistant covered them. 20 sticky topbar 30 sidebar 40 inline poppers (lookup, mentions) 50 tooltips, search results 150 floating assistant (button + panel) 300+ modal dialogs (each stacked instance adds 10) 320 drawers 400 dropdown menus, notification panel 500 toasts */ :root { --z-popper: 40; --z-tooltip: 50; --z-sidebar: 30; --z-topbar: 20; --z-agent: 150; --z-modal: 300; --z-drawer: 320; --z-menu: 400; --z-toast: 500; }