/* ========================================================================== Design tokens — Logystico Matched to logystico.com: Open Sans, the brand purple family, and its pill buttons. Every token name is unchanged, so the whole app — admin dashboard and client portal alike — picks the brand up from here. Brand values read off the live site: hero / nav purple #7264AC heading purple #613BA8 button purple #8476BC tint #A287D6 CTA pink #EB4868 body text #4A4A4A Neutrals below are warmed toward purple so greys sit with the brand instead of fighting it, and text contrast is raised above the site's own #4A4A4A — this is a working tool, read all day, not a landing page. ========================================================================== */ :root { /* ------------------------------------------------------------------- Colors — Primary ------------------------------------------------------------------- */ --color-primary: #613ba8; /* brand purple, 7.4:1 on white */ --color-primary-hover: #4e2f87; --color-primary-active: #3f2670; --color-primary-light: #ede7f6; --color-primary-50: #f6f3fb; --color-primary-faint: rgba(97, 59, 168, 0.06); /* Secondary brand purple — the site's nav/hero fill. */ --color-brand: #7264ac; --color-brand-soft: #8476bc; --color-brand-tint: #a287d6; /* The site's CTA pink. Used sparingly for emphasis, never for errors. */ --color-accent: #eb4868; --color-accent-hover: #d63a58; /* ------------------------------------------------------------------- Colors — Neutral / Gray Scale ------------------------------------------------------------------- */ --color-white: #ffffff; --color-gray-50: #f7f6fa; --color-gray-100: #f0eef5; --color-gray-200: #e3e0eb; --color-gray-300: #cbc6d8; --color-gray-400: #9e97ae; --color-gray-500: #7a7288; --color-gray-600: #5c5568; --color-gray-700: #443e4e; --color-gray-800: #2e2937; --color-gray-900: #1c1825; /* ------------------------------------------------------------------- Colors — Surface & Background ------------------------------------------------------------------- */ --color-surface: #f7f6fa; --color-surface-raised: #ffffff; --color-surface-sunken: #f0eef5; --color-sidebar: #37285c; /* deep brand purple */ --color-sidebar-hover: rgba(255, 255, 255, 0.10); /* ------------------------------------------------------------------- Colors — Semantic ------------------------------------------------------------------- */ --color-success: #22c55e; --color-success-hover: #16a34a; --color-success-light: #dcfce7; --color-success-100: #dcfce7; --color-success-700: #15803d; --color-warning: #f59e0b; --color-warning-hover: #d97706; --color-warning-light: #fef3c7; --color-warning-100: #fef3c7; --color-warning-700: #b45309; --color-danger: #ef4444; --color-danger-hover: #dc2626; --color-danger-active: #b91c1c; --color-danger-light: #fee2e2; --color-danger-100: #fee2e2; --color-danger-700: #b91c1c; --color-info: #613ba8; --color-info-light: #ede7f6; --color-info-100: #ede7f6; --color-info-700: #4e2f87; /* ------------------------------------------------------------------- Colors — Text ------------------------------------------------------------------- */ --color-text: #2e2937; /* 12.4:1 on white */ --color-text-secondary: #5c5568; /* 7.1:1 */ --color-text-muted: #7a7288; /* 4.9:1 — still AA for body text */ --color-text-placeholder: #9e97ae; --color-text-inverse: #ffffff; /* ------------------------------------------------------------------- Colors — Borders ------------------------------------------------------------------- */ --color-border: #e3e0eb; --color-border-light: #f0eef5; --color-border-focus: #7264ac; /* ------------------------------------------------------------------- Spacing Scale ------------------------------------------------------------------- */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; /* ------------------------------------------------------------------- Typography — Font Family ------------------------------------------------------------------- */ --font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-family-mono: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", "Cascadia Code", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* ------------------------------------------------------------------- Typography — Font Sizes ------------------------------------------------------------------- */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.75rem; /* 28px */ /* ------------------------------------------------------------------- Typography — Line Heights ------------------------------------------------------------------- */ --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.625; /* ------------------------------------------------------------------- Typography — Font Weights ------------------------------------------------------------------- */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* ------------------------------------------------------------------- Border Radius ------------------------------------------------------------------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 9999px; /* The site's buttons are fully rounded (68px on a ~40px control). */ --radius-pill: 999px; /* ------------------------------------------------------------------- Shadows ------------------------------------------------------------------- */ /* Tinted purple rather than neutral black, so elevation reads as brand. */ --shadow-sm: 0 1px 2px 0 rgba(55, 40, 92, 0.06); --shadow-md: 0 4px 6px -1px rgba(55, 40, 92, 0.10), 0 2px 4px -2px rgba(55, 40, 92, 0.06); --shadow-lg: 0 10px 15px -3px rgba(55, 40, 92, 0.12), 0 4px 6px -4px rgba(55, 40, 92, 0.06); /* ------------------------------------------------------------------- Layout Dimensions ------------------------------------------------------------------- */ --sidebar-width: 240px; --sidebar-width-collapsed: 72px; --chat-max-width: 720px; /* ------------------------------------------------------------------- Safe Area Insets (for notched/dynamic-island phones) ------------------------------------------------------------------- */ --safe-area-top: env(safe-area-inset-top, 0px); --safe-area-bottom: env(safe-area-inset-bottom, 0px); --safe-area-left: env(safe-area-inset-left, 0px); --safe-area-right: env(safe-area-inset-right, 0px); /* ------------------------------------------------------------------- Transitions ------------------------------------------------------------------- */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; /* ------------------------------------------------------------------- Z-Index Scale ------------------------------------------------------------------- */ --z-sidebar: 100; --z-topbar: 200; --z-overlay: 300; --z-chat: 250; --z-toast: 400; }