/**
 * @pfct/purple design tokens — 소비처가 직접 import하는 @theme 소스.
 *
 * `@import "tailwindcss"` 없이 토큰 값(:root/.dark) + @theme 등록 + 타이포그래피만 담는다.
 * 소비처: `@import "tailwindcss"; @import "@pfct/purple/theme.css";`
 *   → 유틸 생성 + Tailwind IntelliSense 자동완성.
 * purple 자체 빌드는 global.css가 이 파일을 @import하므로 동일하게 동작한다.
 */

:root {
	--radius: 0.625rem;

	/* Card_Floating_Shadow (PC) */
	--shadow-card-floating: 0 4px 20px 0 rgba(0, 0, 0, 0.2);

	--background: oklch(1 0 0);

	--foreground: oklch(0.145 0 0);

	--card: oklch(1 0 0);

	--card-foreground: oklch(0.145 0 0);

	--popover: oklch(1 0 0);

	--popover-foreground: oklch(0.145 0 0);

	--primary: oklch(0.205 0 0);

	--primary-foreground: oklch(0.985 0 0);

	--secondary: oklch(0.97 0 0);

	--secondary-foreground: oklch(0.205 0 0);

	--muted: oklch(0.97 0 0);

	--muted-foreground: oklch(0.556 0 0);

	--accent: oklch(0.97 0 0);

	--accent-foreground: oklch(0.205 0 0);

	--destructive: oklch(0.577 0.245 27.325);

	--border: oklch(0.922 0 0);

	--input: oklch(0.922 0 0);

	--ring: oklch(0.708 0 0);

	--chart-1: oklch(0.646 0.222 41.116);

	--chart-2: oklch(0.6 0.118 184.704);

	--chart-3: oklch(0.398 0.07 227.392);

	--chart-4: oklch(0.828 0.189 84.429);

	--chart-5: oklch(0.769 0.188 70.08);

	--sidebar: oklch(0.985 0 0);

	--sidebar-foreground: oklch(0.145 0 0);

	--sidebar-primary: oklch(0.205 0 0);

	--sidebar-primary-foreground: oklch(0.985 0 0);

	--sidebar-accent: oklch(0.97 0 0);

	--sidebar-accent-foreground: oklch(0.205 0 0);

	--sidebar-border: oklch(0.922 0 0);

	--sidebar-ring: oklch(0.708 0 0);

	--color-white: #ffffff;
	--color-black: #000000;
	--color-dark-gray: #262626;
	--color-deep-dark-gray: #1b1b1b;

	--color-pink-5: #fffafd;
	--color-pink-25: #fff4fa;
	--color-pink-50: #ffeaf5;
	--color-pink-100: #ffc6e3;
	--color-pink-200: #fe99ce;
	--color-pink-300: #fe67b5;
	--color-pink-400: #fe2c99;
	--color-pink-500: #eb1584;
	--color-pink-600: #de0475;
	--color-pink-700: #ca036a;
	--color-pink-800: #b2005c;
	--color-pink-900: #970051;

	--color-red-5: #fffbfc;
	--color-red-25: #fff6f9;
	--color-red-50: #ffeff2;
	--color-red-100: #ffb7c4;
	--color-red-200: #ff738c;
	--color-red-300: #ff5170;
	--color-red-400: #ff2f54;
	--color-red-500: #ff0d38;
	--color-red-600: #ea002a;
	--color-red-700: #c80024;
	--color-red-800: #a6001e;
	--color-red-900: #840018;

	--color-orange-5: #fffaf7;
	--color-orange-25: #fff5ef;
	--color-orange-50: #fff0e5;
	--color-orange-100: #ffccad;
	--color-orange-200: #ffa168;
	--color-orange-300: #ff8b44;
	--color-orange-400: #ff7b2b;
	--color-orange-500: #ff6b10;
	--color-orange-600: #f55d00;
	--color-orange-700: #d85200;
	--color-orange-800: #ba4700;
	--color-orange-900: #983a00;

	--color-yellow-5: #fffdf4;
	--color-yellow-25: #fffbe6;
	--color-yellow-50: #fff7e0;
	--color-yellow-100: #ffe59c;
	--color-yellow-200: #ffd55e;
	--color-yellow-300: #ffcd4b;
	--color-yellow-400: #ffb712;
	--color-yellow-500: #efa600;
	--color-yellow-600: #cd8e00;
	--color-yellow-700: #ab7700;
	--color-yellow-800: #895f00;
	--color-yellow-900: #745000;

	--color-lime-5: #f9fef9;
	--color-lime-25: #f3fdf3;
	--color-lime-50: #e7fce8;
	--color-lime-100: #bff4c1;
	--color-lime-200: #7eee87;
	--color-lime-300: #60df6a;
	--color-lime-400: #37c94d;
	--color-lime-500: #16b234;
	--color-lime-600: #139d2d;
	--color-lime-700: #0d8323;
	--color-lime-800: #0e6c1f;
	--color-lime-900: #045613;

	--color-green-5: #f8fffa;
	--color-green-25: #f0fff6;
	--color-green-50: #dcf9e8;
	--color-green-100: #a7ebbe;
	--color-green-200: #57db84;
	--color-green-300: #1fcc5a;
	--color-green-400: #19b14d;
	--color-green-500: #159340;
	--color-green-600: #117533;
	--color-green-700: #0d5826;
	--color-green-800: #0a4920;
	--color-green-900: #083a19;

	--color-mint-5: #f4fefd;
	--color-mint-25: #ecfcfb;
	--color-mint-50: #e0f8f7;
	--color-mint-100: #b4f6ee;
	--color-mint-200: #76ebe6;
	--color-mint-300: #3de2da;
	--color-mint-400: #02d1c8;
	--color-mint-500: #02b8ae;
	--color-mint-600: #029f94;
	--color-mint-700: #02867a;
	--color-mint-800: #026d60;
	--color-mint-900: #015447;

	--color-skyblue-5: #f5feff;
	--color-skyblue-25: #ebfcff;
	--color-skyblue-50: #e6fbff;
	--color-skyblue-100: #cbefff;
	--color-skyblue-200: #9de1ff;
	--color-skyblue-300: #70d3ff;
	--color-skyblue-400: #2ebfff;
	--color-skyblue-500: #02b2ff;
	--color-skyblue-600: #00a5ed;
	--color-skyblue-700: #0092d3;
	--color-skyblue-800: #007cb2;
	--color-skyblue-900: #005f89;

	--color-blue-5: #f9fcff;
	--color-blue-25: #f1f9ff;
	--color-blue-50: #e3f4ff;
	--color-blue-100: #bbe2ff;
	--color-blue-200: #8dd0ff;
	--color-blue-300: #48afff;
	--color-blue-400: #007dff;
	--color-blue-500: #1269ec;
	--color-blue-600: #0c5cd3;
	--color-blue-700: #114bbd;
	--color-blue-800: #073ca4;
	--color-blue-900: #00308d;

	--color-indigo-5: #fafaff;
	--color-indigo-25: #f2f2ff;
	--color-indigo-50: #ececff;
	--color-indigo-100: #c0c4ff;
	--color-indigo-200: #8d99ff;
	--color-indigo-300: #606fff;
	--color-indigo-400: #3f52ff;
	--color-indigo-500: #3948ec;
	--color-indigo-600: #2d3cdc;
	--color-indigo-700: #2835be;
	--color-indigo-800: #202ba4;
	--color-indigo-900: #162191;

	--color-purple-5: #fcfbff;
	--color-purple-25: #f9f4ff;
	--color-purple-50: #f4eefe;
	--color-purple-100: #d4befb;
	--color-purple-200: #b48ef8;
	--color-purple-300: #955dff;
	--color-purple-400: #732ff1;
	--color-purple-500: #602fe4;
	--color-purple-600: #521ddf;
	--color-purple-700: #491ac6;
	--color-purple-800: #3e16a8;
	--color-purple-900: #33128a;

	--color-gray-5: #fbfbfb;
	--color-gray-25: #f6f6f6;
	--color-gray-50: #eeeeee;
	--color-gray-100: #d2d2d2;
	--color-gray-200: #c0c0c0;
	--color-gray-300: #979797;
	--color-gray-400: #828282;
	--color-gray-500: #6f6f6f;
	--color-gray-600: #656565;
	--color-gray-700: #5a5a5a;
	--color-gray-800: #444444;
	--color-gray-900: #2e2e2e;
}

