/* ============================================================ El Captain Sports Management — Design Tokens Light theme · RTL Arabic-first · Professional / Bank-grade ============================================================ */ :root { /* ---------------------------------------------------------- Brand Colors Primary: Deep Navy Blue — trust, authority, stability Accent: Teal/Cyan — action, CTAs, energy Gold: Warm Gold — premium highlights, badges ---------------------------------------------------------- */ /* Primary — Navy */ --color-primary: #1B2B4B; --color-primary-dark: #15294a; --color-primary-light: #2D4A7C; --color-primary-dim: #162340; --color-primary-ghost: rgba(27, 43, 75, 0.06); /* Accent — Teal */ --color-accent: #0891B2; --color-accent-dark: #0E7490; --color-accent-light: #22B8D8; --color-accent-ghost: rgba(8, 145, 178, 0.08); /* Gold — Premium */ --color-gold: #C9952B; --color-gold-light: #E5B94B; --color-gold-dark: #A87820; --color-gold-ghost: rgba(201, 149, 43, 0.08); /* ---------------------------------------------------------- Backgrounds (Light Theme) ---------------------------------------------------------- */ --bg-body: #F8FAFB; --bg-surface: #FFFFFF; --bg-elevated: #FFFFFF; --bg-muted: #F0F4F8; --bg-dark: #1B2B4B; --bg-dark-deeper: #111D33; /* ---------------------------------------------------------- Text ---------------------------------------------------------- */ --ink-primary: #1B2B4B; --ink-secondary: #4A5568; --ink-muted: #718096; --ink-placeholder: #A0AEC0; --ink-on-dark: #F8FAFB; --ink-on-dark-muted: #CBD5E0; --ink-link: #0891B2; --ink-link-hover: #0E7490; /* ---------------------------------------------------------- Borders ---------------------------------------------------------- */ --border-subtle: #E2E8F0; --border-default: #CBD5E0; --border-strong: #A0AEC0; --border-accent: rgba(8, 145, 178, 0.30); --border-primary: rgba(27, 43, 75, 0.20); /* ---------------------------------------------------------- Functional / Semantic ---------------------------------------------------------- */ --color-success: #10875A; --color-success-bg: #ECFDF5; --color-warning: #B45309; --color-warning-bg: #FFFBEB; --color-error: #B91C1C; --color-error-bg: #FEF2F2; --color-info: #0891B2; --color-info-bg: #EFF6FF; /* WhatsApp green */ --color-whatsapp: #25D366; --color-whatsapp-dark: #128C7E; /* ---------------------------------------------------------- Typography Scale: 1.25 ratio (Major Third) — conservative, refined Fluid values via clamp(): min at ~375px, max at ~1280px ---------------------------------------------------------- */ --font-primary: 'Cairo', 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; /* Line heights */ --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.6; --leading-relaxed: 1.75; --leading-loose: 1.9; /* Letter spacing */ --tracking-tight: -0.025em; --tracking-snug: -0.015em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-widest: 0.08em; /* Type scale */ --text-xs: clamp(0.694rem, 0.60vw + 0.55rem, 0.75rem); --text-sm: clamp(0.833rem, 0.70vw + 0.65rem, 0.875rem); --text-base: clamp(0.938rem, 0.80vw + 0.70rem, 1rem); --text-lg: clamp(1.063rem, 1.00vw + 0.75rem, 1.125rem); --text-xl: clamp(1.200rem, 1.20vw + 0.80rem, 1.375rem); --text-2xl: clamp(1.440rem, 1.60vw + 0.90rem, 1.750rem); --text-3xl: clamp(1.728rem, 2.20vw + 1.00rem, 2.250rem); --text-4xl: clamp(2.074rem, 3.00vw + 1.10rem, 2.813rem); --text-5xl: clamp(2.488rem, 4.00vw + 1.20rem, 3.500rem); /* ---------------------------------------------------------- Spacing Base: 4px · Fluid clamp() scale ---------------------------------------------------------- */ --space-2xs: clamp(0.125rem, 0.20vw, 0.25rem); /* 2–4px */ --space-xs: clamp(0.25rem, 0.40vw, 0.50rem); /* 4–8px */ --space-sm: clamp(0.50rem, 0.80vw, 0.75rem); /* 8–12px */ --space-md: clamp(0.75rem, 1.20vw, 1.25rem); /* 12–20px */ --space-lg: clamp(1.25rem, 2.00vw, 2.00rem); /* 20–32px */ --space-xl: clamp(2.00rem, 3.50vw, 3.00rem); /* 32–48px */ --space-2xl: clamp(3.00rem, 5.50vw, 5.00rem); /* 48–80px */ --space-3xl: clamp(5.00rem, 8.00vw, 7.00rem); /* 80–112px */ --space-section: clamp(5.00rem, 9.00vw, 8.00rem); /* section padding */ /* ---------------------------------------------------------- Border Radius — Conservative, professional ---------------------------------------------------------- */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; /* ---------------------------------------------------------- Shadows — Subtle, professional (not dramatic) Uses rgba so they work on colored backgrounds ---------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(27, 43, 75, 0.06); --shadow-sm: 0 1px 4px rgba(27, 43, 75, 0.08), 0 2px 6px rgba(27, 43, 75, 0.04); --shadow-md: 0 4px 12px rgba(27, 43, 75, 0.10), 0 2px 6px rgba(27, 43, 75, 0.06); --shadow-lg: 0 8px 28px rgba(27, 43, 75, 0.12), 0 4px 10px rgba(27, 43, 75, 0.07); --shadow-xl: 0 16px 48px rgba(27, 43, 75, 0.14), 0 6px 16px rgba(27, 43, 75, 0.08); --shadow-card: var(--shadow-md); --shadow-nav: 0 1px 0 var(--border-subtle), 0 2px 12px rgba(27, 43, 75, 0.07); --shadow-accent: 0 4px 18px rgba(8, 145, 178, 0.22); --shadow-gold: 0 4px 18px rgba(201, 149, 43, 0.25); --shadow-inset: inset 0 1px 2px rgba(27, 43, 75, 0.05); /* ---------------------------------------------------------- Transitions — Smooth, no springs, ease-out character ---------------------------------------------------------- */ --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 120ms; --duration-normal: 220ms; --duration-slow: 360ms; --duration-slower: 500ms; /* ---------------------------------------------------------- Z-index Scale ---------------------------------------------------------- */ --z-base: 0; --z-above: 10; --z-dropdown: 100; --z-sticky: 200; --z-mobile-menu: 300; --z-modal-bg: 400; --z-modal: 500; --z-toast: 600; --z-tooltip: 700; /* ---------------------------------------------------------- Layout ---------------------------------------------------------- */ --container-max: 1200px; --container-wide: 1400px; --content-max: 65ch; --nav-height: 4rem; /* ---------------------------------------------------------- Component Tokens — Buttons ---------------------------------------------------------- */ --btn-height-sm: 2.25rem; --btn-height-md: 2.75rem; --btn-height-lg: 3.25rem; --btn-radius: var(--radius-md); --btn-font-weight: 600; /* ---------------------------------------------------------- Component Tokens — Cards ---------------------------------------------------------- */ --card-bg: var(--bg-surface); --card-border: var(--border-subtle); --card-radius: var(--radius-lg); --card-padding: var(--space-lg); --card-shadow: var(--shadow-sm); --card-shadow-hover: var(--shadow-md); /* ---------------------------------------------------------- Brand Aliases ---------------------------------------------------------- */ --brand-primary: var(--color-primary); --brand-teal: var(--color-accent); }