/* ============================================================ FOUNDATION — DESIGN TOKENS FILE: assets/css/tokens.css Phase 1.1 of the Final Master Roadmap, Stage 1. Owns: every reusable design value in the project. No section- specific values live here. No selectors other than :root. Loaded FIRST in the CSS order (Phase 1.0 §6) — every other stylesheet in the project may read these, none may redefine them. ============================================================ */ :root { /* ---------------------------------------------------------- COLOR — brand ---------------------------------------------------------- */ --color-navy: #0B2545; /* primary deep navy */ --color-navy-rgb: 11, 37, 69; --color-gold: #C9A227; /* accent gold/amber */ --color-gold-rgb: 201, 162, 39; --color-white: #FFFFFF; --color-light-gray: #F5F6F8; /* neutral surface */ --color-dark-gray: #333333; /* neutral body text */ /* COLOR — semantic */ --color-success: #2E8B57; --color-error: #D64545; --color-warning: #C97A22; /* ---------------------------------------------------------- TYPOGRAPHY ---------------------------------------------------------- */ --font-heading: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* Bilingual/RTL foundation — Stage 6.5. Noto Nastaliq Urdu is the primary choice: it is the rendering Urdu-literate readers expect (a Naskh-style substitute reads as visibly foreign to them), and it is the one free, broadly-supported web font with full Urdu coverage. Loaded with font-display: swap (see rtl.css) so this never blocks first paint; only pages with dir="rtl" content pay the cost, via the "Urdu-loaded pages only" link in each Urdu page's — not on every English page. */ --font-urdu: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif; /* Fluid type scale — desktop reference sizes in the comment, clamp() used for responsiveness */ --text-h1: clamp(2.25rem, 1.7rem + 2.2vw, 3rem); /* ~36px -> 48px */ --text-h2: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem); /* ~28px -> 36px */ --text-h3: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); /* ~22px -> 28px */ --text-body: 1rem; /* 16px */ --text-small: 0.875rem; /* 14px */ --line-height-heading: 1.15; --line-height-body: 1.6; /* ---------------------------------------------------------- SPACING — 8px scale ---------------------------------------------------------- */ --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 40px; --space-6: 48px; --space-8: 64px; --space-10: 80px; --space-12: 96px; /* ---------------------------------------------------------- LAYOUT ---------------------------------------------------------- */ --container-max-width: 1280px; --container-padding-inline: var(--space-3); /* ---------------------------------------------------------- BREAKPOINT REFERENCE VALUES (documented tokens for use inside @media queries — CSS custom properties cannot be used as media-query values, so these exist as the single source of truth to copy from) ---------------------------------------------------------- */ --breakpoint-mobile: 480px; --breakpoint-tablet: 768px; --breakpoint-desktop: 1024px; --breakpoint-wide: 1441px; /* ---------------------------------------------------------- RADIUS ---------------------------------------------------------- */ --radius-sm: 4px; --radius-btn: 8px; --radius-card: 12px; --radius-lg: 20px; --radius-pill: 999px; /* ---------------------------------------------------------- SHADOW ---------------------------------------------------------- */ --shadow-sm: 0 1px 3px rgba(var(--color-navy-rgb), 0.10); --shadow-md: 0 4px 14px rgba(var(--color-navy-rgb), 0.14); --shadow-lg: 0 12px 32px rgba(var(--color-navy-rgb), 0.18); /* ---------------------------------------------------------- SURFACE / GLASS — base values consumed by surfaces.css ---------------------------------------------------------- */ --glass-bg: rgba(255, 255, 255, 0.07); --glass-bg-strong: rgba(var(--color-navy-rgb), 0.72); --glass-border: rgba(255, 255, 255, 0.16); --glass-blur: 18px; --glass-blur-strong: 22px; --glass-highlight: rgba(255, 255, 255, 0.28); /* ---------------------------------------------------------- BORDER ---------------------------------------------------------- */ --border-hairline: 1px solid rgba(var(--color-navy-rgb), 0.12); --border-hairline-light: 1px solid rgba(255, 255, 255, 0.16); /* ---------------------------------------------------------- Z-INDEX SCALE A small, logical scale — every later phase consumes one of these named tokens rather than inventing an arbitrary number. ---------------------------------------------------------- */ --z-base: 1; /* default stacking within a section */ --z-decorative: 0; /* background/decorative layers, pointer-events: none */ --z-content: 10; /* text/content layer above decorative layers */ --z-sticky: 100; /* sticky in-page elements (e.g. announcement bar) */ --z-header: 900; /* site header */ --z-dropdown: 910; /* mega menu / dropdown panels */ --z-overlay: 950; /* backdrop / scrim */ --z-modal: 960; /* mobile menu, modal dialogs */ --z-toast: 980; /* toast/notification layer */ /* ---------------------------------------------------------- MOTION ---------------------------------------------------------- */ --ease-premium: cubic-bezier(0.22, 1, 0.36, 1); --duration-fast: 200ms; --duration-base: 300ms; --duration-slow: 400ms; }