diff --git a/frontend/src/index.css b/frontend/src/index.css index 0639728..4d7e323 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -1,74 +1,63 @@ /* Existing CSS rules */ :root { - --rich-cerulean-50: #eaf4fb; - --rich-cerulean-100: #d5eaf6; - --rich-cerulean-200: #aad5ee; - --rich-cerulean-300: #80c0e5; - --rich-cerulean-400: #56abdc; - --rich-cerulean-500: #2b96d4; - --rich-cerulean-600: #2378a9; - --rich-cerulean-700: #1a5a7f; - --rich-cerulean-800: #113c55; - --rich-cerulean-900: #091e2a; - --rich-cerulean-950: #06151e; + --color1: #edf0f8; + --color2: #dae1f1; + --color3: #b6c3e2; + --color4: #91a5d4; + --color5: #6c87c6; + --color6: #4769b8; + --color7: #395493; + --color8: #2b3f6e; + --color9: #1d2a49; + --color10: #0e1525; + --color11: #0a0f1a; - --sand-dune-50: #f7f5ed; - --sand-dune-100: #f0ebdb; - --sand-dune-200: #e1d6b7; - --sand-dune-300: #d2c293; - --sand-dune-400: #c3ae6f; - --sand-dune-500: #b49a4b; - --sand-dune-600: #907b3c; - --sand-dune-700: #6c5c2d; - --sand-dune-800: #483d1e; - --sand-dune-900: #241f0f; - --sand-dune-950: #19160b; + --color12: #e8ebfc; + --color13: #d1d7fa; + --color14: #a3aff5; + --color15: #7588f0; + --color16: #4760eb; + --color17: #1938e6; + --color18: #142db8; + --color19: #0f228a; + --color20: #0a165c; + --color21: #050b2e; + --color22: #040820; + --color23: #02081c; - --alice-blue-50: #ecf3f8; - --alice-blue-100: #dae7f1; - --alice-blue-200: #b4cfe4; - --alice-blue-300: #8fb7d6; - --alice-blue-400: #699fc9; - --alice-blue-500: #4487bb; - --alice-blue-600: #366c96; - --alice-blue-700: #295170; - --alice-blue-800: #1b364b; - --alice-blue-900: #0e1b25; - --alice-blue-950: #09131a; + --color24: #fff4e5; + --color25: #ffe9cc; + --color26: #ffd399; + --color27: #ffbd66; + --color28: #ffa733; + --color29: #ff9100; + --color30: #cc7400; + --color31: #995700; + --color32: #663a00; + --color33: #331d00; + --color34: #241400; - --ink-black-50: #eef2f6; - --ink-black-100: #dee6ed; - --ink-black-200: #bdccdb; - --ink-black-300: #9cb2c9; - --ink-black-400: #7a99b8; - --ink-black-500: #597fa6; - --ink-black-600: #476685; - --ink-black-700: #364c63; - --ink-black-800: #243342; - --ink-black-900: #121921; - --ink-black-950: #0c1217; - - --taupe-50: #f4f2f0; - --taupe-100: #e9e4e2; - --taupe-200: #d3cac5; - --taupe-300: #bdafa8; - --taupe-400: #a7958b; - --taupe-500: #917a6e; - --taupe-600: #746258; - --taupe-700: #574942; - --taupe-800: #3a312c; - --taupe-900: #1d1816; - --taupe-950: #14110f; + --color35: #eef2f7; + --color36: #dce5ef; + --color37: #bacade; + --color38: #97b0ce; + --color39: #7495be; + --color40: #527bad; + --color41: #41628b; + --color42: #314a68; + --color43: #213145; + --color44: #101923; + --color45: #0b1118; /* New CSS Variables */ - --bg-color: var(--rich-cerulean-950); + --bg-color: var(--color45); --panel-bg: rgba(30, 41, 59, 0.7); - --text-main: var(--alice-blue-200); - --text-muted: var(--sand-dune-600); - --accent-primary: var(--taupe-500); - --accent-secondary: var(--rich-cerulean-300); - --success: var(--sand-dune-200); - --danger: var(--ink-black-400); + --text-main: var(--color24); + --text-muted: var(--color36); + --accent-primary: var(--color41); + --accent-secondary: var(--color38); + --success: var(--color39); + --danger: var(--color30); --border-color: rgba(255, 255, 255, 0.1); --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; @@ -112,13 +101,13 @@ button { border: none; outline: none; transition: all 0.3s ease; - background-color: var(--color-smart-blue-500); /* Default background color */ + background-color: var(--color5); /* Default background color */ color: var(--text-main); padding: 10px 20px; border-radius: 4px; &:hover { - background-color: var(--color-smart-blue-600); /* Hover state background color */ + background-color: var(--color6); /* Hover state background color */ } } @@ -128,13 +117,13 @@ input { background-color: var(--bg-color); color: var(--text-main); padding: 8px 12px; - border: 1px solid var(--color-smart-blue-300); + border: 1px solid var(--color3); &:focus { - border-color: var(--color-smart-blue-400); /* Focus state border color */ + border-color: var(--color4); /* Focus state border color */ } } h1, h2, h3 { - color: var(--color-smart-blue-500); + color: var(--color5); } \ No newline at end of file