/* ========================================================= Bareeq Tawasul — Design Tokens (Dark SaaS + Neon Green) Base tokens for: Kabar (product) + shared UI. + Corporate override (Navy × Gold) for company home. ========================================================= */ /* Font */ :root{ --font: "Tajawal", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; /* Radii */ --radius-sm: 10px; --radius: 14px; --radius-lg: 18px; /* Shadows */ --shadow-sm: 0 8px 24px rgba(0,0,0,.35); --shadow: 0 14px 40px rgba(0,0,0,.45); --shadow-glow: 0 0 0 1px rgba(13,213,58,.14), 0 18px 60px rgba(13,213,58,.10); /* Motion */ --ease: cubic-bezier(.2,.8,.2,1); --dur-1: 140ms; --dur-2: 220ms; /* Layout */ --container: 1120px; --gutter: 18px; /* ===== Core UI (Dark) — Default: Kabar / Product ===== */ --bg: #0B1220; --surface: #0F1930; --surface-2: #101C36; --surface-3: #0E172B; --line: rgba(255,255,255,.10); --line-2: rgba(255,255,255,.07); --fg: #F5F7FA; --muted: rgba(245,247,250,.72); --muted-2: rgba(245,247,250,.56); /* ===== Brand (Neon Green System) — Default ===== */ --brand-900: #044019; --brand-800: #05511F; --brand-700: #066B27; /* Deep Green */ --brand-600: #0DD53A; /* Bright Green (Primary) */ --brand-500: #5CFF6A; /* Neon Accent */ --brand-200: #BFFFC6; --brand-100: #E5FFD9; /* Optional luxury hint */ --gold: #D4AF37; /* States */ --success: #16A34A; --warning: #F59E0B; --danger: #E11D48; --info: #38BDF8; /* Gradients */ --grad-main: linear-gradient(135deg, #066B27 0%, #0DD53A 55%, #5CFF6A 100%); --grad-cta: linear-gradient(135deg, #0DD53A 0%, #5CFF6A 100%); --grad-soft: radial-gradient(1200px 600px at 20% 30%, rgba(13,213,58,.20), transparent 60%), radial-gradient(900px 500px at 90% 70%, rgba(92,255,106,.14), transparent 60%); /* Focus */ --focus: 0 0 0 4px rgba(92,255,106,.22); } /* Global defaults (safe) */ html{ font-family: var(--font); background: var(--bg); color: var(--fg); color-scheme: dark; } body{ background: var(--bg); color: var(--fg); } /* Utility classes (optional, helps speed UI build) */ .token-surface{ background: var(--surface); border: 1px solid var(--line); } .token-card{ background: linear-gradient(180deg, rgba(16,28,54,.92), rgba(14,23,43,.92)); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .token-glow{ box-shadow: var(--shadow-glow); } .token-muted{ color: var(--muted); } /* Buttons baseline */ .btn{ display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font-weight: 800; cursor: pointer; transition: transform var(--dur-1) var(--ease), filter var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease); user-select: none; text-decoration: none; } .btn:hover{ transform: translateY(-1px); filter: brightness(1.05); } .btn:active{ transform: translateY(0px); } .btn:focus{ outline: none; box-shadow: var(--focus); } .btn-primary{ background: var(--grad-cta); border-color: rgba(92,255,106,.22); color: #06130C; box-shadow: 0 14px 40px rgba(13,213,58,.18); } .btn-primary:hover{ filter: brightness(1.06); } .badge-vip{ display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 999px; background: rgba(212,175,55,.10); border: 1px solid rgba(212,175,55,.22); color: #FDE68A; font-weight: 800; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce){ *{ transition: none !important; scroll-behavior: auto !important; } } /* ========================================================= Corporate Override — Navy × Gold (Company Home) Activate by adding: - Keeps product (Kabar) tokens untouched by default. ========================================================= */ body[data-site="corp"]{ /* Core UI */ --bg: #070F1C; /* Deep Navy */ --surface: #0B1C2D; /* Card Navy */ --surface-2: #0F2438; --surface-3: #091728; --line: rgba(255,255,255,.10); --line-2: rgba(255,255,255,.07); --fg: #F5F7FA; --muted: rgba(245,247,250,.74); --muted-2: rgba(245,247,250,.58); /* Brand remap to Gold system (for buttons/grad text in home) */ --brand-900: #2A1A06; --brand-800: #3B2408; --brand-700: #B48B1E; /* Deep Gold */ --brand-600: #D4AF37; /* Gold Primary */ --brand-500: #FDE68A; /* Gold Accent */ --brand-200: #FFF2C2; --brand-100: #FFF7DB; /* Keep reference */ --gold: #D4AF37; /* Focus ring (gold) */ --focus: 0 0 0 4px rgba(212,175,55,.22); /* Shadows (softer & premium) */ --shadow-sm: 0 10px 28px rgba(0,0,0,.38); --shadow: 0 18px 55px rgba(0,0,0,.48); --shadow-glow: 0 0 0 1px rgba(212,175,55,.16), 0 18px 60px rgba(212,175,55,.10); /* Gradients (gold) */ --grad-main: linear-gradient(135deg, #B48B1E 0%, #D4AF37 55%, #FDE68A 100%); --grad-cta: linear-gradient(135deg, #D4AF37 0%, #FDE68A 100%); --grad-soft: radial-gradient(1200px 600px at 18% 26%, rgba(212,175,55,.16), transparent 62%), radial-gradient(900px 520px at 88% 70%, rgba(253,230,138,.10), transparent 62%); /* Make sure corp stays dark */ color-scheme: dark; }