init project files

styles/globals.scss

@@ -0,0 +1,69 @@
+@use 'variables' as v;
+@use 'mixins';
+@use 'typography';
+@use 'animations';
+
+:root {
+  --bg:           #{v.$color-bg};
+  --bg-2:         #{v.$color-bg-2};
+  --bg-3:         #{v.$color-bg-3};
+  --border:       #{v.$color-border};
+  --border-light: #{v.$color-border-light};
+  --text:         #{v.$color-text};
+  --text-2:       #{v.$color-text-2};
+  --text-3:       #{v.$color-text-3};
+  --accent:       #{v.$color-accent};
+  --accent-dark:  #{v.$color-accent-dark};
+  --accent-alpha: #{v.$color-accent-alpha};
+  --radius:       8px;
+  --radius-lg:    14px;
+  --transition:   0.25s ease;
+}
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+html {
+  scroll-behavior: smooth;
+  font-size: clamp(15px, 2vw, 16px);
+  overflow-x: hidden;
+}
+
+body {
+  font-family: var(--font-body, 'DM Sans', sans-serif);
+  background: var(--bg);
+  color: var(--text);
+  line-height: 1.7;
+  -webkit-font-smoothing: antialiased;
+  overflow-x: hidden;
+  min-width: 0;
+}
+
+::selection {
+  background: var(--accent-alpha);
+  color: var(--accent-dark);
+}
+
+a { color: inherit; text-decoration: none; }
+
+img, video { max-width: 100%; display: block; }
+
+button { cursor: pointer; font: inherit; }
+
+.skipLink {
+  position: absolute;
+  top: -100px;
+  left: 0.5rem;
+  z-index: 9999;
+  padding: 0.5rem 1rem;
+  background: var(--accent);
+  color: #fff;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border-radius: var(--radius);
+  transition: top 0.2s ease;
+}
+.skipLink:focus {
+  top: 0.5rem;
+  outline: 2px solid var(--text);
+  outline-offset: 2px;
+}