/* ============================================================ design-tokens.css — NLU Delhi Career Portal Phase 4.0 foundation (2026-04-19) ------------------------------------------------------------ Single source of truth for colour / type / spacing / shadows. Defined as CSS custom properties at :root so every downstream stylesheet (custom-style.css, login.php inline, future BS5 migration) can reference them with `var(--token-name)`. Rules of engagement: 1. Do NOT re-hard-code any colour / spacing in new CSS — pull it from here. 2. If a new value is needed (e.g. a second accent), add it as a token here first, then use it. 3. Existing custom-style.css is not yet refactored to pull from tokens — that's a Phase 4.1 task. New files must use tokens from day one. Tokens are grouped: COLOUR · TYPE · SPACING · RADII · SHADOWS · MOTION · Z-INDEX. Names follow --category-role-shade so grep-ability is preserved. ============================================================ */ :root { /* ---------- COLOUR · brand primary (the NLU indigo) ------- */ /* The portal's current dominant hue is #667eea (19 uses in custom-style.css). We keep it as the brand-primary-500 and derive a 100/300/700/900 ladder around it for hover, focus, muted, and dark modes. */ --color-brand-primary-100: #eef0ff; --color-brand-primary-300: #a7b0ef; --color-brand-primary-500: #667eea; /* primary CTA fill */ --color-brand-primary-700: #4e61c4; /* hover / pressed */ --color-brand-primary-900: #2c3a82; /* text-on-light accent */ /* ---------- COLOUR · brand accent (the purple pair) ------- */ /* #764ba2 appears next to #667eea in every profile-header gradient. Keep it as the accent so headers / badges have one canonical gradient: linear-gradient(135deg, var(--grad-brand-start), var(--grad-brand-end)) */ --color-brand-accent-500: #764ba2; --color-brand-accent-700: #5a3680; --grad-brand-start: var(--color-brand-primary-500); --grad-brand-end: var(--color-brand-accent-500); /* ---------- COLOUR · status -------------------------------- */ --color-success-500: #28a745; --color-success-100: #d4edda; --color-success-900: #155724; --color-warning-500: #ffc107; --color-warning-100: #fff3cd; --color-warning-900: #856404; --color-danger-500: #dc3545; --color-danger-100: #f8d7da; --color-danger-900: #721c24; --color-info-500: #0dcaf0; --color-info-100: #cff4fc; --color-info-900: #055160; /* ---------- COLOUR · neutrals ----------------------------- */ --color-neutral-000: #ffffff; --color-neutral-050: #f8f9fa; /* page-bg soft */ --color-neutral-100: #f1f4f8; /* surface subtle border */ --color-neutral-200: #e9ecef; /* default border */ --color-neutral-300: #dee2e6; /* input border */ --color-neutral-400: #ced4da; --color-neutral-500: #adb5bd; --color-neutral-600: #6c757d; /* muted text */ --color-neutral-700: #495057; /* body text default */ --color-neutral-800: #343a40; /* heading on light */ --color-neutral-900: #212529; /* strongest heading */ /* ---------- COLOUR · semantic aliases --------------------- */ /* These are the names consuming CSS should prefer. Swapping to a dark theme later = re-point these aliases, no downstream edits. Token values above are the atomic layer. */ --color-bg-page: var(--color-neutral-050); --color-bg-surface: var(--color-neutral-000); --color-bg-muted: var(--color-neutral-100); --color-text-body: var(--color-neutral-700); --color-text-heading: var(--color-neutral-900); --color-text-muted: var(--color-neutral-600); --color-text-link: var(--color-brand-primary-700); --color-border: var(--color-neutral-300); --color-border-soft: var(--color-neutral-200); --color-focus-ring: var(--color-brand-primary-500); /* ---------- TYPE · family --------------------------------- */ /* Kept Segoe UI as the existing default for continuity. The system-ui fallback covers macOS / iOS / Linux. */ --font-family-base: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; --font-family-mono: 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace; /* ---------- TYPE · scale (1.25 "major third") ------------- */ --font-size-xs: 0.75rem; /* 12 px — captions, hint text */ --font-size-sm: 0.875rem; /* 14 px — meta, secondary */ --font-size-base: 1rem; /* 16 px — body default */ --font-size-md: 1.125rem; /* 18 px — emphasised lede */ --font-size-lg: 1.25rem; /* 20 px — section sub-head */ --font-size-xl: 1.5rem; /* 24 px — card title */ --font-size-2xl: 1.875rem; /* 30 px — page heading */ --font-size-3xl: 2.25rem; /* 36 px — hero heading */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.2; --line-height-snug: 1.35; --line-height-base: 1.5; --line-height-relaxed: 1.7; /* ---------- SPACING (4-px base, 8-pt rhythm) -------------- */ --space-0: 0; --space-1: 0.25rem; /* 4 px */ --space-2: 0.5rem; /* 8 px */ --space-3: 0.75rem; /* 12 px */ --space-4: 1rem; /* 16 px */ --space-5: 1.5rem; /* 24 px */ --space-6: 2rem; /* 32 px */ --space-7: 2.5rem; /* 40 px */ --space-8: 3rem; /* 48 px */ --space-9: 4rem; /* 64 px */ --space-10: 5rem; /* 80 px */ /* ---------- RADII ----------------------------------------- */ /* The existing portal uses mostly border-radius: 0 (square cards) with a couple of rounded buttons. Keep that vibe: sm for inputs, md for buttons/cards, full for pills. */ --radius-none: 0; --radius-sm: 0.125rem; /* 2 px — inputs, textarea */ --radius-md: 0.25rem; /* 4 px — buttons, small cards */ --radius-lg: 0.5rem; /* 8 px — modals, prominent */ --radius-xl: 1rem; /* 16 px — hero elements */ --radius-full: 9999px; /* pills, avatars */ /* ---------- SHADOWS --------------------------------------- */ /* Four tiers, matching Material-ish elevation. Referenced by card / dropdown / modal / toast. */ --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05); --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04); --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.10), 0 2px 4px -2px rgba(16, 24, 40, 0.06); --shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03); --shadow-xl: 0 20px 24px -4px rgba(16, 24, 40, 0.08), 0 8px 8px -4px rgba(16, 24, 40, 0.03); /* Focus ring — 3-px offset soft indigo. WCAG 2.1 non-text contrast ≥ 3:1 against typical card backgrounds. */ --shadow-focus: 0 0 0 3px rgba(102, 126, 234, 0.45); /* ---------- MOTION ---------------------------------------- */ --motion-duration-fast: 120ms; --motion-duration-base: 200ms; --motion-duration-slow: 320ms; --motion-ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); --motion-ease-emphasised: cubic-bezier(0.2, 0.0, 0.0, 1); /* ---------- Z-INDEX ladder --------------------------------- */ --z-base: 1; --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal: 1050; --z-toast: 1080; --z-skiplink: 1100; /* must sit above sticky navs */ } /* ============================================================ Dark-theme scaffolding — kept commented so the palette swap is one un-comment away once a dark toggle is added in Phase 4.3+. Atomic tokens stay; only the semantic aliases re-point. ============================================================ @media (prefers-color-scheme: dark) { :root { --color-bg-page: #0f1220; --color-bg-surface: #1b1f33; --color-bg-muted: #252a42; --color-text-body: #d7dcea; --color-text-heading: #ffffff; --color-text-muted: #8f97b2; --color-border: #2f3555; --color-border-soft: #252a42; } } ============================================================ */ /* ============================================================ Motion-reduction guard — everything animating by default should honour the user's reduce-motion preference. ============================================================ */ @media (prefers-reduced-motion: reduce) { :root { --motion-duration-fast: 0ms; --motion-duration-base: 0ms; --motion-duration-slow: 0ms; } }