FE/src/styles/globals.css at a2350b9dcbddd4590b0a0af40fce437b649e944f · geulDa/FE · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@font-face {
  font-family: 'ZEN Serif';
  src: url('/fonts/ZEN-SERIF-TTF-Regular.woff2') format('woff2');
  font-style: normal;
  font-display: swap;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    /* 메인컬러(MAIN) → mint */
  --mint-50: #D9FAFB;
  --mint-100: #B2F4F6;
  --mint-200: #8CEFF2;
  --mint-300: #65E9ED;
  --mint-400: #22DFE5;
  --mint-500: #0BCBD2;
  --mint-600: #14A9AE;
  --mint-700: #168A8E;
  --mint-800: #107274;
  --mint-900: #0A5C5E;

  /* 서브컬러(SECONDARY) → pink */
  --pink-50: #FEEFF3;
  --pink-100: #FFD0DC;
  --pink-200: #FAA2B8;
  --pink-300: #FF7B9C;
  --pink-400: #FF5B84;
  --pink-500: #EB436D;
  --pink-600: #CD1845;
  --pink-700: #920C2D;
  --pink-800: #710520;
  --pink-900: #470214;

  /* 그레이 스케일(GRAY) → gray */
  --gray-50: #FAFAFA;
  --gray-100: #F4F4F4;
  --gray-200: #E9E9E9;
  --gray-300: #D5D5D5;
  --gray-400: #BCBDBE;
  --gray-500: #A1A4AA;
  --gray-600: #8B9099;
  --gray-700: #484B51;
  --gray-800: #2E3136;
  --gray-900: #111215;

  /* 서브 포인트 컬러 */
  --blue-400: #2569FF;
  --red-300: #F06B6B;
  --red-400: #EB3939;

  /* 배경/전경 */
  --background: #ffffff;
  --foreground: #111215;

  /* 폰트 */
  --font-sans: 'Pretendard', system-ui, sans-serif;
  --font-serif: 'ZEN Serif', serif;
}


html,body {
  font-size: 62.5%;
  font-family: var(--font-sans);
}

/* 다크 모드 */
@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

/* @layer utilities */
@layer utilities {
  /* Pretendard */
  .text-display-lg { font-size:5.7rem; font-weight:300; line-height:6.4rem; letter-spacing:-0.025rem; font-family: var(--font-sans); }
  .text-display-md { font-size:5.2rem; font-weight:300; line-height:4.5rem; font-family: var(--font-sans); }
  .text-display-sm { font-size:3.6rem; font-weight:300; line-height:4.4rem; font-family: var(--font-sans); }

  .text-headline-lg { font-size:3.2rem; font-weight:200; line-height:4rem; font-family: var(--font-sans); }
  .text-headline-md { font-size:2.8rem; font-weight:200; line-height:3.2rem; font-family: var(--font-sans); }
  .text-headline-sm { font-size:2.4rem; font-weight:200; line-height:3.2rem; font-family: var(--font-sans); }

  .text-title-lg { font-size:2.2rem; font-weight:400; line-height:1.75rem; font-family: var(--font-sans); }
  .text-title-md { font-size:1.6rem; font-weight:400; line-height:2.4rem; letter-spacing:0.015rem; font-family: var(--font-sans); }
  .text-title-sm { font-size:1.4rem; font-weight:400; line-height:2rem; letter-spacing:0.01rem; font-family: var(--font-sans); }

  .text-label-lg { font-size:1.4rem; font-weight:300; line-height:2rem; font-family: var(--font-sans); }
  .text-label-md { font-size:1.2rem; font-weight:300; line-height:1.6rem; font-family: var(--font-sans); }
  .text-label-sm { font-size:1.1rem; font-weight:300; line-height:1.6rem; font-family: var(--font-sans); }

  /* JEN Serif */
  .text-display-serif { font-size:3.6rem; font-weight:200; line-height:4.6rem; letter-spacing:0.6rem; font-family: var(--font-serif); }
  .text-headline-lg-serif { font-size:3.2rem; font-weight:200; line-height:4rem; letter-spacing:0.2rem; font-family: var(--font-serif); }
  .text-headline-md-serif { font-size:2.4rem; font-weight:200; line-height:3.2rem; letter-spacing:0.2rem; font-family: var(--font-serif); }
  .text-headline-sm-serif { font-size:2rem; font-weight:200; line-height:2.4rem; letter-spacing:1.2rem; font-family: var(--font-serif); }
  .text-label-serif { font-size:1.4rem; font-weight:200; line-height:2rem; letter-spacing:0.4rem; font-family: var(--font-serif); }
}