frontend/src/index.css

@@ -1,11 +1,109 @@
+@import "tailwindcss";
+
+@theme {
+  /* Colors */
+  --color-primary: #05305D;
+  --color-base-canvas: #FFFFFF;
+  --color-secondary: #34587F;
+  --color-sky-100: #B0DEE4;
+  --color-sky-80: #C7E8ED;
+  --color-sky-35: #E4F4F7;
+  --color-sky-25: #EFF9FA;
+  --color-base-ink-strong: #4B4B4B;
+  --color-base-ink-medium: #BABABA;
+  --color-base-ink-soft: #DADADA;
+  --color-base-ink-placeholder: #757575;
+  --color-other-red-100: #AA1227;
+  --color-other-red-10: #F6E6E8;
+  --color-other-green: #539848;
+  --color-su-white: #FFFFFF;
+
+  /* Font sizes */
+  --font-size-body-md: 16px;
+  --font-size-body-lg: 18px;
+
+  /* Border radius */
+  --border-radius-sm: 3px;
+  --border-radius-md: 4px;
+  --border-radius-lg: 6px;
+  --border-radius-xl: 8px;
+
+  /* Border width */
+  --border-width-sm: 1px;
+  --border-width-lg: 3px;
+
+  /* Padding */
+  --padding-md: 12px;
+  --padding-lg: 24px;
+  --padding-xl: 48px;
+
+  /* Spacing */
+  --spacing-sm: 8px;
+  --spacing-md: 12px;
+  --spacing-lg: 24px;
+  --spacing-xl: 32px;
+
+  /* Control heights */
+  --control-height-sm: 32px;
+  --control-height-md: 40px;
+  --control-height-lg: 48px;
+
+  /* Button padding x */
+  --button-padding-x-sm: 6px;
+  --button-padding-x-md: 10px;
+  --button-padding-x-lg: 14px;
+
+  /* Button min width */
+  --button-min-width-sm: 72px;
+  --button-min-width-md: 72px;
+  --button-min-width-lg: 84px;
+
+  /* Button text padding x */
+  --button-text-padding-x-sm: 6px;
+  --button-text-padding-x-md: 6px;
+  --button-text-padding-x-lg: 6px;
+
+  /* Text input default width */
+  --text-input-default-width-md: 194px;
+  --text-input-default-width-lg: 218px;
+}
+
+.dark {
+  --color-primary: #FFFFFF;
+  --color-base-canvas: #000000;
+  --color-secondary: #D9D6D6;
+  --color-sky-100: #403D3D;
+  --color-sky-80: #2D2B2B;
+  --color-sky-35: #1F1E1E;
+  --color-sky-25: #141414;
+  --color-base-ink-strong: #FFFFFF;
+  --color-base-ink-medium: #636363;
+  --color-base-ink-soft: #555555;
+  --color-base-ink-placeholder: #959595;
+  --color-other-red-100: #AA1227;
+  --color-other-red-10: #F6E6E8;
+  --color-other-green: #539848;
+  --color-su-white: #FFFFFF;
+}
+
 :root {
   --color-su-primary: #002f5f;
   --color-su-primary-80: #33587f;
+  --bottom-nav-height: 4.5rem;
   font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  background-color: #ffffff;
+  color: #000000;
 }
+
+.dark {
+  background-color: #141414;
+  color: #ffffff;
+}
+
 * {
   box-sizing: border-box;
 }
 body {
   margin: 0;
+  min-height: 100vh;
 }