/** * HAI UAE — Design Token Foundation * Single source of truth for colors, typography, spacing, shadows, and radii. * Loaded before all other stylesheets so both legacy (main.css) and modern * (directory.css, shell.css, components.css) consumers inherit these tokens. * * Version: 2.0.0 (2026.09.12 — DESIGN_MASTER_PLAN) * Architecture: CSS Custom Properties with fluid clamp() scales */ :root { /* ── Brand Primary Colors (Signature Yellow & Navy Authority) ── */ --brand: #ffcb05; /* Primary CTA bg, logo signature */ --brand-hover: #e6b700; /* Primary CTA hover */ --on-brand: #0f172a; /* Text/icon on yellow (always navy, never white) */ --ink: #0f172a; /* Headings, footer, primary dark text */ --ink-deep: #0a192f; /* Dark hero / topbar */ --accent: #d97706; /* Eyebrows, labels, star ratings */ --accent-text: #b45309; /* Accessible gold text on white (4.5:1) */ --link: #1d4ed8; /* In-content links only (WCAG AA 4.5:1) */ --link-hover: #1e40af; --success: #047857; /* Verified, WhatsApp, success states (4.8:1) */ --success-light: #ecfdf5; --success-border: #a7f3d0; --danger: #b91c1c; /* Errors, destructive (5.2:1) */ --danger-light: #fef2f2; --text: #0f172a; /* Primary body text (14:1) */ --muted: #475569; /* Secondary body text (5.1:1) */ --subtle: #64748b; /* Tertiary hints / icons (4.6:1) */ --surface: #ffffff; --surface-subtle: #f8fafc; --focus-ring: 0 0 0 3px rgba(255, 203, 5, 0.45); /* ── Legacy Aliases ── */ --dir-yellow: var(--brand); --dir-yellow-hover: var(--brand-hover); --dir-yellow-light: #fffbeb; --dir-yellow-subtle: #fef9c3; --dir-brand-primary: var(--brand); --dir-brand-navy: var(--ink); --dir-navy: var(--ink-deep); --dir-navy-dark: #060f1e; --dir-navy-light: #162a45; --dir-blue: var(--link); --dir-blue-hover: var(--link-hover); --dir-blue-light: #eff6ff; --dir-emerald: var(--success); --dir-emerald-light: var(--success-light); --dir-emerald-border: var(--success-border); --dir-gold: var(--accent-text); --dir-gold-light: #fffbeb; --dir-gold-border: #fde68a; --dir-amber-accent: var(--accent); --dir-rating: var(--accent); --dir-whatsapp: var(--success); --dir-whatsapp-bg: #25d366; --dir-whatsapp-hover: #1ebc59; --dir-danger: var(--danger); --dir-danger-light: var(--danger-light); --dir-bg: var(--surface-subtle); --dir-surface: var(--surface); --dir-surface-elevated: #ffffff; --dir-border: #cbd5e1; /* 3:1 non-text UI contrast */ --dir-border-subtle: #e2e8f0; --dir-border-light: #f1f5f9; --dir-text-main: var(--text); --dir-text-muted: var(--muted); --dir-text-subtle: var(--subtle); --dir-text-white: #ffffff; /* ── Typography Stack ── */ --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-heading: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif; --dir-font-sans: var(--font-sans); --dir-font-heading: var(--font-heading); /* ── Mathematical Fluid Typography Scales ── */ --dir-text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem); --dir-text-sm: clamp(0.8125rem, 0.775rem + 0.25vw, 0.875rem); --dir-text-base: clamp(0.9375rem, 0.875rem + 0.35vw, 1.0625rem); --dir-text-lg: clamp(1.0625rem, 0.975rem + 0.45vw, 1.25rem); --dir-text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem); --dir-text-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 1.875rem); --dir-text-3xl: clamp(1.875rem, 1.5rem + 1.85vw, 2.375rem); --dir-text-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3rem); /* ── Fluid Spacing Scale ── */ --dir-space-2xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.375rem); --dir-space-xs: clamp(0.375rem, 0.3rem + 0.35vw, 0.5rem); --dir-space-sm: clamp(0.625rem, 0.5rem + 0.5vw, 0.875rem); --dir-space-md: clamp(0.875rem, 0.75rem + 0.65vw, 1.25rem); --dir-space-lg: clamp(1.25rem, 1rem + 1.2vw, 1.75rem); --dir-space-xl: clamp(1.75rem, 1.25rem + 2vw, 2.5rem); --dir-space-2xl: clamp(2.5rem, 1.75rem + 3.5vw, 4rem); --dir-space-section: clamp(3rem, 2rem + 4.5vw, 5.5rem); /* ── Content Readability ── */ --dir-prose-max: 65ch; /* ── Elevation & Shadows ── */ --dir-shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.05); --dir-shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.08), 0 1px 2px -1px rgba(15, 23, 42, 0.08); --dir-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.06); --dir-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04); --dir-shadow-card-hover: 0 14px 28px -4px rgba(15, 23, 42, 0.12), 0 4px 8px -2px rgba(15, 23, 42, 0.06); /* ── Radii ── */ --dir-radius-sm: 6px; --dir-radius-md: 10px; --dir-radius-lg: 16px; --dir-radius-xl: 24px; --dir-radius-full: 9999px; /* Backward-compatibility aliases */ --hai-radius-sm: var(--dir-radius-sm); --hai-radius-md: var(--dir-radius-md); --hai-radius-lg: var(--dir-radius-lg); --hai-radius-xl: var(--dir-radius-xl); /* ── Layout Containers & Mobile Touch Ergonomics ── */ --dir-container-max: 1240px; --dir-container-narrow: 1120px; --dir-mobile-nav-height: 62px; --dir-min-touch-target: 48px; /* ── Safe Area Insets for Mobile Notches & Gesture Bars ── */ --dir-safe-top: env(safe-area-inset-top, 0px); --dir-safe-bottom: env(safe-area-inset-bottom, 0px); --dir-safe-left: env(safe-area-inset-left, 0px); /* ── Standard Responsive Breakpoints ── */ --bp-sm: 576px; --bp-md: 768px; --bp-lg: 992px; --bp-xl: 1200px; } /* ========================================================================== Single Focus-Visible Standard (WCAG 2.2 AA) ========================================================================== */ :focus-visible { outline: 3px solid var(--brand, #ffcb05) !important; outline-offset: 2px !important; } /* ========================================================================== Accessible Skip-To-Content Link ========================================================================== */ .hh-skip-link { position: fixed; top: -9999px; left: 16px; z-index: 999999; padding: 12px 20px; background: var(--brand, #ffcb05); color: var(--on-brand, #0f172a); font-family: var(--font-sans); font-weight: 700; font-size: 15px; border-radius: var(--dir-radius-md, 10px); text-decoration: none; box-shadow: var(--dir-shadow-lg); transition: top 0.15s cubic-bezier(0.16, 1, 0.3, 1); } .hh-skip-link:focus, .hh-skip-link:focus-visible { top: 16px; } /* ========================================================================== Mobile-First Base Reset & iOS Auto-Zoom Prevention ========================================================================== */ html, body { overflow-x: clip; width: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } @media (max-width: 992px) { /* Prevent iOS Safari 16px auto-zoom across mobile and tablet */ input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="file"]), select, textarea, .form-control, .form-select { font-size: 16px !important; } }