feat: style layers, imports and nesting

src/assets/styles/defaults/animations.css

@@ -0,0 +1,4 @@
+@keyframes spin {
+  from { transform: rotate(0deg) }
+  to { transform: rotate(360deg) }
+}

src/assets/styles/defaults/fonts.css

@@ -0,0 +1,13 @@
+@font-face {
+  font-family: Poppins;
+  src: url('/assets/fonts/Poppins-Bold.min.woff2') format("woff2");
+  font-weight: 700;
+  font-display: optional
+}
+
+@font-face {
+  font-family: Poppins;
+  src: url('/assets/fonts/Poppins-Regular.min.woff2') format("woff2");
+  font-weight: 400;
+  font-display: optional
+}

src/assets/styles/defaults/vars.css

@@ -0,0 +1,166 @@
+:root {
+  /* colors */
+  --blue-50: #eff5ff;
+  --blue-100: #dbe8fe;
+  --blue-200: #bfd7fe;
+  --blue-300: #93bbfd;
+  --blue-400: #609afa;
+  --blue-500: #3b82f6;
+  --blue-600: #2570eb;
+  --blue-700: #1d64d8;
+  --blue-800: #1e55af;
+  --blue-900: #1e478a;
+  --blue-950: #172e54;
+
+  --gray-50: #f6f7f8;
+  --gray-100: #eaecef;
+  --gray-200: #d9dee4;
+  --gray-300: #b8c2cc;
+  --gray-400: #a0adba;
+  --gray-500: #8996a8;
+  --gray-600: #778399;
+  --gray-700: #6b748a;
+  --gray-800: #5a6173;
+  --gray-900: #4b515d;
+  --gray-950: #30333b;
+
+  --white: #fff;
+  --black: #000;
+
+  --gray-light: var(--gray-200);
+  --gray-lighter: var(--gray-50);
+  --gray-dark: var(--gray-700);
+
+  /* base theme */
+  --color-lightest: var(--white);
+  --color-darkest: var(--black);
+  --text-color: var(--color-darkest);
+  --background-color: var(--color-lightest);
+  --text-color-inverted: var(--color-lightest);
+  --background-color-inverted: var(--color-darkest);
+  --accent-color: var(--blue-600);
+  --accent-color-hover: var(--blue-800);
+  --selection-color: var(--accent-color);
+
+  --brand-hey: #5522fa;
+  --brand-github: #333;
+  --brand-npm: #cc3534;
+  --brand-mastodon: #6364ff;
+  --brand-lastfm: #d51007;
+  --brand-trakt: #ed1c24;
+  --brand-storygraph: #14919b;
+  --brand-buy-me-a-coffee: #40dca5;
+  --brand-rss: #f26522;
+  --webrings: #ec8fd0;
+  --moon: #655ad2;
+  --sun: #ffa700;
+
+  /* fonts */
+  --font-sans: "Poppins", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
+  --font-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, ui-monospace, monospace;
+
+  /* text */
+  --font-size-xs: .75rem;
+  --line-height-xs: 1rem;
+
+  --font-size-sm: .875rem;
+  --line-height-sm: 1.25rem;
+
+  --font-size-base: 1rem;
+  --line-height-base: 1.5rem;
+
+  --font-size-lg: 1.125rem;
+  --line-height-lg: 1.75rem;
+
+  --font-size-xl: 1.25rem;
+  --line-height-xl: 1.75rem;
+
+  --font-size-2xl: 1.5rem;
+  --line-height-2xl: 2rem;
+
+  --font-size-3xl: 1.875rem;
+  --line-height-3xl: 2.25rem;
+
+  --font-weight-base: 400;
+  --font-weight-bold: 700;
+
+  /* spacing */
+  --sizing-xs: .25rem;
+  --sizing-sm: .5rem;
+  --sizing-md: .75rem;
+  --sizing-lg: 1rem;
+  --sizing-base: 1.25rem;
+  --sizing-xl: 1.5rem;
+  --sizing-2xl: 1.75rem;
+  --sizing-3xl: 2rem;
+
+  /* radii */
+  --rounded-none: 0;
+  --rounded-sm: .125rem;
+  --rounded: .25rem;
+  --rounded-md: .375rem;
+  --rounded-lg: .5rem;
+  --rounded-full: 9999px;
+
+  /* transitions */
+  --transition-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-duration-default: 300ms;
+
+  /* svgs */
+  --stroke-width-default: 1.4;
+  --stroke-width-bold: 2;
+
+  /* input accent color */
+  accent-color: var(--accent-color);
+}
+
+/* dark theme */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --text-color: var(--color-lightest);
+    --background-color: var(--color-darkest);
+    --text-color-inverted: var(--color-darkest);
+    --background-color-inverted: var(--color-lightest);
+    --accent-color: var(--blue-400);
+    --accent-color-hover: var(--blue-200);
+    --gray-light: var(--gray-900);
+    --gray-lighter: var(--gray-950);
+    --gray-dark: var(--gray-300);
+    --brand-github: #f5f5f5;
+  }
+}
+
+/* light theme */
+:root.theme__light {
+  --text-color: var(--color-darkest);
+  --background-color: var(--color-lightest);
+  --text-color-inverted: var(--color-lightest);
+  --background-color-inverted: var(--color-darkest);
+  --accent-color: var(--blue-600);
+  --accent-color-hover: var(--blue-800);
+  --selection-color: var(--accent-color);
+  --gray-light: var(--gray-200);
+  --gray-lighter: var(--gray-50);
+  --gray-dark: var(--gray-700);
+  --brand-github: #333;
+}
+
+/* dark theme */
+:root.theme__dark {
+  --text-color: var(--color-lightest);
+  --background-color: var(--color-darkest);
+  --text-color-inverted: var(--color-darkest);
+  --background-color-inverted: var(--color-lightest);
+  --accent-color: var(--blue-400);
+  --accent-color-hover: var(--blue-200);
+  --gray-light: var(--gray-900);
+  --gray-lighter: var(--gray-950);
+  --gray-dark: var(--gray-300);
+  --brand-github: #f5f5f5;
+}
+
+@media (prefers-reduced-motion) {
+  :root {
+    --transition-duration-default: 0.01ms;
+  }
+}