initial commit, setup

app/globals.css

@@ -1,26 +1,107 @@
-@import "tailwindcss";
-
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+
+  /*  Background  */
+  --bg:              #101114;
+  --bg-raised:       #141518;
+  --surface:         #1a1b1f;
+  --surface-hover:   #212229;
+  --surface-active:  #282a33;
+ 
+  /*  Border  */
+  --border:          #2c2d34;
+  --border-strong:   #3d3f48;
+  --border-subtle:   #232429;
+ 
+  /*  Foreground / text  */
+  --fg:              #e4e5e9;
+  --fg-secondary:    #a0a3ad;
+  --muted:           #5f6270;
+  --faint:           #43454f;
+ 
+  /*  Accent  */
+  --accent:          #8a9dff;
+  --accent-hover:    #9dacff;
+  --accent-strong:   #7088ff;
+  --accent-bg:       rgba(138, 157, 255, 0.08);
+  --accent-bg-hover: rgba(138, 157, 255, 0.14);
+ 
+  /*  Semantic  */
+  --success:         #5ec98f;
+  --success-bg:      rgba(94, 201, 143, 0.08);
+  --warning:         #e0a855;
+  --warning-bg:      rgba(224, 168, 85, 0.08);
+  --error:           #e06565;
+  --error-bg:        rgba(224, 101, 101, 0.08);
+  --info:            #60a5d6;
+  --info-bg:         rgba(96, 165, 214, 0.08);
+ 
+  /*  Overlay / depth  */
+  --overlay:         rgba(0, 0, 0, 0.55);
+  --shadow-sm:       0 1px 3px rgba(0, 0, 0, 0.25);
+  --shadow-md:       0 4px 16px rgba(0, 0, 0, 0.30);
+  --shadow-lg:       0 8px 32px rgba(0, 0, 0, 0.35);
+ 
+  /*  Radii  */
+  --radius-sm:       4px;
+  --radius-md:       6px;
+  --radius-lg:       10px;
+  --radius-xl:       16px;
+ 
+  /*  Spacing  */
+  --space-1:         4px;
+  --space-2:         8px;
+  --space-3:         12px;
+  --space-4:         16px;
+  --space-5:         20px;
+  --space-6:         24px;
+  --space-8:         32px;
+  --space-10:        40px;
+  --space-12:        48px;
+  --space-16:        64px;
+ 
+  /*  Typography  */
+  --text-xs:         11px;
+  --text-sm:         13px;
+  --text-base:       15px;
+  --text-lg:         18px;
+  --text-xl:         22px;
+  --text-2xl:        28px;
+  --text-3xl:        36px;
+  --text-4xl:        42px;
+  --leading-tight:   1.2;
+  --leading-normal:  1.5;
+  --leading-relaxed: 1.7;
+ 
+  /*  Transitions  */
+  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
+  --duration-fast:   120ms;
+  --duration-normal: 200ms;
+  --duration-slow:   350ms;
 }
 
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
 }
 
 body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  background: var(--bg);
+  color: var(--fg);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+::selection {
+  background: rgba(110, 231, 183, 0.25);
+  color: var(--fg);
+}
+
+@media (max-width: 640px) {
+  h1 {
+    font-size: 32px !important;
+  }
 }