feat: initialize reactjs project using vite

src/styles/global.css

@@ -0,0 +1,140 @@
+@import './theme.css';
+
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  scroll-behavior: smooth;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  font-family: var(--md-sys-typescale-body-font);
+  background-color: var(--md-sys-color-background);
+  color: var(--md-sys-color-on-background);
+  line-height: 1.6;
+  min-height: 100vh;
+  overflow-x: hidden;
+}
+
+#root {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Typography */
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--md-sys-typescale-display-font);
+  font-weight: 600;
+  line-height: 1.2;
+  color: var(--md-sys-color-on-surface);
+}
+
+h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
+h2 { font-size: clamp(2rem, 4vw, 3rem); }
+h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
+h4 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
+
+p {
+  color: var(--md-sys-color-on-surface);
+  opacity: 0.87;
+}
+
+a {
+  color: var(--md-sys-color-primary);
+  text-decoration: none;
+  transition: color var(--transition-fast);
+}
+
+a:hover {
+  color: var(--md-sys-color-on-primary-container);
+}
+
+code {
+  font-family: var(--md-sys-typescale-code-font);
+  background: var(--md-sys-color-surface-container);
+  padding: 0.2em 0.4em;
+  border-radius: var(--radius-sm);
+  font-size: 0.9em;
+}
+
+/* Focus styles */
+:focus-visible {
+  outline: 2px solid var(--md-sys-color-primary);
+  outline-offset: 2px;
+}
+
+/* Selection */
+::selection {
+  background: var(--md-sys-color-primary);
+  color: var(--md-sys-color-on-primary);
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--md-sys-color-surface-container);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--md-sys-color-outline);
+  border-radius: var(--radius-full);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--md-sys-color-outline-variant);
+}
+
+/* Container utility */
+.container {
+  width: 100%;
+  max-width: var(--container-xl);
+  margin: 0 auto;
+  padding: 0 var(--space-lg);
+}
+
+/* Section spacing */
+section {
+  padding: var(--space-3xl) 0;
+}
+
+/* Smooth page transitions */
+.page-enter {
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+.page-enter-active {
+  opacity: 1;
+  transform: translateY(0);
+  transition: opacity 300ms ease-out, transform 300ms ease-out;
+}
+
+/* Hide custom cursor on touch devices */
+@media (hover: none) and (pointer: coarse) {
+  .custom-cursor {
+    display: none !important;
+  }
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+  
+  html {
+    scroll-behavior: auto;
+  }
+}

src/styles/theme.css

@@ -0,0 +1,86 @@
+/* Material 3 Expressive Dark Theme - Green Tonal Palette */
+:root {
+  /* Primary Green Tonal */
+  --md-sys-color-primary: #7FD998;
+  --md-sys-color-on-primary: #003919;
+  --md-sys-color-primary-container: #005227;
+  --md-sys-color-on-primary-container: #9AF6B2;
+  
+  /* Secondary - Muted Green */
+  --md-sys-color-secondary: #B4CCB9;
+  --md-sys-color-on-secondary: #202D24;
+  --md-sys-color-secondary-container: #364339;
+  --md-sys-color-on-secondary-container: #D0E8D4;
+  
+  /* Tertiary - Accent (subtle red from logo) */
+  --md-sys-color-tertiary: #F2B8B5;
+  --md-sys-color-on-tertiary: #4C2524;
+  --md-sys-color-tertiary-container: #6B3A39;
+  --md-sys-color-on-tertiary-container: #FFDAD7;
+  
+  /* Error */
+  --md-sys-color-error: #FFB4AB;
+  --md-sys-color-on-error: #690005;
+  --md-sys-color-error-container: #93000A;
+  --md-sys-color-on-error-container: #FFDAD6;
+  
+  /* Background & Surface - Dark with green undertone */
+  --md-sys-color-background: #0F1410;
+  --md-sys-color-on-background: #E1E3DF;
+  --md-sys-color-surface: #0F1410;
+  --md-sys-color-on-surface: #E1E3DF;
+  
+  /* Surface Variants */
+  --md-sys-color-surface-dim: #0F1410;
+  --md-sys-color-surface-bright: #353A36;
+  --md-sys-color-surface-container-lowest: #0A0F0B;
+  --md-sys-color-surface-container-low: #171D18;
+  --md-sys-color-surface-container: #1B211C;
+  --md-sys-color-surface-container-high: #252B26;
+  --md-sys-color-surface-container-highest: #303631;
+  
+  /* Outline */
+  --md-sys-color-outline: #8B9389;
+  --md-sys-color-outline-variant: #414942;
+  
+  /* Inverse */
+  --md-sys-color-inverse-surface: #E1E3DF;
+  --md-sys-color-inverse-on-surface: #2E332F;
+  --md-sys-color-inverse-primary: #006D36;
+  
+  /* Shadows & Elevation */
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  
+  /* Typography */
+  --md-sys-typescale-display-font: 'Inter', sans-serif;
+  --md-sys-typescale-body-font: 'Inter', sans-serif;
+  --md-sys-typescale-code-font: 'JetBrains Mono', monospace;
+  
+  /* Spacing */
+  --space-xs: 0.25rem;
+  --space-sm: 0.5rem;
+  --space-md: 1rem;
+  --space-lg: 1.5rem;
+  --space-xl: 2rem;
+  --space-2xl: 3rem;
+  --space-3xl: 4rem;
+  
+  /* Border Radius - M3 Expressive uses larger radii */
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 24px;
+  --radius-full: 9999px;
+  
+  /* Transitions */
+  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
+  
+  /* Container widths */
+  --container-sm: 640px;
+  --container-md: 768px;
+  --container-lg: 1024px;
+  --container-xl: 1280px;
+}