/* Scholar Ghana design tokens: brand colors, type scale, spacing, and shared primitives. */ :root { /* Brand palette */ --color-green-900: #052e1f; --color-green-800: #0a3d29; --color-green-700: #0f5c3c; --color-green-600: #147a4d; --color-green-100: #e3efe8; --color-green-50: #f2f7f4; --color-gold-600: #a97c1f; --color-gold-500: #c99a2e; --color-gold-400: #dcb45a; --color-gold-100: #faf1dd; --color-red-700: #8a2b23; --color-red-600: #b3362b; --color-red-100: #f6dfdb; --color-red-50: #fbf0ee; --color-charcoal: #1f2523; --color-surface: #f7f8f6; --color-white: #ffffff; --color-border: #e2e5e2; --color-text-muted: #5b655f; --color-text-subtle: #8a938c; /* Neutral gray scale — admin-shell chrome (sidebar/topbar backgrounds, dividers, muted surfaces). Sits alongside the brand green/gold scales; green stays the primary action/active-state color, gold the secondary accent — grays are structural only, never a brand color. */ --color-gray-50: #f9fafb; --color-gray-100: #f3f4f6; --color-gray-200: #e5e7eb; --color-gray-300: #d1d5db; --color-gray-400: #9ca3af; --color-gray-500: #6b7280; --color-gray-600: #4b5563; --color-gray-700: #374151; --color-gray-800: #1f2937; --color-gray-900: #111827; /* Info/in-progress accent — the status system (Submitted, Under Review, Refunded, ...) needs a fourth semantic color; green/gold/red alone would overload their meaning (e.g. "in progress" isn't a warning or a success). */ --color-blue-700: #1d4ed8; --color-blue-600: #2563eb; --color-blue-100: #dbeafe; --color-blue-50: #eff6ff; /* Dashboard/admin shell "card" surface — a distinct token from --color-white since --color-white is also used as literal on-color text (button/badge text) that must stay white in both themes. Light default here; dark override lives in the [data-theme="dark"] block below. */ --color-card: var(--color-white); /* Typography */ --font-family-base: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --font-size-xs: 0.8rem; --font-size-sm: 0.9rem; --font-size-base: 1rem; --font-size-md: 1.125rem; --font-size-lg: 1.25rem; --font-size-xl: 1.5rem; --font-size-2xl: 1.875rem; --font-size-3xl: 2.25rem; --font-size-4xl: 2.75rem; --font-size-5xl: 3.25rem; /* Spacing scale */ --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; /* Layout */ --content-max-width: 80rem; --content-padding-inline: 1.25rem; --header-height: 4.5rem; --sidebar-width: 17rem; --sidebar-width-collapsed: 4.75rem; --topbar-height: 4rem; /* Radius */ --radius-sm: 0.375rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-xl: 1.25rem; --radius-full: 9999px; /* Shadow */ --shadow-sm: 0 1px 2px rgba(5, 46, 31, 0.06); --shadow-md: 0 8px 24px rgba(5, 46, 31, 0.1); --shadow-lg: 0 20px 45px rgba(5, 46, 31, 0.16); /* Motion */ --transition-fast: 150ms ease; --transition-base: 200ms ease; /* Z-index scale — the admin shell stacks a sidebar, a sticky topbar, a mobile drawer overlay, and dialogs/dropdowns; nothing defined a scale for this before since only one z-index (dashboard-topbar's) existed. */ --z-sidebar: 30; --z-topbar: 40; --z-overlay: 45; --z-dropdown: 50; --z-modal: 60; } /* Dark theme overrides — moved here from dashboard.css so any page that sets data-theme="dark" on (dashboard AND, as of this redesign, the admin portal) gets the identical palette from one place, rather than each app shell re-deriving its own dark colors. Component-specific dark overrides (e.g. .scholarship-card, .field__input) stay in the stylesheet that owns that component. */ :root[data-theme="dark"] { --color-surface: #0b1310; --color-card: #131f18; --color-border: #223027; --color-charcoal: #eef2ef; --color-text-muted: #a9b6ae; --color-text-subtle: #7c8a80; --color-green-800: #12503a; --color-green-700: #1c9463; --color-green-600: #2bb37e; --color-green-100: #113224; --color-green-50: #0d2419; --color-gold-600: #e0b054; --color-gold-100: #2e2411; --color-red-700: #e5695c; --color-red-600: #f0857a; --color-red-100: #3a1613; --color-red-50: #2a100e; --color-blue-700: #5b9bf5; --color-blue-600: #7cb0f7; --color-blue-100: #163256; --color-blue-50: #0f2340; --color-gray-50: #161f1a; --color-gray-100: #1c2921; --color-gray-200: #223027; --color-gray-300: #3a4a40; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-lg: 0 20px 45px rgba(0, 0, 0, 0.6); }