Reduce dependency on CSS custom properties

[taesungh]

Following from #52/#53, the site relies on CSS custom properties, notably for colors, in several places which can lead to unexpected behavior especially when placed on the :root element. We can better use SASS variables to enforce references for more predictable changes and better compile-time guarantees.

• Remove custom properties on :root
• Update consumers accordingly to use other selectors such as class names to apply values from SASS variables

[ryqndev]

I think the issue with the recent regression is that there isn't a design system in place. Core CSS variables for theming should stay and we shouldn't revert to SASS variables. The variables are, themselves, agnostic to the color values they have. They're simply supposed to represent their meaning.. for example: var(--primary-300), var(--primary-400), `var(--accent-800).

I think a very realistic goal for us to have themes and/or dark mode toggles, etc and SASS variables dont' allow for that. We should be able to easily retheme our entire app, introduce a dark mode, for example, by just toggling the CSS variables slightly.

We may, for example, change the pastel (--peach) color into a darker shade to complement a dark mode - which is what CSS vars allow for.

[taesungh]

I understand the potential flexibility, but as of present, we aren't using semantic names (e.g. primary, secondary) for our colors, and even if we wanted to, SASS would likely provide a more robust system with compile-time checks on named references or mixins (but I suppose this is all superfluous when considering no checks are provided on class names sourced from CSS modules). I can see the ease of flexibility in theming with CSS custom properties, but there are definitely places in the JSX where references to CSS variables could be replaced with class names for SASS to check references, perhaps with a mixin if we want to maintain dynamic properties.