/* ========================================================================== rasikh-contracting — Design Tokens Style: "Trust & Authority" (ui-ux-pro-max: Enterprise Gateway pattern) Palette: Navy + White, gold accent for CTAs Light and dark are designed independently — dark is NOT an inversion. ========================================================================== */ :root { /* ---- Brand ramp (navy) ------------------------------------------------ */ --navy-950: #020617; --navy-900: #0F172A; --navy-800: #1E293B; --navy-700: #1E3A8A; --navy-600: #2547A8; --navy-500: #3B62C4; --navy-300: #93A9D8; --navy-100: #DCE4F5; /* ---- Neutrals -------------------------------------------------------- */ --white: #FFFFFF; --slate-50: #F8FAFC; --slate-100: #F1F5F9; --slate-200: #E2E8F0; --slate-300: #CBD5E1; --slate-400: #94A3B8; --slate-500: #64748B; --slate-600: #475569; /* ---- Gold: two tunings. Never use --gold-deep on a dark surface. ------ */ /* #A16207 clears white at 4.92 but lands at 4.49 on --surface-sunk. #9D6007 clears the WORST light surface at 4.66. */ --gold-deep: #9D6007; /* 4.66:1 worst case on light — light-surface accent */ --gold-lift: #E0B252; /* 8.6:1 on navy — dark-surface accent */ --gold-glow: #F5D89A; --danger: #DC2626; --success: #15803D; /* ---- Semantic: LIGHT theme ------------------------------------------- */ --bg: var(--slate-50); --surface: var(--white); --surface-sunk: var(--slate-100); --surface-raise: var(--white); --ink: var(--navy-950); --ink-soft: var(--slate-600); --ink-faint: var(--slate-500); --border: var(--slate-200); --border-strong: var(--slate-300); --brand: var(--navy-900); --brand-soft: var(--navy-700); --accent: var(--gold-deep); /* White, not navy: near-black on --gold-deep is only 3.95:1. The dark scopes below flip this back, because they use the lighter --gold-lift. */ --accent-ink: var(--white); --on-brand: var(--white); --ring: var(--navy-700); --scrim: rgba(2, 6, 23, .55); --shadow-color: 215 40% 12%; /* ---- Elevation ------------------------------------------------------- */ --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / .06), 0 1px 3px hsl(var(--shadow-color) / .08); --shadow-md: 0 2px 6px hsl(var(--shadow-color) / .06), 0 8px 20px hsl(var(--shadow-color) / .09); --shadow-lg: 0 4px 12px hsl(var(--shadow-color) / .07), 0 18px 44px hsl(var(--shadow-color) / .13); /* ---- Type ------------------------------------------------------------ */ --font-display: 'Lexend', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Scale reduced ~15-30%: the previous ramp topped out at 96px display and 17px body, which read as zoomed-in on a laptop. Body stays at 16px — any lower and iOS auto-zooms form fields on focus. */ --fs-xs: 0.75rem; /* 12 */ --fs-sm: 0.875rem; /* 14 */ --fs-base: 1rem; /* 16 */ --fs-md: 1.0625rem; /* 17 */ --fs-lg: 1.1875rem; /* 19 */ --fs-xl: 1.4375rem; /* 23 */ --fs-2xl: 1.75rem; /* 28 */ --fs-3xl: 2.25rem; /* 36 */ --fs-4xl: clamp(1.9rem, 1.15rem + 2.9vw, 3.25rem); /* 30 → 52 */ --fs-hero: clamp(2.1rem, 1.2rem + 3.6vw, 4rem); /* 34 → 64 */ --lh-tight: 1.08; --lh-snug: 1.28; --lh-body: 1.65; --tracking-tight: -0.022em; --tracking-wide: 0.14em; /* ---- Space (density 4/10) -------------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3.25rem; --space-9: 4.5rem; --space-10: 6rem; /* Tighter vertical rhythm and wider containers — together these are what actually kill the "zoomed in" feel; type size alone is only half of it. */ --section-y: clamp(3.25rem, 2.2rem + 4.2vw, 5.75rem); --gutter: clamp(1.1rem, 0.6rem + 2vw, 2.5rem); --measure: 74ch; --container: 82rem; --container-wide: 94rem; /* ---- Radius ---------------------------------------------------------- */ --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-xl: 22px; --r-full: 999px; /* ---- Motion ---------------------------------------------------------- */ --ease-out: cubic-bezier(.22, .72, .28, 1); --ease-in: cubic-bezier(.55, .06, .68, .19); --ease-spring:cubic-bezier(.34, 1.42, .48, 1); --t-fast: 150ms; --t-base: 260ms; --t-slow: 420ms; --t-reveal: 780ms; /* ---- Layers ---------------------------------------------------------- */ --z-base: 0; --z-raised: 10; --z-sticky: 40; --z-nav: 60; --z-drawer: 80; --z-modal: 100; --z-toast: 120; } /* ========================================================================== DARK THEME — independently designed. Deep navy ground, not black, so the brand reads as the same company at night. ========================================================================== */ [data-theme="dark"] { --bg: #070C16; --surface: #0F1826; --surface-sunk: #0A1220; --surface-raise: #16233A; --ink: #E9EFF8; --ink-soft: #A9BAD2; --ink-faint: #8296B2; --border: #1E2C44; --border-strong: #2B3E5C; --brand: #0F1826; --brand-soft: var(--navy-300); --accent: var(--gold-lift); --accent-ink: var(--navy-950); --on-brand: #E9EFF8; --ring: var(--navy-500); --scrim: rgba(3, 7, 18, .72); --shadow-color: 220 60% 2%; /* #DC2626 only reaches 4.05:1 on the dark surface — lift it */ --danger: #F87171; --success: #6EE7A8; --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / .5); --shadow-md: 0 2px 6px hsl(var(--shadow-color) / .5), 0 8px 22px hsl(var(--shadow-color) / .55); --shadow-lg: 0 4px 14px hsl(var(--shadow-color) / .55), 0 20px 50px hsl(var(--shadow-color) / .6); } /* ========================================================================== ALWAYS-DARK SURFACES (hero overlay, footer, CTA band). These sit on navy in BOTH themes, so they re-point the accent to the lifted gold. Without this, --gold-deep on navy lands at 3.4:1 and body copy quietly fails AA. ========================================================================== */ .on-dark { --surface: #0C1526; --surface-sunk: #070C16; --surface-raise: #16233A; --ink: #F2F6FC; --ink-soft: #B9C8DE; --ink-faint: #93A6C0; --border: rgba(233, 239, 248, .14); --border-strong: rgba(233, 239, 248, .26); --accent: var(--gold-lift); --accent-ink: var(--navy-950); --on-brand: #F2F6FC; --ring: var(--gold-lift); color: var(--ink); } /* ---- Arabic typography: applied only when -------------- */ html[lang="ar"] { --font-display: 'Noto Kufi Arabic', 'Lexend', system-ui, sans-serif; --font-body: 'IBM Plex Sans Arabic', 'Source Sans 3', system-ui, sans-serif; --tracking-tight: 0; --tracking-wide: 0.04em; --lh-tight: 1.32; --lh-snug: 1.5; --lh-body: 1.9; }