.dark {
	--background: oklch(0.145 0 0);

	--foreground: oklch(0.985 0 0);

	--card: oklch(0.205 0 0);

	--card-foreground: oklch(0.985 0 0);

	--popover: oklch(0.205 0 0);

	--popover-foreground: oklch(0.985 0 0);

	--primary: oklch(0.922 0 0);

	--primary-foreground: oklch(0.205 0 0);

	--secondary: oklch(0.269 0 0);

	--secondary-foreground: oklch(0.985 0 0);

	--muted: oklch(0.269 0 0);

	--muted-foreground: oklch(0.708 0 0);

	--accent: oklch(0.269 0 0);

	--accent-foreground: oklch(0.985 0 0);

	--destructive: oklch(0.704 0.191 22.216);

	--border: oklch(1 0 0 / 10%);

	--input: oklch(1 0 0 / 15%);

	--ring: oklch(0.556 0 0);

	--chart-1: oklch(0.488 0.243 264.376);

	--chart-2: oklch(0.696 0.17 162.48);

	--chart-3: oklch(0.769 0.188 70.08);

	--chart-4: oklch(0.627 0.265 303.9);

	--chart-5: oklch(0.645 0.246 16.439);

	--sidebar: oklch(0.205 0 0);

	--sidebar-foreground: oklch(0.985 0 0);

	--sidebar-primary: oklch(0.488 0.243 264.376);

	--sidebar-primary-foreground: oklch(0.985 0 0);

	--sidebar-accent: oklch(0.269 0 0);

	--sidebar-accent-foreground: oklch(0.985 0 0);

	--sidebar-border: oklch(1 0 0 / 10%);

	--sidebar-ring: oklch(0.556 0 0);

	/* https://www.figma.com/design/d3dCA2mgA3kM1W5gLNDvt7/%F0%9F%8E%A8-Graphics-Library?node-id=4143-10160&m=dev */
	--color-white: #ffffff;
	--color-black: #000000;
	--color-dark-gray: #262626;
	--color-deep-dark-gray: #1b1b1b;

	--color-pink-5: #2e2a2c;
	--color-pink-25: #3b3137;
	--color-pink-50: #4f3844;
	--color-pink-100: #763457;
	--color-pink-200: #9f2a66;
	--color-pink-300: #db2d87;
	--color-pink-400: #ff52ab;
	--color-pink-500: #fe76bc;
	--color-pink-600: #fea3d3;
	--color-pink-700: #ffcce6;
	--color-pink-800: #ffecf6;
	--color-pink-900: #fff5fb;

	--color-red-5: #2e2a2b;
	--color-red-25: #3b3133;
	--color-red-50: #593d42;
	--color-red-100: #8a3f4c;
	--color-red-200: #b14055;
	--color-red-300: #eb4361;
	--color-red-400: #ff5170;
	--color-red-500: #ff627e;
	--color-red-600: #ff8198;
	--color-red-700: #ffbeca;
	--color-red-800: #ffecf0;
	--color-red-900: #fffbfc;

	--color-orange-5: #2e2c2a;
	--color-orange-25: #3b3531;
	--color-orange-50: #59473d;
	--color-orange-100: #8a5a3d;
	--color-orange-200: #b16a3e;
	--color-orange-300: #eb813f;
	--color-orange-400: #ff8840;
	--color-orange-500: #ff9757;
	--color-orange-600: #ffaa77;
	--color-orange-700: #ffd1b5;
	--color-orange-800: #fff1e8;
	--color-orange-900: #fff6f1;

	--color-yellow-5: #2e2d2a;
	--color-yellow-25: #3b3730;
	--color-yellow-50: #594f39;
	--color-yellow-100: #8a7034;
	--color-yellow-200: #b18a31;
	--color-yellow-300: #ebb12b;
	--color-yellow-400: #ffbe2a;
	--color-yellow-500: #ffcc57;
	--color-yellow-600: #ffd96e;
	--color-yellow-700: #ffe8a6;
	--color-yellow-800: #fff8e3;
	--color-yellow-900: #fffbe8;

	--color-lime-5: #2a2d2b;
	--color-lime-25: #323833;
	--color-lime-50: #3e5141;
	--color-lime-100: #42764a;
	--color-lime-200: #459451;
	--color-lime-300: #49bf5b;
	--color-lime-400: #4bce5f;
	--color-lime-500: #70e279;
	--color-lime-600: #8bf093;
	--color-lime-700: #c5f5c7;
	--color-lime-800: #e9fcea;
	--color-lime-900: #f4fdf4;

	--color-green-5: #2a2d2b;
	--color-green-25: #303733;
	--color-green-50: #3a4f41;
	--color-green-100: #376e4a;
	--color-green-200: #348650;
	--color-green-300: #31ac5b;
	--color-green-400: #30b95f;
	--color-green-500: #2cd265;
	--color-green-600: #68df90;
	--color-green-700: #b0edc5;
	--color-green-800: #e0faea;
	--color-green-900: #f0fef5;

	--color-mint-5: #292d2d;
	--color-mint-25: #2f3938;
	--color-mint-50: #375351;
	--color-mint-100: #2e7a76;
	--color-mint-200: #289893;
	--color-mint-300: #1ec6bf;
	--color-mint-400: #1bd6ce;
	--color-mint-500: #50e4de;
	--color-mint-600: #84ede8;
	--color-mint-700: #bbf7f0;
	--color-mint-800: #e3f9f8;
	--color-mint-900: #eefcfb;

	--color-skyblue-5: #2a2d2e;
	--color-skyblue-25: #31383b;
	--color-skyblue-50: #3d5059;
	--color-skyblue-100: #3e738a;
	--color-skyblue-200: #408eb1;
	--color-skyblue-300: #42b8eb;
	--color-skyblue-400: #43c5ff;
	--color-skyblue-500: #7ed7ff;
	--color-skyblue-600: #a7e4ff;
	--color-skyblue-700: #d0f1ff;
	--color-skyblue-800: #e8fbff;
	--color-skyblue-900: #edfcff;

	--color-blue-5: #292c2e;
	--color-blue-25: #2f353b;
	--color-blue-50: #373e4d;
	--color-blue-100: #344972;
	--color-blue-200: #2e5999;
	--color-blue-300: #207bda;
	--color-blue-400: #1990ff;
	--color-blue-500: #5ab7ff;
	--color-blue-600: #98d5ff;
	--color-blue-700: #c2e5ff;
	--color-blue-800: #e6f5ff;
	--color-blue-900: #f2faff;

	--color-indigo-5: #2b2b2e;
	--color-indigo-25: #32333b;
	--color-indigo-50: #3f4259;
	--color-indigo-100: #454c8a;
	--color-indigo-200: #4953b1;
	--color-indigo-300: #5564f1;
	--color-indigo-400: #707dff;
	--color-indigo-500: #848fff;
	--color-indigo-600: #98a3ff;
	--color-indigo-700: #c6caff;
	--color-indigo-800: #eeeeff;
	--color-indigo-900: #f3f3ff;

	--color-purple-5: #2c2a2e;
	--color-purple-25: #35313a;
	--color-purple-50: #473d57;
	--color-purple-100: #583f85;
	--color-purple-200: #6540a9;
	--color-purple-300: #8651e9;
	--color-purple-400: #9a66fa;
	--color-purple-500: #a879ff;
	--color-purple-600: #bb99f9;
	--color-purple-700: #d8c5fb;
	--color-purple-800: #f5f0fe;
	--color-purple-900: #fbfafe;

	--color-gray-5: #2c2c2c;
	--color-gray-25: #353535;
	--color-gray-50: #434343;
	--color-gray-100: #555555;
	--color-gray-200: #7b7b7b;
	--color-gray-300: #9d9d9d;
	--color-gray-400: #c4c4c4;
	--color-gray-500: #d9d9d9;
	--color-gray-600: #e9e9e9;
	--color-gray-700: #f5f5f5;
	--color-gray-800: #f9f9f9;
	--color-gray-900: #fefefe;
}

