/* * Design tokens — AAI Networks brand (dual palette). * * Matches aainetworkservices.ae: white/slate surfaces, blue-600 primary, * Sora headings + Inter body. Switched by [data-theme] on : * light → white stage (default, mirrors AAI marketing site) * dark → slate-950 stage * * Cards are flat corporate (surface + hairline border + soft shadow), NOT the * old parchment ticket. Components must reference the semantic tokens below, * never raw hex. */ :root { /* Brand primitives (mode-independent) */ --brand: #2563EB; /* blue-600 — primary CTA */ --brand-bright: #3B82F6; /* blue-500 */ --brand-deep: #1D4ED8; /* blue-700 — hover/pressed */ --ink: #0F172A; /* slate-900 */ /* Card surface tokens — resolve per-mode via --surface below */ --ticket-bg: var(--surface); --ticket-bg-2: var(--surface-raised); --ticket-ink: var(--text); --ticket-ink-muted: var(--text-muted); --ticket-line: var(--border); /* Fonts */ --font-display: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Type scale */ --fs-display: clamp(2.25rem, 6vw, 3.75rem); --fs-h1: clamp(1.85rem, 4.5vw, 2.75rem); --fs-h2: clamp(1.4rem, 3vw, 1.9rem); --fs-h3: 1.25rem; --fs-body: 1rem; --fs-sm: 0.875rem; --fs-cap: 0.75rem; /* Spacing / layout */ --wrap: 1120px; --wrap-narrow: 560px; --gap: clamp(1rem, 3vw, 2rem); --radius-lg: 18px; --radius: 12px; --radius-sm: 9px; /* Motion */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 120ms; --dur: 250ms; --dur-slow: 450ms; /* Status hues (tuned per mode below where needed) */ --success: #16a34a; --warn: #d97706; --error: #dc2626; /* Safe-area helpers */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); } /* ---------------- Light: white stage (default) ---------------- */ :root[data-theme="light"] { --bg: #F8FAFC; --bg-grad: radial-gradient(1100px 560px at 50% -12%, #EFF4FF 0%, #F8FAFC 62%); --surface: #FFFFFF; --surface-raised: #FFFFFF; --text: #0F172A; --text-muted: #64748B; --border: #E2E8F0; --border-soft: #EEF2F7; --accent: var(--brand); --accent-soft: var(--brand-bright); --accent-contrast: #FFFFFF; /* text on a blue button */ --accent-text: var(--brand); /* blue used as TEXT/links on the stage */ --accent-wash: #EFF4FF; /* faint blue fill (tints, active rows) */ --overlay: rgba(15, 23, 42, 0.55); --shadow-card: 0 10px 30px -14px rgba(15, 23, 42, 0.18); --shadow-lift: 0 18px 42px -18px rgba(15, 23, 42, 0.24); --success: #16a34a; --warn: #b45309; --error: #dc2626; } /* ---------------- Dark: slate-950 stage ---------------- */ :root[data-theme="dark"] { --bg: #020617; --bg-grad: radial-gradient(1200px 600px at 50% -10%, #0F172A 0%, #020617 60%); --surface: #0F172A; --surface-raised: #1E293B; --text: #F1F5F9; --text-muted: #94A3B8; --border: #1E293B; --border-soft: #172033; --accent: var(--brand-bright); --accent-soft: #60A5FA; --accent-contrast: #FFFFFF; /* text on a blue button */ --accent-text: #60A5FA; /* blue used as TEXT/links on the stage */ --accent-wash: rgba(59, 130, 246, 0.12); --overlay: rgba(2, 6, 23, 0.72); --shadow-card: 0 20px 50px -20px rgba(0, 0, 0, 0.6); --shadow-lift: 0 26px 60px -22px rgba(0, 0, 0, 0.7); --success: #22c55e; --warn: #f59e0b; --error: #f87171; }