/* ============================================================ CSS Custom Properties — Design Token System CNC Website · Dhofar University · 2026 ============================================================ */ :root { /* ── Brand Colors ───────────────────────────────────────── */ --color-primary: #1E3A8A; /* DU Deep Navy Blue */ --color-primary-light: #2563EB; /* Brighter blue (hover) */ --color-primary-dark: #1e3070; /* Deeper blue (press) */ --color-green: #22C55E; /* DU Green (logo tree) */ --color-green-dark: #16A34A; /* Deeper green (hover) */ --color-secondary: #C8A84B; /* DU Gold */ --color-secondary-light:#e8c76a; /* ── Backgrounds ────────────────────────────────────────── */ --color-bg: #F8FAFC; /* Page base (clean off-white) */ --color-bg-alt: #EFF6FF; /* Alternate section (faint blue) */ --color-bg-card: #FFFFFF; /* Card surface */ --color-bg-surface: #F1F5F9; /* Subtle surface / inputs */ --color-bg-dark: #1E293B; /* Dark footer / CTA strip */ --color-bg-dark-2: #0F172A; /* Deepest dark (overlays) */ --color-bg-light: #F8FAFC; /* Legacy alias */ --color-bg-surface-2: #E2E8F0; /* Legacy alias */ /* ── Legacy Tech-Layer aliases (mapped to primary) ─────── */ --color-accent: #1E3A8A; --color-glow: #2563EB; --color-accent-dim: rgba(30,58,138,0.08); /* ── Glass (white-based for light theme) ────────────────── */ --color-glass-bg: rgba(255,255,255,0.92); --color-glass-border: rgba(30,58,138,0.12); --color-glass-hover: rgba(30,58,138,0.05); /* ── Text ───────────────────────────────────────────────── */ --color-text-heading: #0F172A; /* Primary headings */ --color-text-body: #475569; /* Body / paragraph text */ --color-text-muted: #94A3B8; /* De-emphasized */ --color-text-faint: #CBD5E1; /* Very faint */ --color-text-light: #F8FAFC; /* Text on dark backgrounds */ --color-text-dark: #0F172A; /* ── Status ─────────────────────────────────────────────── */ --color-success: #22C55E; --color-warning: #F59E0B; --color-error: #EF4444; --color-info: #3B82F6; /* ── Division Card Accent Colors (DU logo rainbow) ──────── */ --color-div-1: #EC4899; /* Pink — IT Support */ --color-div-2: #38BDF8; /* Light Blue — Info Systems */ --color-div-3: #22C55E; /* Green — Audio & Video */ --color-div-4: #EAB308; /* Yellow — Data Center */ --color-div-5: #EF4444; /* Red — Academic Systems */ /* ── Typography ─────────────────────────────────────────── */ --font-display: 'Space Grotesk', 'Outfit', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; --font-arabic: 'IBM Plex Arabic', 'Cairo', system-ui, sans-serif; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; --text-6xl: 3.75rem; --text-7xl: 4.5rem; --font-light: 300; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --tracking-tight: -0.025em; --tracking-normal: 0; --tracking-wide: 0.05em; --tracking-wider: 0.1em; --tracking-widest: 0.2em; /* ── Spacing ─────────────────────────────────────────────── */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; /* ── Border Radius ──────────────────────────────────────── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-3xl: 28px; --radius-full: 9999px; /* ── Shadows (enterprise diffuse — no colored glows) ─────── */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.05); --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.06); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.05); --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.05); --shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.07); --shadow-card-hover: 0 4px 6px -1px rgba(0,0,0,0.10), 0 10px 28px rgba(0,0,0,0.10); /* Legacy glow vars mapped to neutral so old references do not break */ --glow-accent-sm: none; --glow-accent-md: none; --glow-accent-lg: none; --glow-gold-sm: none; --glow-gold-md: none; --glow-primary-md: var(--shadow-md); /* ── Transitions ────────────────────────────────────────── */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1); /* ── Z-Indices ──────────────────────────────────────────── */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; --z-a11y: 600; --z-loader: 9999; /* ── Layout ─────────────────────────────────────────────── */ --container-max: 1400px; --container-lg: 1200px; --container-md: 960px; --container-sm: 768px; --container-px: clamp(1rem, 5vw, 2rem); --navbar-height: 90px; --navbar-height-scrolled: 72px; /* ── Glass Mixins (kept for dark preloader only) ─────────── */ --glass-blur: blur(12px); --glass-blur-heavy: blur(20px); --glass-bg: rgba(255,255,255,0.92); --glass-border: 1px solid rgba(30,58,138,0.10); --glass-border-hover: 1px solid rgba(30,58,138,0.25); } /* ── RTL Root Overrides ─────────────────────────────────── */ [dir="rtl"] { --font-body: var(--font-arabic); --font-display: var(--font-arabic); --tracking-tight: 0; --tracking-wide: 0; --tracking-widest: 0; } /* ── Responsive Spacing Scale ───────────────────────────── */ @media (max-width: 767px) { :root { --space-20: 3rem; --space-16: 2.5rem; --space-12: 2rem; --space-10: 1.75rem; --navbar-height: 64px; } }