/* --------------------------------------------------------------------------- TradeRapid Jobs - theme tokens This is the ONLY file you touch to re-skin the app to match the branded GHL instance. Everything else reads these variables. Defaults below are deliberately GHL-native (Untitled UI grey ramp + GHL blue) so the app disappears into the platform when embedded in an iframe. --------------------------------------------------------------------------- */ :root { /* brand ------------------------------------------------------------------ */ --primary: #188bf6; /* GHL action blue */ --primary-hover: #0b6fd0; --primary-soft: #eaf4fe; --primary-text: #ffffff; /* surfaces --------------------------------------------------------------- */ --bg: #f9fafb; --surface: #ffffff; --surface-2: #f9fafb; --surface-3: #f2f4f7; --border: #eaecf0; --border-strong: #d0d5dd; /* type ------------------------------------------------------------------- */ --text: #101828; --text-2: #344054; --muted: #667085; --muted-2: #98a2b3; /* sidebar (standalone mode only - hidden when embedded in GHL) ------------ */ --sidebar: #0b1220; --sidebar-2: #151e30; --sidebar-text: #c3cad9; --sidebar-active: #ffffff; /* status ----------------------------------------------------------------- */ --green: #12b76a; --green-soft: #ecfdf3; --green-text: #027a48; --amber: #f79009; --amber-soft: #fffaeb; --amber-text: #b54708; --red: #f04438; --red-soft: #fef3f2; --red-text: #b42318; --violet: #7a5af8; --violet-soft: #f4f3ff; --violet-text: #5925dc; --cyan: #06aed4; --cyan-soft: #ecfdff; --cyan-text: #0e7090; /* shape ------------------------------------------------------------------ */ --radius: 8px; --radius-sm: 6px; --radius-lg: 12px; --shadow-sm: 0 1px 2px rgba(16,24,40,.06); --shadow: 0 4px 8px -2px rgba(16,24,40,.10), 0 2px 4px -2px rgba(16,24,40,.06); --shadow-lg: 0 12px 16px -4px rgba(16,24,40,.08), 0 4px 6px -2px rgba(16,24,40,.03); --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, monospace; } /* Dark - GHL has a dark mode, so the embed follows it ----------------------- */ :root[data-theme="dark"] { --bg: #0c111d; --surface: #161b26; --surface-2: #1f242f; --surface-3: #262c38; --border: #262c38; --border-strong: #333741; --text: #f5f5f6; --text-2: #cecfd2; --muted: #94969c; --muted-2: #85888e; --sidebar: #0c111d; --sidebar-2: #161b26; --primary-soft: #10243a; --green-soft: #0a2c1d; --green-text: #75e0a7; --amber-soft: #2e1c06; --amber-text: #fec84b; --red-soft: #2f1311; --red-text: #fda29b; --violet-soft: #1b1839; --violet-text: #bdb4fe; --cyan-soft: #0b2b35; --cyan-text: #67e3f9; --shadow-sm: 0 1px 2px rgba(0,0,0,.30); --shadow: 0 4px 8px -2px rgba(0,0,0,.40); --shadow-lg: 0 12px 16px -4px rgba(0,0,0,.45); } /* --- Alternate presets. Swap the class on to preview a re-skin. ----- */ /* Closer to a dark-chrome GHL white label */ :root[data-preset="midnight"] { --primary: #3b82f6; --primary-hover:#2563eb; --primary-soft:#eff6ff; --sidebar: #0f172a; --sidebar-2:#1e293b; } /* Morello brand - for the standalone / marketing-facing view only. Do NOT use this inside the GHL iframe; matching the host beats branding. */ :root[data-preset="morello"] { --primary: #0a1530; --primary-hover:#050b1c; --primary-soft:#eef0f5; --sidebar: #0a1530; --sidebar-2:#16224a; --bg: #f2f1ed; }