chore: 피그마 디자인 토큰 동기화

tokens/tokens.css

@@ -0,0 +1,172 @@
+/* 피그마 → 깃 동기화 플러그인이 생성한 파일이에요. 직접 수정하지 마세요. */
+
+@theme {
+  --color-base-50: #ffffff;
+  --color-base-950: #000000;
+  --color-gray-50: #f4f4f6;
+  --color-gray-75: #e9e9ed;
+  --color-gray-100: #dcdee2;
+  --color-gray-200: #c5c8ce;
+  --color-gray-300: #adb1bb;
+  --color-gray-400: #959ba7;
+  --color-gray-500: #7d8594;
+  --color-gray-600: #686f7e;
+  --color-gray-700: #545a66;
+  --color-gray-800: #40454e;
+  --color-gray-900: #2d3037;
+  --color-gray-950: #191b1f;
+  --color-sky-blue-50: #ecf8fe;
+  --color-sky-blue-100: #c5e9fd;
+  --color-sky-blue-200: #9edbfd;
+  --color-sky-blue-300: #76cefd;
+  --color-sky-blue-400: #4dc1ff;
+  --color-sky-blue-500: #1baefd;
+  --color-sky-blue-600: #0494e2;
+  --color-sky-blue-700: #0473ae;
+  --color-sky-blue-800: #04527b;
+  --color-sky-blue-900: #033149;
+  --color-sky-blue-950: #011018;
+  --color-red-50: #feedec;
+  --color-yellow-50: #fefaec;
+  --color-red-100: #fbc9c8;
+  --color-red-200: #faa5a2;
+  --color-red-300: #f9807c;
+  --color-orange-50: #fef3ec;
+  --color-yellow-100: #fcf2cb;
+  --color-orange-100: #fddcc6;
+  --color-orange-200: #fcc4a0;
+  --color-orange-300: #fcad79;
+  --color-yellow-200: #fbebaa;
+  --color-orange-400: #fc9651;
+  --color-blue-50: #ecf3fe;
+  --color-yellow-300: #fae488;
+  --color-blue-100: #c5dbfb;
+  --color-blue-200: #9dc3f9;
+  --color-blue-300: #74abf9;
+  --color-blue-400: #4a93f9;
+  --color-blue-500: #1f7af9;
+  --color-blue-600: #0861de;
+  --color-blue-700: #084cab;
+  --color-blue-800: #073679;
+  --color-blue-900: #052148;
+  --color-blue-950: #020b18;
+  --color-yellow-400: #fbdd65;
+  --color-yellow-500: #f8d031;
+  --color-red-400: #f95b56;
+  --color-yellow-600: #e9bd0a;
+  --color-orange-500: #fd7e29;
+  --color-yellow-700: #b49109;
+  --color-green-50: #f0faf6;
+  --color-green-100: #ceeee2;
+  --color-green-200: #ace3ce;
+  --color-green-300: #8ad9bb;
+  --color-green-400: #67cfa7;
+  --color-green-500: #44c594;
+  --color-green-600: #34a57a;
+  --color-green-700: #2a805f;
+  --color-yellow-800: #7f6708;
+  --color-green-800: #1e5b44;
+  --color-yellow-900: #4b3d05;
+  --color-green-900: #133729;
+  --color-yellow-950: #181302;
+  --color-red-500: #fa352e;
+  --color-orange-600: #ff6600;
+  --color-green-950: #07130e;
+  --color-red-600: #e91008;
+  --color-red-700: #b30e08;
+  --color-orange-700: #c35002;
+  --color-red-800: #7e0b07;
+  --color-orange-800: #893904;
+  --color-red-900: #4b0705;
+  --color-red-950: #180302;
+  --color-purple-50: #f1eefc;
+  --color-purple-100: #e4dcf9;
+  --color-purple-200: #d5caf7;
+  --color-orange-900: #502203;
+  --color-purple-300: #b19def;
+  --color-orange-950: #180a01;
+  --color-purple-400: #8e70e7;
+  --color-purple-500: #6a44de;
+  --color-purple-600: #4d24c9;
+  --color-purple-700: #3d1d9b;
+  --color-purple-800: #2b156e;
+  --color-purple-900: #1a0d41;
+  --color-purple-950: #090415;
+  --color-bg-accent: var(--color-sky-blue-500);
+  --color-bg-warning: var(--color-yellow-50);
+  --color-bg-error: var(--color-red-50);
+  --color-bg-success: var(--color-green-50);
+  --color-bg-informative: var(--color-blue-50);
+  --color-bg-neutral-primary: var(--color-gray-900);
+  --color-bg-neutral-secondary: var(--color-gray-800);
+  --color-bg-neutral-tertiary: var(--color-gray-75);
+  --color-bg-layer-default: var(--color-base-50);
+  --color-bg-layer-basement: var(--color-gray-50);
+  --color-bg-layer-floating: var(--color-base-50);
+  --color-bg-layer-overlay-40: #00000066;
+  --color-bg-layer-overlay-20: #00000033;
+  --color-bg-layer-overlay-12: #0000001f;
+  --color-bg-layer-overlay-8: #00000014;
+  --color-bg-layer-overlay-4: #0000000a;
+  --color-text-accent: var(--color-sky-blue-600);
+  --color-text-warning: var(--color-yellow-900);
+  --color-text-error: var(--color-red-600);
+  --color-text-success: var(--color-green-600);
+  --color-text-informative: var(--color-blue-600);
+  --color-text-neutral-primary: var(--color-gray-900);
+  --color-text-neutral-secondary: var(--color-gray-600);
+  --color-text-neutral-tertiary: var(--color-gray-300);
+  --color-text-neutral-inverse: var(--color-base-50);
+  --color-border-accent: var(--color-sky-blue-400);
+  --color-border-warning: var(--color-yellow-400);
+  --color-border-error: var(--color-red-400);
+  --color-border-success: var(--color-green-400);
+  --color-border-informative: var(--color-blue-400);
+  --color-border-neutral-primary: var(--color-gray-700);
+  --color-border-neutral-secondary: var(--color-gray-500);
+  --color-border-neutral-tertiary: var(--color-gray-300);
+  --color-border-neutral-muted: var(--color-gray-75);
+  --color-icon-accent: var(--color-sky-blue-500);
+  --color-icon-warning: var(--color-yellow-500);
+  --color-icon-error: var(--color-red-300);
+  --color-icon-success: var(--color-green-400);
+  --color-icon-informative: var(--color-blue-600);
+  --color-icon-neutral-primary: var(--color-gray-600);
+  --color-icon-neutral-secondary: var(--color-gray-300);
+  --color-icon-neutral-inverse: var(--color-base-50);
+  --weight-regular: "regular";
+  --weight-medium: "medium";
+  --weight-semibold: "semibold";
+  --weight-bold: "bold";
+  --size-title-1: 24px;
+  --size-heading-1: 20px;
+  --size-heading-2: 18px;
+  --size-body-1: 16px;
+  --size-body-2: 14px;
+  --size-caption-1: 12px;
+  --line-height-title-1: 32px;
+  --line-height-heading-1: 28px;
+  --line-height-heading-2: 26px;
+  --line-height-body-1: 22px;
+  --line-height-body-2: 20px;
+  --line-height-caption-1: 18px;
+  --letter-spacing-letter-spacing: -0.6000000238418579px;
+  --letter-spacing-letter-spacing-2: -0.4000000059604645px;
+  --text: "String value";
+  --radius-radius-r1: 4px;
+  --radius-radius-r2: 8px;
+  --radius-radius-r3: 12px;
+  --radius-radius-r4: 16px;
+  --radius-radius-r5: 20px;
+  --radius-radius-r6: 24px;
+  --radius-radius-r7: 28px;
+  --spacing-spacing-x1: 4px;
+  --spacing-spacing-x2: 8px;
+  --spacing-spacing-x3: 12px;
+  --spacing-spacing-x4: 16px;
+  --spacing-spacing-x5: 20px;
+  --spacing-spacing-x6: 24px;
+  --spacing-spacing-x7: 28px;
+  --spacing-spacing-x8: 32px;
+  --spacing-spacing-x9: 36px;
+}