@theme inline {
	--radius-sm: calc(var(--radius) - 4px);

	--radius-md: calc(var(--radius) - 2px);

	--radius-lg: var(--radius);

	--radius-xl: calc(var(--radius) + 4px);

	--shadow-card-floating: var(--shadow-card-floating);

	--color-background: var(--background);

	--color-foreground: var(--foreground);

	--color-card: var(--card);

	--color-card-foreground: var(--card-foreground);

	--color-popover: var(--popover);

	--color-popover-foreground: var(--popover-foreground);

	--color-primary: var(--primary);

	--color-primary-foreground: var(--primary-foreground);

	--color-secondary: var(--secondary);

	--color-secondary-foreground: var(--secondary-foreground);

	--color-muted: var(--muted);

	--color-muted-foreground: var(--muted-foreground);

	--color-accent: var(--accent);

	--color-accent-foreground: var(--accent-foreground);

	--color-destructive: var(--destructive);

	--color-border: var(--border);

	--color-input: var(--input);

	--color-ring: var(--ring);

	--color-chart-1: var(--chart-1);

	--color-chart-2: var(--chart-2);

	--color-chart-3: var(--chart-3);

	--color-chart-4: var(--chart-4);

	--color-chart-5: var(--chart-5);

	--color-sidebar: var(--sidebar);

	--color-sidebar-foreground: var(--sidebar-foreground);

	--color-sidebar-primary: var(--sidebar-primary);

	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);

	--color-sidebar-accent: var(--sidebar-accent);

	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);

	--color-sidebar-border: var(--sidebar-border);

	--color-sidebar-ring: var(--sidebar-ring);

	--color-white: var(--color-white);
	--color-black: var(--color-black);
	--color-dark-gray: var(--color-dark-gray);
	--color-deep-dark-gray: var(--color-deep-dark-gray);

	--color-pink-5: var(--color-pink-5);
	--color-pink-25: var(--color-pink-25);
	--color-pink-50: var(--color-pink-50);
	--color-pink-100: var(--color-pink-100);
	--color-pink-200: var(--color-pink-200);
	--color-pink-300: var(--color-pink-300);
	--color-pink-400: var(--color-pink-400);
	--color-pink-500: var(--color-pink-500);
	--color-pink-600: var(--color-pink-600);
	--color-pink-700: var(--color-pink-700);
	--color-pink-800: var(--color-pink-800);
	--color-pink-900: var(--color-pink-900);

	--color-red-5: var(--color-red-5);
	--color-red-25: var(--color-red-25);
	--color-red-50: var(--color-red-50);
	--color-red-100: var(--color-red-100);
	--color-red-200: var(--color-red-200);
	--color-red-300: var(--color-red-300);
	--color-red-400: var(--color-red-400);
	--color-red-500: var(--color-red-500);
	--color-red-600: var(--color-red-600);
	--color-red-700: var(--color-red-700);
	--color-red-800: var(--color-red-800);
	--color-red-900: var(--color-red-900);

	--color-orange-5: var(--color-orange-5);
	--color-orange-25: var(--color-orange-25);
	--color-orange-50: var(--color-orange-50);
	--color-orange-100: var(--color-orange-100);
	--color-orange-200: var(--color-orange-200);
	--color-orange-300: var(--color-orange-300);
	--color-orange-400: var(--color-orange-400);
	--color-orange-500: var(--color-orange-500);
	--color-orange-600: var(--color-orange-600);
	--color-orange-700: var(--color-orange-700);
	--color-orange-800: var(--color-orange-800);
	--color-orange-900: var(--color-orange-900);

	--color-yellow-5: var(--color-yellow-5);
	--color-yellow-25: var(--color-yellow-25);
	--color-yellow-50: var(--color-yellow-50);
	--color-yellow-100: var(--color-yellow-100);
	--color-yellow-200: var(--color-yellow-200);
	--color-yellow-300: var(--color-yellow-300);
	--color-yellow-400: var(--color-yellow-400);
	--color-yellow-500: var(--color-yellow-500);
	--color-yellow-600: var(--color-yellow-600);
	--color-yellow-700: var(--color-yellow-700);
	--color-yellow-800: var(--color-yellow-800);
	--color-yellow-900: var(--color-yellow-900);

	--color-lime-5: var(--color-lime-5);
	--color-lime-25: var(--color-lime-25);
	--color-lime-50: var(--color-lime-50);
	--color-lime-100: var(--color-lime-100);
	--color-lime-200: var(--color-lime-200);
	--color-lime-300: var(--color-lime-300);
	--color-lime-400: var(--color-lime-400);
	--color-lime-500: var(--color-lime-500);
	--color-lime-600: var(--color-lime-600);
	--color-lime-700: var(--color-lime-700);
	--color-lime-800: var(--color-lime-800);
	--color-lime-900: var(--color-lime-900);

	--color-green-5: var(--color-green-5);
	--color-green-25: var(--color-green-25);
	--color-green-50: var(--color-green-50);
	--color-green-100: var(--color-green-100);
	--color-green-200: var(--color-green-200);
	--color-green-300: var(--color-green-300);
	--color-green-400: var(--color-green-400);
	--color-green-500: var(--color-green-500);
	--color-green-600: var(--color-green-600);
	--color-green-700: var(--color-green-700);
	--color-green-800: var(--color-green-800);
	--color-green-900: var(--color-green-900);
	--color-mint-5: var(--color-mint-5);
	--color-mint-25: var(--color-mint-25);
	--color-mint-50: var(--color-mint-50);
	--color-mint-100: var(--color-mint-100);
	--color-mint-200: var(--color-mint-200);
	--color-mint-300: var(--color-mint-300);
	--color-mint-400: var(--color-mint-400);
	--color-mint-500: var(--color-mint-500);
	--color-mint-600: var(--color-mint-600);
	--color-mint-700: var(--color-mint-700);
	--color-mint-800: var(--color-mint-800);
	--color-mint-900: var(--color-mint-900);
	--color-skyblue-5: var(--color-skyblue-5);
	--color-skyblue-25: var(--color-skyblue-25);
	--color-skyblue-50: var(--color-skyblue-50);
	--color-skyblue-100: var(--color-skyblue-100);
	--color-skyblue-200: var(--color-skyblue-200);
	--color-skyblue-300: var(--color-skyblue-300);
	--color-skyblue-400: var(--color-skyblue-400);
	--color-skyblue-500: var(--color-skyblue-500);
	--color-skyblue-600: var(--color-skyblue-600);
	--color-skyblue-700: var(--color-skyblue-700);
	--color-skyblue-800: var(--color-skyblue-800);
	--color-skyblue-900: var(--color-skyblue-900);
	--color-blue-5: var(--color-blue-5);
	--color-blue-25: var(--color-blue-25);
	--color-blue-50: var(--color-blue-50);
	--color-blue-100: var(--color-blue-100);
	--color-blue-200: var(--color-blue-200);
	--color-blue-300: var(--color-blue-300);
	--color-blue-400: var(--color-blue-400);
	--color-blue-500: var(--color-blue-500);
	--color-blue-600: var(--color-blue-600);
	--color-blue-700: var(--color-blue-700);
	--color-blue-800: var(--color-blue-800);
	--color-blue-900: var(--color-blue-900);
	--color-indigo-5: var(--color-indigo-5);
	--color-indigo-25: var(--color-indigo-25);
	--color-indigo-50: var(--color-indigo-50);
	--color-indigo-100: var(--color-indigo-100);
	--color-indigo-200: var(--color-indigo-200);
	--color-indigo-300: var(--color-indigo-300);
	--color-indigo-400: var(--color-indigo-400);
	--color-indigo-500: var(--color-indigo-500);
	--color-indigo-600: var(--color-indigo-600);
	--color-indigo-700: var(--color-indigo-700);
	--color-indigo-800: var(--color-indigo-800);
	--color-indigo-900: var(--color-indigo-900);
	--color-purple-5: var(--color-purple-5);
	--color-purple-25: var(--color-purple-25);
	--color-purple-50: var(--color-purple-50);
	--color-purple-100: var(--color-purple-100);
	--color-purple-200: var(--color-purple-200);
	--color-purple-300: var(--color-purple-300);
	--color-purple-400: var(--color-purple-400);
	--color-purple-500: var(--color-purple-500);
	--color-purple-600: var(--color-purple-600);
	--color-purple-700: var(--color-purple-700);
	--color-purple-800: var(--color-purple-800);
	--color-purple-900: var(--color-purple-900);
	--color-gray-5: var(--color-gray-5);
	--color-gray-25: var(--color-gray-25);
	--color-gray-50: var(--color-gray-50);
	--color-gray-100: var(--color-gray-100);
	--color-gray-200: var(--color-gray-200);
	--color-gray-300: var(--color-gray-300);
	--color-gray-400: var(--color-gray-400);
	--color-gray-500: var(--color-gray-500);
	--color-gray-600: var(--color-gray-600);
	--color-gray-700: var(--color-gray-700);
	--color-gray-800: var(--color-gray-800);
	--color-gray-900: var(--color-gray-900);

	--animate-pulse: pulse 1.2s ease-in-out infinite;

	/* OverlayRoot scrim fade — `ease-out` is the CSS keyword curve cubic-bezier(0,0,0.58,1),
	   matching the emotion modalSettings animation exactly (Tailwind's ease-out token differs). */
	--animate-overlay-fade-in: overlay-fade-in 0.4s ease-out;
	--animate-overlay-fade-out: overlay-fade-out 0.4s ease-out;

	--breakpoint-pc: 75rem;

	@keyframes pulse {
		50% {
			background-color: var(--color-gray-5);
		}
	}

	@keyframes overlay-fade-in {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	@keyframes overlay-fade-out {
		from {
			opacity: 1;
		}
		to {
			opacity: 0;
		}
	}
}

