/* ========================================================================== theme.css — Uniqueue Design System (single source of truth) -------------------------------------------------------------------------- Load this file LAST in (after any page-specific stylesheet). Because :root declarations of the same custom property cascade by source order, the values below win over any legacy :root block still left in a page file — bringing every page back to ONE shared color theme, ONE radius/shadow scale, and ONE font family, without touching business logic in the page markup or JS. Do not delete this file's link from includes/header.php. ========================================================================== */ :root { /* ---------- Font (Helvetica everywhere) ---------- */ --font: Helvetica, Arial, sans-serif; --font-body: Helvetica, Arial, sans-serif; --font-display: Helvetica, Arial, sans-serif; /* ---------- Brand (maroon — ACCENT ONLY: buttons, links, icons. No longer used for large fills, headers, or card backgrounds. The office/admin sidebar uses a single solid maroon (#4a0a10), frozen to a literal hex value so this token change does not affect it — kept identical across every office/admin page.) ---------- */ --brand-primary: #660810; --brand-primary-light: #8a2e35; --brand-primary-dark: #450509; --brand-secondary: #270707; /* Aliases used across older page files — all repointed to brand maroon */ --red: var(--brand-primary-light); --red-deep: var(--brand-primary); --red-deeper: var(--brand-secondary); --red-bright: var(--brand-primary-light); --red-light: #a8434b; --red-glow: rgba(102,8,16,0.12); --red-soft: rgba(102,8,16,0.05); --red-border: rgba(102,8,16,0.16); --maroon: var(--brand-primary); --maroon-deep: var(--brand-secondary); --maroon-light: var(--brand-primary-light); /* ---------- Neutrals — white background everywhere, gray (not maroon-tinted) hairline borders ---------- */ --bg: #ffffff; --white: #ffffff; --off-white: #f7f7f8; --text: #1f1f1f; --gray: #7a7a7a; --light-gray: #f2f2f2; --border: rgba(20,20,20,0.10); --border-strong: rgba(20,20,20,0.18); --overlay: rgba(20,20,20,0.50); --ink: var(--text); --ink-mid: #4a4a4a; --ink-light: var(--gray); --ink-faint: #b7b7b7; --muted: var(--gray); --dim: var(--gray); --accent: #e3e3e3; --tan: #e3e3e3; --accent-soft: rgba(20,20,20,0.05); --primary-soft: rgba(102,8,16,0.05); --primary-tint: rgba(102,8,16,0.08); --cream: #ffffff; --cream-dark: #f2f2f2; --mist: var(--off-white); --smoke: var(--border); --smoke-dark: rgba(20,20,20,0.16); --surface: #ffffff; --surface-alt: #fafafa; /* ---------- Status colors (one palette site-wide) ---------- */ --success: #2e7d32; --success-light: #dff6dd; --success-bg: var(--success-light); --success-border: rgba(46,125,50,0.25); --warning: #b3791a; --warning-light: #f3e3d1; --warning-bg: var(--warning-light); --warning-border: rgba(179,121,26,0.35); --info: #1976d2; --info-light: #dcebfb; --info-bg: var(--info-light); --info-border: rgba(25,118,210,0.3); --info-text: var(--info); --purple: #7b1fa2; --purple-light: #f0e0f6; --danger: #c62828; --danger-light: #fbe0e0; --danger-dark: #b71c1c; --danger-bg: var(--danger-light); --green: var(--success); --green-soft: var(--success-light); --green-border: rgba(46,125,50,0.25); /* ---------- Radius scale (flat — small rounding, 6-8px) ---------- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 8px; --radius-xl: 8px; --radius-xxl: 10px; --radius-full: 999px; --radius: var(--radius-lg); /* ---------- Shadows — flat design: hairline borders instead of drop shadows. Kept as tokens (some components read them) but reduced to "none" for card-level elevation; a couple of true floating overlays (dropdowns/modals) keep a very light shadow for legibility. ---------- */ --shadow-xs: none; --shadow-sm: none; --shadow-md: 0 1px 3px rgba(20,20,20,0.08); --shadow-lg: 0 4px 16px rgba(20,20,20,0.12); --shadow-red: none; --card-shadow: none; --card-shadow-hi: none; --card-shadow-hover: none; --transition: 0.22s cubic-bezier(0.4,0,0.2,1); --ease: cubic-bezier(.22,1,.36,1); /* ---------- Layout constants kept for backward-compatibility ---------- */ --header-h: 64px; --footer-h: 45px; --nav-h: 80px; --gap: 14px; /* Card brand accent (dashboards) */ --card-brand: var(--brand-primary); --card-brand-light: var(--brand-primary-light); --card-brand-dark: var(--brand-primary-dark); --card-border: rgba(102,8,16,0.10); --card-border-soft: rgba(102,8,16,0.07); /* Student queue-status modal palette — now brand maroon, not off-brand red */ --modal-deep-red: var(--brand-primary); --modal-dark-red: var(--brand-secondary); --modal-stone: var(--off-white); --modal-clay: var(--accent); --modal-clay-soft: var(--accent-soft); --modal-gold: #e8b25c; --modal-gold-soft: rgba(232,178,92,0.16); /* Feedback module — remapped from its own one-off red to brand maroon */ --feedback-bg: #f3eeee; --feedback-card: #ffffff; --feedback-border: rgba(102,8,16,0.12); --feedback-text: var(--text); --feedback-muted: var(--gray); --feedback-primary: var(--brand-primary); --feedback-primary-hover: var(--brand-primary-dark); --feedback-success: var(--success); --feedback-success-bg: var(--success-light); --feedback-danger: var(--danger); --feedback-danger-bg: var(--danger-light); --feedback-shadow: var(--shadow-lg); /* staff-dashboard.css one-off tokens, unified to the same scale */ --border-strong-2: rgba(102,8,16,0.14); --skeleton-base: #ece3e3; --skeleton-highlight: #f6efef; } /* ---------- Global font enforcement (Helvetica only, everywhere) ---------- */ html, body { font-family: var(--font-body); } button, input, select, textarea { font-family: inherit; }