feat: initial sketch with AI

src/assets/base.css

@@ -1,53 +1,39 @@
-/* color palette from <https://github.com/vuejs/theme> */
+/* dttmr color palette - dark, modern, blueish */
 :root {
-  --vt-c-white: #ffffff;
-  --vt-c-white-soft: #f8f8f8;
-  --vt-c-white-mute: #f2f2f2;
+  --c-bg: #0a0e1a;
+  --c-bg-soft: #101627;
+  --c-bg-mute: #161d33;
+  --c-bg-elevated: #1a2338;
 
-  --vt-c-black: #181818;
-  --vt-c-black-soft: #222222;
-  --vt-c-black-mute: #282828;
+  --c-border: rgba(120, 150, 220, 0.16);
+  --c-border-hover: rgba(120, 150, 220, 0.32);
 
-  --vt-c-indigo: #2c3e50;
+  --c-text: #c7d0e6;
+  --c-text-soft: #8892b0;
+  --c-heading: #f1f4fc;
 
-  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
-  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
-  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
-  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+  --c-accent: #4f7dfa;
+  --c-accent-soft: #3a5fd9;
+  --c-accent-strong: #6c93ff;
+  --c-accent-bg: rgba(79, 125, 250, 0.14);
 
-  --vt-c-text-light-1: var(--vt-c-indigo);
-  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
-  --vt-c-text-dark-1: var(--vt-c-white);
-  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
-}
+  --c-success: #34d399;
+  --c-danger: #f87171;
+  --c-danger-bg: rgba(248, 113, 113, 0.12);
+  --c-warning: #fbbf24;
 
-/* semantic color variables for this project */
-:root {
-  --color-background: var(--vt-c-white);
-  --color-background-soft: var(--vt-c-white-soft);
-  --color-background-mute: var(--vt-c-white-mute);
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 18px;
 
-  --color-border: var(--vt-c-divider-light-2);
-  --color-border-hover: var(--vt-c-divider-light-1);
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
 
-  --color-heading: var(--vt-c-text-light-1);
-  --color-text: var(--vt-c-text-light-1);
+  --nav-height: 60px;
+  --safe-bottom: env(safe-area-inset-bottom, 0px);
+  --safe-top: env(safe-area-inset-top, 0px);
 
-  --section-gap: 160px;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-background: var(--vt-c-black);
-    --color-background-soft: var(--vt-c-black-soft);
-    --color-background-mute: var(--vt-c-black-mute);
-
-    --color-border: var(--vt-c-divider-dark-2);
-    --color-border-hover: var(--vt-c-divider-dark-1);
-
-    --color-heading: var(--vt-c-text-dark-1);
-    --color-text: var(--vt-c-text-dark-2);
-  }
+  color-scheme: dark;
 }
 
 *,
@@ -58,14 +44,15 @@
   font-weight: normal;
 }
 
+html {
+  -webkit-tap-highlight-color: transparent;
+}
+
 body {
   min-height: 100vh;
-  color: var(--color-text);
-  background: var(--color-background);
-  transition:
-    color 0.5s,
-    background-color 0.5s;
-  line-height: 1.6;
+  color: var(--c-text);
+  background: radial-gradient(circle at top, #101a33 0%, var(--c-bg) 55%);
+  line-height: 1.55;
   font-family:
     Inter,
     -apple-system,
@@ -84,3 +71,37 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+h1,
+h2,
+h3,
+h4 {
+  color: var(--c-heading);
+  font-weight: 600;
+}
+
+a {
+  color: var(--c-accent-strong);
+  text-decoration: none;
+}
+
+button {
+  font-family: inherit;
+}
+
+input,
+textarea,
+select {
+  font-family: inherit;
+  color-scheme: dark;
+}
+
+::selection {
+  background: var(--c-accent-bg);
+}
+
+/* scrollbars */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--c-border-hover) transparent;
+}