/** Figma에 web이라고 붙은 폰트는 이것 사용 */
@utility typo-h1 {
	@apply text-[41px] leading-[56px] font-semibold tracking-[-0.8px];
}
@utility typo-h2 {
	@apply text-[29px] leading-[38px] font-semibold tracking-[-0.4px];
}
@utility typo-h3 {
	@apply text-[23px] leading-[32px] font-semibold tracking-[-0.3px];
}
@utility typo-h4 {
	@apply text-[19px] leading-[26px] font-semibold tracking-[-0.3px];
}
@utility typo-h5 {
	@apply text-[17px] leading-[24px] font-semibold tracking-[-0.3px];
}
@utility typo-h6 {
	@apply text-[15px] leading-[22px] font-semibold tracking-[-0.2px];
}
@utility typo-h7 {
	@apply text-[13px] leading-[18px] font-semibold tracking-[-0.2px];
}
@utility typo-h8 {
	@apply text-[11px] leading-[18px] font-semibold tracking-[-0.2px];
}
@utility typo-t1 {
	@apply text-[19px] leading-[26px] font-medium tracking-[-0.3px];
}
@utility typo-t2 {
	@apply text-[17px] leading-[24px] font-medium tracking-[-0.3px];
}
@utility typo-t3 {
	@apply text-[15px] leading-[22px] font-medium tracking-[-0.2px];
}
@utility typo-t4 {
	@apply text-[13px] leading-[18px] font-medium tracking-[-0.2px];
}
@utility typo-b1 {
	@apply text-[15px] leading-[22px] font-normal tracking-[-0.2px];
}
@utility typo-b2 {
	@apply text-[13px] leading-[18px] font-normal tracking-[-0.2px];
}
@utility typo-c1 {
	@apply text-[11px] leading-[18px] font-medium tracking-[-0.2px];
}
@utility typo-c2 {
	@apply text-[9px] leading-[14px] font-medium tracking-[-0.2px];
}

