diff --git a/images/Property 1-2=sm.png b/images/Property1-2=sm.png similarity index 100% rename from images/Property 1-2=sm.png rename to images/Property1-2=sm.png diff --git a/index.html b/index.html index ca0af2dd..d5f61365 100644 --- a/index.html +++ b/index.html @@ -9,77 +9,103 @@ - - - - 판다마켓 - - - + +
+ +
+ + +
-
+ + + + \ No newline at end of file diff --git a/login.html b/login.html index edb598b3..f705766b 100644 --- a/login.html +++ b/login.html @@ -11,7 +11,6 @@ - @@ -19,44 +18,49 @@
- +
-
+
- + +
- -
+
- +

간편 로그인하기

-

판다마켓이 처음인가요?

회원가입 +

판다마켓이 처음인가요?

회원가입
+ \ No newline at end of file diff --git a/scripts/auth.js b/scripts/auth.js new file mode 100644 index 00000000..c45f42b1 --- /dev/null +++ b/scripts/auth.js @@ -0,0 +1,52 @@ +import { + validateInputs, + checkAllInputsValid, + togglePasswordVisibility, + debounce, +} from "./utils.js"; +/** + * 변수 정의 + */ +const inputArr = document.querySelectorAll("[data-validate]"); +const submitBtn = document.querySelector(".btn"); +const togglePasswordBtns = document.querySelectorAll(".toggle-password"); +const form = document.querySelector(".auth-form"); +const debouncedCheckAll = debounce(() => { + checkAllInputsValid(inputArr, submitBtn); +}, 120); +/** + * 이벤트 리스너 + */ +// 입력란(input) +form.addEventListener("input", (e) => { + const input = e.target.closest("[data-validate]"); + if (!input) return; + validateInputs(input); + debouncedCheckAll(); +}); +form.addEventListener( + "blur", + (e) => { + const input = e.target.closest("[data-validate]"); + if (!input) return; + validateInputs(input); + checkAllInputsValid(inputArr, submitBtn); + }, + true +); +// 패스워드 토글 +togglePasswordBtns.forEach((button) => { + button.addEventListener("click", () => togglePasswordVisibility(button)); +}); +// submit +submitBtn.addEventListener("click", (e) => { + e.preventDefault(); + if (!submitBtn.disabled) { + const redirectMap = { + "/login.html": "/items.html", + "/signup.html": "/login.html", + }; + const target = redirectMap[window.location.pathname]; + if (target) window.location.href = target; + } +}); diff --git a/scripts/utils.js b/scripts/utils.js new file mode 100644 index 00000000..8905b7ab --- /dev/null +++ b/scripts/utils.js @@ -0,0 +1,60 @@ +import { validators } from "./validators.js"; +/** + * debounce code + */ +export function debounce(fn, delay = 300) { + let timer; + return function (...args) { + clearTimeout(timer); + timer = setTimeout(() => { + fn.apply(this, args); + }, delay); + }; +}; +/** + * toggle password + */ +export const togglePasswordVisibility = (button) => { + const targetId = button.getAttribute("data-target"); + const passwordInput = document.getElementById(targetId); + if (!passwordInput) return; + const img = button.querySelector("img"); + if (passwordInput.type === "password") { + passwordInput.type = "text"; + img.src = "/images/btn_visibility_on_24px.png"; + img.alt = "비밀번호 보이는 중"; + } else { + passwordInput.type = "password"; + img.src = "/images/btn_none_visibility_on_24px.png"; + img.alt = "비밀번호 숨겨진 상태"; + } +}; +/* + * Validate User Input + */ +export const validateInputs = (inputEl) => { + const validateType = inputEl.dataset.validate; + const { value, id } = inputEl; + if (!validateType || !validators[validateType]) return; + const { isValid, message } = validators[validateType](value); + const errMsg = document.getElementById(`${id}-error`); + if (errMsg) { + errMsg.textContent = isValid ? "" : message; + } + if (isValid) { + inputEl.classList.remove("input-error"); + } else { + inputEl.classList.add("input-error"); + } + return isValid; +}; +/* + * 모든 입력값이 유효한지 확인하는 함수 + */ +export const checkAllInputsValid = (inputArr, submitBtn) => { + // 1) 모든 필드에 대해 validateInputs 호출 → 에러 메시지 업데이트 + const results = Array.from(inputArr).map((input) => validateInputs(input)); + // 2) map 결과로만 버튼 활성화/비활성화 결정 + const allValid = results.every(Boolean); + submitBtn.disabled = !allValid; +}; diff --git a/scripts/validators.js b/scripts/validators.js new file mode 100644 index 00000000..9b0bf28b --- /dev/null +++ b/scripts/validators.js @@ -0,0 +1,33 @@ +// 함수 정의 +/* + Validators +*/ +const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; +export const validators = { + email: (value) => { + if (!value) return { isValid: false, message: "이메일을 입력해주세요." }; + if (!emailRegex.test(value)) + return { isValid: false, message: "이메일 형식에 맞지 않습니다." }; + return { isValid: true, message: "" }; + }, + nickname: (value) => { + if (!value) return { isValid: false, message: "닉네임을 입력해주세요." }; + return { isValid: true, message: "" }; + }, + password: (value) => { + if (!value) return { isValid: false, message: "비밀번호를 입력해주세요." }; + if (value.length < 8) + return { isValid: false, message: "비밀번호를 8자리 이상 입력해주세요." }; + return { isValid: true, message: "" }; + }, + confirmPassword: (value) => { + const passwordValue = document.getElementById("password").value; + if (!value) + return { isValid: false, message: "비밀번호를 한번 더 입력해주세요." }; + if (value.length < 8) + return { isValid: false, message: "비밀번호를 8자리 이상 입력해주세요." }; + if (value !== passwordValue) + return { isValid: false, message: "비밀번호가 일치하지 않습니다." }; + return { isValid: true, message: "" }; + }, +}; diff --git a/signup.html b/signup.html index efaa08e6..d22b24c3 100644 --- a/signup.html +++ b/signup.html @@ -11,67 +11,72 @@ -
- +
-
+ \ No newline at end of file diff --git a/styles/auth-mobile.css b/styles/auth-mobile.css deleted file mode 100644 index d10750bb..00000000 --- a/styles/auth-mobile.css +++ /dev/null @@ -1,20 +0,0 @@ -.wrapper { - padding: 0 16px; - /* 좌우 여백 16px */ -} - -.login-logo { - width: 198px; -} - -label { - font-size: 14px; -} - -input, -.btn, -.input-field, -.social-login { - width: 100%; /* 다시 명시!(auth.css에 이미 있음) */ - max-width: 400px; -} \ No newline at end of file diff --git a/styles/auth.css b/styles/auth.css index eb9d189f..801fa7f5 100644 --- a/styles/auth.css +++ b/styles/auth.css @@ -35,7 +35,7 @@ header{ gap: 10px; } -.login-form { +.auth-form { width: 100%; display: flex; flex-direction: column; @@ -50,8 +50,6 @@ header{ display: flex; justify-content: center; flex-direction: column; - gap: 16px; - } input { @@ -59,8 +57,8 @@ input { height: 56px; border: none; border-radius: 12px; - background-color: var(--secondary-100, #1967D6); - color: var(--secondary-800, #1F2937); + background-color: var(--bg-input); + color: var(--text-primary); font-size: 16px; font-weight: 400; padding: 8px 16px; @@ -72,7 +70,7 @@ input { .toggle-password { position: absolute; - right: 20px; + right: 16px; top: 50%; transform: translateY(-50%); background: none; @@ -81,6 +79,12 @@ input { display: none; } +.toggle-password img { + display: block; + width: 100%; + height: auto; + } + .input-wrapper:focus-within .toggle-password { display: block; } @@ -90,9 +94,8 @@ input { padding: 16px; border: none; border-radius: 40px; - background-color: var(--cool-gray-400, #9CA3AF); - /* background-color: var(--brand-blue, #3692FF); */ - color: var(--secondary-100); + background-color: var(--text-muted); + color: var(--button-primary-text); font-size: 20px; font-weight: 600; line-height: 32px; @@ -102,7 +105,7 @@ input { display: flex; align-items: center; justify-content: space-between; - background-color: var(--color-social-login-bg, #E6F2FF); + background-color: var(--bg-social-login); width: 100%; border: none; border-radius: 8px; @@ -132,7 +135,51 @@ input { line-height: 24px; } +.error-message { + color: #FF4D4F; /* 실무에서 자주 쓰는 빨간색 */ + font-size: 13px; + margin-top: 4px; + height: 18px; +} + +.input-error { + border: 1px solid #FF4D4F !important; /* 명확한 테두리 표시 */ +} + +.btn:enabled { + background-color: var(--brand-blue) !important; + color: var(--bg-input); +} + +.btn:disabled { + background-color: var(--text-muted); + color: var(--button-primary-text); + cursor: not-allowed; +} + .signup-link a { line-height: 1; color: var(--brand-blue, #3692FF) +} +@media (min-width: 375px) and (max-width: 767px) { + .wrapper { + padding: 0 16px; + /* 좌우 여백 16px */ + } + + .login-logo { + width: 198px; + } + + label { + font-size: 14px; + } + + input, + .btn, + .input-field, + .social-login { + width: 100%; /* 다시 명시!(auth.css에 이미 있음) */ + max-width: 400px; + } } \ No newline at end of file diff --git a/styles/desktop.css b/styles/desktop.css deleted file mode 100644 index 08def9df..00000000 --- a/styles/desktop.css +++ /dev/null @@ -1,91 +0,0 @@ -.wrapper { - width: 100%; - max-width: 1200px; - /* 왜 max-width?*/ - margin: 0 auto; -} - -.wrapper--narrow { - max-width: 988px; -} - -/* Hero 섹션 스타일 */ -#hero { - background-image: url(/images/Img_home_top.png); -} - -#closing-banner { - background-image: url(/images/Img_home_bottom.png); -} - -.banner { - display: flex; - background-position: 80% bottom; - background-size: 55%; - background-repeat: no-repeat; - height: 540px; - align-items: center; - background-color: var(--color-surface-accent); - padding: 0 30px; -} - -h1 { - font-size: 40px; - font-weight: 700; - color: var(--secondary-700); - line-height: 1.4; - margin-bottom: 32px; -} - -.btn { - background-color: var(--brand-blue); - color: var(--secondary-50); - border: none; - padding: 16px 124px; - border-radius: 40px; - cursor: pointer; - font-weight: 600; - font-size: 20px; - flex-shrink: 0; -} - -/* features section */ -.features { - padding-bottom: 52px; -} - -.feature { - padding: 138px 0; - display: flex; - align-items: center; - gap: 5%; -} - -.feature-content { - flex: 1; -} - -.feature:nth-of-type(even) .feature-content { - text-align: right; -} - - -.feature-tag { - color: var(--brand-blue); - font-size: 18px; - line-height: 25px; - font-weight: 700; - margin-bottom: 12px; -} - -.feature img { - width: 55%; -} - -.feature-description { - font-size: 24px; - font-weight: 500; - line-height: 120%; - letter-spacing: 0.08em; - margin-top: 24px; -} \ No newline at end of file diff --git a/styles/global.css b/styles/global.css index 7c8716f8..a97073cb 100644 --- a/styles/global.css +++ b/styles/global.css @@ -1,3 +1,12 @@ +:root { + /* footer padding */ + --footer-padding: 32px 32px 64px 32px; + /* nav padding-left,right */ + --padding-horizontal: 16px; + /* nav height */ + --nav-height: 70px; +} + * { box-sizing: border-box; font-family: 'Pretendard', sans-serif; @@ -10,16 +19,17 @@ body { header { position: sticky; top: 0; - background-color: var(--color-surface-primary); + background-color: var(--bg-primary); } nav { display: flex; - justify-content: space-around; + justify-content: space-between; align-items: center; - height: 70px; - background: var(--color-surface-primary); - color: var(--color-surface-primary); + height: var(--nav-height); + background: var(--bg-primary); + color: var(--bg-primary); + padding: 0 var(--padding-horizontal); } a { @@ -30,30 +40,55 @@ a:visited { color: inherit; } + +.wrapper { + display: flex; + flex-direction: column; + width: 100%; + max-width: var(--wrapper-width); + margin: 0 auto; +} + +.wrapper--narrow { + max-width: var(--wrapper-narrow-width) +} + /* 버튼스타일 */ .btn-small-40 { - padding: 12px 24px; + padding: var(--button-padding-sm-40); + background-color: var(--brand-blue); + color: var(--button-primary-text); + border: none; + border-radius: var(--button-radius-sm-40); + cursor: pointer; +} + +.btn-large { background-color: var(--brand-blue); - color: var(--color-surface-primary); + padding: var(--button-padding-lg); + color: var(--color-gray-50); border: none; - border-radius: 8px; + border-radius: var(--button-radius-lg); cursor: pointer; + font-weight: var(--font-weight-button); + font-size: var(--font-button-lg); + flex-shrink: 0; } /* footer section */ footer { display: flex; + flex-wrap: wrap; justify-content: space-between; align-items: center; - padding: 32px 200px 108px 200px; - background-color: var(--secondary-900); - color: var(--secondary-400); + padding: var(--footer-padding); + background-color: var(--bg-footer); + color: var(--text-muted); } #footer--sns { display: flex; gap: 12px; - color: var(--color-surface-primary); } #footer--menu { @@ -62,5 +97,23 @@ footer { } #footer--menu a { - color: var(--secondary-200); + color: var(--color-gray-200); +} + +@media (min-width: 768px) and (max-width: 1199px) { + :root { + --padding-horizontal: 24px; + + --footer-padding: 32px 104px 64px 104px; + } + + +} + +@media(min-width: 1200px) { + :root { + --padding-horizontal: 200px; + + --footer-padding: 32px 104px 32px 104px; + } } \ No newline at end of file diff --git a/styles/index.css b/styles/index.css new file mode 100644 index 00000000..adf92725 --- /dev/null +++ b/styles/index.css @@ -0,0 +1,277 @@ +/******************* Mobile Start *******************/ + +:root { + /* wrapper width */ + --wrapper-width: 767px; + /* wrapper narrow width */ + --wrapper-narrow-width: 344px; + /* wrapper gap */ + --wrapper-gap: 18px; + + /* banner padding top */ + --banner-padding-top: 48px; + /* banner height */ + --banner-height: 540px; + /* banner line break */ + --banner-line-break: block; + + /* hero title gap */ + --hero-title-gap: 18px; + + /* features padding bottom */ + --features-padding-bottom: 18px; + + /* feature padding */ + --feature-padding: 40px 0; + /* feature margin */ + --feature-margin: 0 16px; + /* feature gap */ + --feature-gap: 24px; + /* feature h1 font size */ + --feature-font-header: var(--font-size-lg); + + /* feature content line break */ + --feature-content-line-break: block; + /* feature content gap */ + --feature-content-gap: 16px; +} + +.banner { + position: relative; + display: flex; + justify-content: center; + align-items: flex-end; + text-align: center; + width: 100%; + height: var(--banner-height); + overflow: hidden; + background-color: var(--bg-accent); +} + +.banner .wrapper { + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + padding-top: var(--banner-padding-top); +} + +.banner img { + width: 100%; + height: auto; + object-fit: cover; + object-position: bottom; +} + +.banner .hero-title { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--hero-title-gap); +} + +.banner .heading-line-break { + display: var(--banner-line-break); +} + +#closing-banner .heading-line-break { + display: block; +} + +.wrapper { + gap: var(--wrapper-gap); +} + +h1 { + font-size: var(--font-size-xl); + font-weight: var(--font-weight-bold); + color: var(--color-gray-700); + line-height: var(--line-height-normal); +} + +.features { + padding-bottom: var(--features-padding-bottom); +} + +.feature { + padding: var(--feature-padding); + display: flex; + flex-direction: column; + margin: var(--feature-margin); + text-align: left; + gap: var(--feature-gap); +} + +.feature-content { + display: flex; + flex-direction: column; + flex: 1; + gap: var(--feature-content-gap); +} + +.feature:nth-of-type(even) .feature-content { + text-align: right; +} + +.feature h1 { + font-size: var(--feature-font-header); + font-weight: var(--font-weight-bold); + line-height: var(--line-height-normal); +} + +.feature-tag { + color: var(--brand-blue); + font-size: var(--font-size-base); + font-weight: var(--font-weight-bold); + line-height: var(--line-height-normal); +} + +.feature-description { + font-size: var(--font-size-md); + font-weight: var(--font-weight-medium); + line-height: var(--line-height-normal); + letter-spacing: var(--font-spacing-medium); +} + +@media (max-width: 470px) { + .footer-copyright { + order: 3; + width: 100%; + margin-top: 10px; + } + + #footer--menu { + order: 1; + } + + #footer--sns { + order: 2; + } +} + +/******************* Mobile End *******************/ + +/******************** Tablet Start ********************/ +@media (min-width: 768px) and (max-width: 1199px) { + :root { + --button-padding-lg: 12px 124px; + + --wrapper-width: 1199px; + --wrapper-narrow-width: 961px; + --wrapper-gap: 24px; + + --banner-padding-top: 84px; + --banner-line-break: inline; + --banner-height: 771px; + + --hero-title-gap: 24px; + + --font-button-lg: 18px; + + --features-padding-bottom: 52px; + + --feature-font-header: var(--font-size-xl); + --feature-padding: 52px 0; + --feature-margin: 0 24px; + + --feature-content-gap: 24px; + } + + h1 { + font-size: var(--font-size-2xl); + line-height: var(--line-height-normal); + } + + .feature-tag { + font-size: var(--font-size-md); + line-height: var(--line-height-normal); + } + + .feature-description { + font-size: var(--font-size-md); + font-weight: var(--font-weight-medium); + line-height: var(--line-height-normal); + letter-spacing: var(--font-spacing-regular); + } + +} + +/******************** Tablet End ********************/ + +/******************** Desktop Start ********************/ +@media(min-width: 1200px) { + :root { + --wrapper-width: 1920px; + --wrapper-narrow-width: 988px; + --wrapper-gap: 7px; + + --banner-padding-top: 30px; + --banner-height: 540px; + --hero-title-gap: 24px; + + --button-padding-lg: 12px 124px; + + --features-padding-bottom: 138px; + + --feature-font-header: var(--font-size-2xl); + --feature-padding: 138px 0; + --feature-margin: 0 24px; + --feature-gap: 10px; + } + + .banner { + text-align: left; + height: var(--banner-height); + } + + .banner .wrapper { + max-width: 1200px; + flex-direction: row; /* 가로 정렬로 변경 */ + padding-top: var(--banner-padding-top); + position: relative; + } + + .banner img { + position: absolute; + bottom: 0; + right: 0; + height: 70%; + width: auto; + } + + .banner .hero-title { + align-items: flex-start; /* 텍스트 왼쪽 정렬 */ + gap: var(--hero-title-gap, 24px); + } + + .feature-content .heading-line-break { + display: var(--feature-content-line-break); + } + + h1 { + font-size: var(--font-size-2xl); + line-height: var(--line-height-normal); + } + + /* features section */ + .feature { + flex-direction: row; + align-items: center; + } + + .feature:nth-of-type(even) { + flex-direction: row-reverse; + } + + .feature img { + width: 55%; + } + + .feature-description { + font-size: var(--font-size-lg); + line-height: var(--line-height-relaxed); + } +} + +/******************** Desktop End ********************/ \ No newline at end of file diff --git a/styles/mobile.css b/styles/mobile.css deleted file mode 100644 index 26034865..00000000 --- a/styles/mobile.css +++ /dev/null @@ -1,126 +0,0 @@ -nav { - justify-content: space-between; - padding: 0 16px; -} - -.wrapper { - width: 100%; - max-width: 375px; - margin: 0 auto; -} - -.wrapper--narrow { - max-width: 344px; -} - -#hero { - background-image: url(/images/Img_home_top.png); -} - -#closing-banner { - background-image: url(/images/Img_home_bottom.png); -} - -.banner { - display: flex; - background-position: bottom; - background-size: 90%; - background-repeat: no-repeat; - height: 540px; - background-position: bottom; - background-color: var(--color-surface-accent); - text-align: center; - padding-top: 48px; -} - -h1 { - font-size: 32px; - font-weight: 700; - color: var(--secondary-700); - line-height: 1.4; - margin-bottom: 18px; -} - -.btn { - background-color: var(--brand-blue); - color: var(--secondary-50); - border: none; - padding: 12px 71px; - border-radius: 40px; - cursor: pointer; - font-weight: 600; - font-size: 18px; - flex-shrink: 0; -} - -.features { - padding-bottom: 18px; -} - -.feature { - padding: 40px 0; - display: flex; - flex-direction: column; - margin: 0 16px; - text-align: left; - gap: 16px; -} - -.feature-content { - flex: 1; -} - -.feature:nth-last-of-type(even) { - flex-direction: column-reverse; -} - -.feature:nth-of-type(even) .feature-content { - text-align: right; -} - -.feature h1 br { - display: none; -} - -.feature h1 { - font-size: 24px; - font-weight: 700; - line-height: 32px; -} - -.feature-tag { - color: var(--brand-blue); - font-size: 16px; - line-height: 26px; - font-weight: 700; -} - -.feature-description { - font-size: 18px; - font-weight: 500; - line-height: 140%; - letter-spacing: 0.08em; -} - -footer { - padding: 32px 16px 42px 16px; - flex-wrap: wrap; - gap: 24px; -} - -@media (max-width: 470px) { - .footer-copyright { - order: 3; - width: 100%; - /* 줄바꿈 되게 함 */ - margin-top: 16px; - } - - #footer--menu { - order: 1; - } - - #footer--sns { - order: 2; - } -} \ No newline at end of file diff --git a/styles/tablet.css b/styles/tablet.css deleted file mode 100644 index 2644cf25..00000000 --- a/styles/tablet.css +++ /dev/null @@ -1,97 +0,0 @@ -nav{ - justify-content: space-between; - padding: 0 24px; -} -.wrapper { - width: 100%; - max-width: 991px; - /* 왜 max-width?*/ - margin: 0 auto; -} -.wrapper--narrow { - max-width: 961px; -} -.banner{ - height: 771px; - background-position: bottom; -} -#hero { - background-image: url(/images/Img_home_top.png); -} -#closing-banner{ - background-image: url(/images/Img_home_bottom.png); -} -.banner { - display: flex; - background-position: bottom; - background-repeat: no-repeat; - height: 771px; - background-color: var(--color-surface-accent); - text-align: center; - padding-top: 84px; -} - -h1 { - font-size: 40px; - font-weight: 700; - color: var(--secondary-700); - line-height: 1.4; - margin-bottom: 32px; -} - -.btn{ - background-color: var(--brand-blue); - color: #F9FAFB; - border: none; - padding: 16px 124px; - border-radius: 40px; - cursor: pointer; - font-weight: 600; - font-size: 20px; - flex-shrink: 0; -} - -.features { - padding-bottom: 52px; -} - -.feature { - padding: 52px 0; - display: flex; - flex-direction: column; - margin: 0 24px; - text-align: left; - gap: 24px; -} - -.feature-content { - flex: 1; -} - -.feature:nth-last-of-type(even){ - flex-direction: column-reverse; -} -.feature:nth-of-type(even) .feature-content { - text-align: right; -} -.feature h1 br { - display: none; - } - -.feature-tag { - color: var(--brand-blue); - font-size: 18px; - line-height: 25px; - font-weight: 700; -} - -.feature-description { - font-size: 24px; - font-weight: 500; - line-height: 120%; - letter-spacing: 0.08em; -} - -footer{ - padding: 12px 12px 32px 12px; -} \ No newline at end of file diff --git a/styles/variables.css b/styles/variables.css index 6fdd0bdf..3f8c5357 100644 --- a/styles/variables.css +++ b/styles/variables.css @@ -1,24 +1,59 @@ :root { - --color-surface-primary: #FFFFFF; - --color-surface-accent: #CFE5FF; - --color-social-login-bg: #E6F2FF; - --brand-blue: #3692FF; - --border-color: #DFDFDF; + /* Design Tokens */ + --color-white: #FFFFFF; + --color-blue-50: #E6F2FF; + --color-blue-100: #CFE5FF; + --color-blue-200: #3692FF; + --color-blue-300: #1967D6; + --color-blue-400: #1251AA; + --color-gray-50: #F9FAFB; + --color-gray-100: #F3F4F6; + --color-gray-200: #E5E7EB; + --color-gray-400: #9CA3AF; + --color-gray-500: #6B7280; + --color-gray-600: #4B5563; + --color-gray-700: #374151; + --color-gray-800: #1F2937; + --color-gray-900: #111827; + --color-border: #DFDFDF; + /* Semantic Tokens */ + --bg-primary: var(--color-white); + --bg-accent: var(--color-blue-100); + --bg-social-login: var(--color-blue-50); + --bg-footer: var(--color-gray-900); + --bg-input: var(--color-gray-100); + --text-primary: var(--color-gray-800); + --text-secondary: var(--color-gray-500); + --text-muted: var(--color-gray-400); + --brand-blue: var(--color-blue-200); + --button-primary-bg: var(--brand-blue); + --button-primary-text: var(--color-gray-100); + --border-default: var(--color-border); - --primary-100: #1967D6; - --primary-200: #1967D6; - --primary-300: #1251AA; - --primary-400: #9CA3AF; + /* FONT SIZE */ + --font-size-sm: 14px; + --font-size-base: 16px; + --font-size-md: 18px; + --font-size-lg: 24px; + --font-size-xl: 32px; + --font-size-2xl: 40px; + --font-button-lg: 18px; + /* FONT WEIGHT */ + --font-weight-regular: 400; + --font-weight-medium: 500; + --font-weight-button: 600; + --font-weight-bold: 700; + /* LETTER SPACING */ + --font-spacing-regular: 0; + --font-spacing-medium: 8%; + /* FONT HEIGHT */ + --line-height-tight: 1.2; + --line-height-normal: 1.4; + --line-height-relaxed: 1.6; + /* BUTTON */ + --button-padding-lg: 12px 71px; + --button-padding-sm-40: 12px 24px; + --button-radius-sm-40: 8px; + --button-radius-lg: 40px; - --cool-gray-400: #9CA3AF; - - --secondary-50: #F9FAFB; - --secondary-100: #F3F4F6; - --secondary-200: #E5E7EB; - --secondary-400: #9CA3AF; - --secondary-500: #6B7280; - --secondary-600: #4B5563; - --secondary-700: #374151; - --secondary-800: #1F2937; - --secondary-900: #111827; } \ No newline at end of file