/** Figma에 aos 붙은 폰트는 이것 사용 */
@utility typo-h1-android {
	@apply text-[41px] leading-[56px] font-semibold tracking-[-0.8px];
}
@utility typo-h2-android {
	@apply text-[29px] leading-[35px] font-semibold tracking-[-0.4px];
}
@utility typo-h3-android {
	@apply text-[23px] leading-[27px] font-semibold tracking-[-0.3px];
}
@utility typo-h4-android {
	@apply text-[19px] leading-[23px] font-semibold tracking-[-0.3px];
}
@utility typo-h5-android {
	@apply text-[17px] leading-[20px] font-semibold tracking-[-0.3px];
}
@utility typo-h6-android {
	@apply text-[15px] leading-[18px] font-semibold tracking-[-0.2px];
}
@utility typo-h7-android {
	@apply text-[13px] leading-[18px] font-semibold tracking-[-0.2px];
}
@utility typo-h8-android {
	@apply text-[11px] leading-[18px] font-semibold tracking-[-0.2px];
}
@utility typo-t1-android {
	@apply text-[19px] leading-[23px] font-medium tracking-[-0.3px];
}
@utility typo-t2-android {
	@apply text-[17px] leading-[20px] font-medium tracking-[-0.3px];
}
@utility typo-t3-android {
	@apply text-[15px] leading-[18px] font-medium tracking-[-0.2px];
}
@utility typo-t4-android {
	@apply text-[13px] leading-[16px] font-medium tracking-[-0.2px];
}
@utility typo-b1-android {
	@apply text-[15px] leading-[18px] font-normal tracking-[-0.2px];
}
@utility typo-b2-android {
	@apply text-[13px] leading-[16px] font-normal tracking-[-0.2px];
}
@utility typo-c1-android {
	@apply text-[11px] leading-[18px] font-medium tracking-[-0.2px];
}
@utility typo-c2-android {
	@apply text-[9px] leading-[14px] font-medium tracking-[-0.2px];
}