/*
기반 컬러: #F2A2CE, #D9D9D9, #7C9AA6, #262626, #0D0D0D
*/

/* ========================================
   CSS 변수
   ======================================== */
:root {
    --color-point: #D98C4A;
    --color-point-light: #E8B520;
    --color-point-dark: #734022;

    --color-bg: #E0E0E0;
    --color-bg-light: #FAFAFA;
    --color-bg-dark: #CFCFCF;

    --color-shadow: #A67F5D;
    --color-shadow-light: #CEA461;
    --color-shadow-dark: #A67F5D;

    --color-black: #402E1E;
    --color-black-light: #3D3D3D;
    --color-black-dark: #1A1A1A;

    --color-abyss: #0D0D0D;

    --color-alert-working: #C1D90D;
    --color-alert-success: #77CFD9;
    --color-alert-danger: #D95959;
    --color-alert-warning: #F2D95C;
    --color-alert-default: #F2F2F2;
    /* --color-point: #F2A2CE;
    --color-point-light: #F8C9E3;
    --color-point-dark: #E87BB8;

    --color-bg: #D9D9D9;
    --color-bg-light: #FEFEFE;
    --color-bg-dark: #C0C0C0;

    --color-shadow: #7C9AA6;
    --color-shadow-light: #A3BFCC;
    --color-shadow-dark: #5A7A87;

    --color-black: #262626;
    --color-black-light: #3D3D3D;
    --color-black-dark: #1A1A1A;

    --color-abyss: #0D0D0D; */
}

/* ========================================
   Text Colors
   ======================================== */
.text-point {
    color: var(--color-point);
}
.text-point-light {
    color: var(--color-point-light);
}
.text-point-dark {
    color: var(--color-point-dark);
}

.text-bg {
    color: var(--color-bg);
}
.text-bg-light {
    color: var(--color-bg-light);
}
.text-bg-dark {
    color: var(--color-bg-dark);
}

.text-shadow {
    color: var(--color-shadow);
}
.text-shadow-light {
    color: var(--color-shadow-light);
}
.text-shadow-dark {
    color: var(--color-shadow-dark);
}

.text-black {
    color: var(--color-black);
}
.text-black-light {
    color: var(--color-black-light);
}
.text-black-dark {
    color: var(--color-black-dark);
}

.text-abyss {
    color: var(--color-abyss);
}

/* ========================================
   Background Colors
   ======================================== */
.color-point {
    background: var(--color-point);
}
.color-point-light {
    background: var(--color-point-light);
}
.color-point-dark {
    background: var(--color-point-dark);
}

.color-bg {
    background: var(--color-bg);
}
.color-bg-light {
    background: var(--color-bg-light);
}
.color-bg-dark {
    background: var(--color-bg-dark);
}

.color-shadow {
    background: var(--color-shadow);
}
.color-shadow-light {
    background: var(--color-shadow-light);
}
.color-shadow-dark {
    background: var(--color-shadow-dark);
}

.color-black {
    background: var(--color-black);
}
.color-black-light {
    background: var(--color-black-light);
}
.color-black-dark {
    background: var(--color-black-dark);
}

.color-abyss {
    background: var(--color-abyss);
}

/* ========================================
   Border Colors
   ======================================== */
.border-point {
    border-color: var(--color-point);
}
.border-point-light {
    border-color: var(--color-point-light);
}
.border-point-dark {
    border-color: var(--color-point-dark);
}

.border-bg {
    border-color: var(--color-bg);
}
.border-bg-light {
    border-color: var(--color-bg-light);
}
.border-bg-dark {
    border-color: var(--color-bg-dark);
}

.border-shadow {
    border-color: var(--color-shadow);
}
.border-shadow-light {
    border-color: var(--color-shadow-light);
}
.border-shadow-dark {
    border-color: var(--color-shadow-dark);
}

.border-black {
    border-color: var(--color-black);
}
.border-black-light {
    border-color: var(--color-black-light);
}
.border-black-dark {
    border-color: var(--color-black-dark);
}

.border-abyss {
    border-color: var(--color-abyss);
}

/* ========================================
   버튼 스타일
   ======================================== */

/* Point 버튼 */
.btn-point {
    background-color: var(--color-point);
    border-color: var(--color-point);
    color: #fff;
}
.btn-point:hover {
    background-color: var(--color-point-light);
    border-color: var(--color-point-light);
    color: #fff;
}
.btn-point:active,
.btn-point:focus {
    background-color: var(--color-point-dark);
    border-color: var(--color-point-dark);
    color: #fff;
    box-shadow: 0 0 0 0.25rem rgba(242, 162, 206, 0.25);
}

/* Shadow 버튼 */
.btn-shadow {
    background-color: var(--color-shadow);
    border-color: var(--color-shadow);
    color: #fff;
}
.btn-shadow:hover {
    background-color: var(--color-shadow-light);
    border-color: var(--color-shadow-light);
    color: #fff;
}
.btn-shadow:active,
.btn-shadow:focus {
    background-color: var(--color-shadow-dark);
    border-color: var(--color-shadow-dark);
    color: #fff;
    box-shadow: 0 0 0 0.25rem rgba(124, 154, 166, 0.25);
}

/* Black 버튼 */
.btn-black {
    background-color: var(--color-black);
    border-color: var(--color-black);
    color: #fff;
}
.btn-black:hover {
    background-color: var(--color-black-light);
    border-color: var(--color-black-light);
    color: #fff;
}
.btn-black:active,
.btn-black:focus {
    background-color: var(--color-black-dark);
    border-color: var(--color-black-dark);
    color: #fff;
    box-shadow: 0 0 0 0.25rem rgba(38, 38, 38, 0.25);
}

/* Outline 버튼 */
.btn-outline-point {
    color: var(--color-point);
    border-color: var(--color-point);
}
.btn-outline-point:hover {
    background-color: var(--color-point);
    border-color: var(--color-point);
    color: #fff;
}
.btn-outline-point:active,
.btn-outline-point:focus {
    background-color: var(--color-point-dark);
    border-color: var(--color-point-dark);
    color: #fff;
    box-shadow: 0 0 0 0.25rem rgba(242, 162, 206, 0.25);
}

.btn-outline-shadow {
    color: var(--color-shadow);
    border-color: var(--color-shadow);
}
.btn-outline-shadow:hover {
    background-color: var(--color-shadow);
    border-color: var(--color-shadow);
    color: #fff;
}

/* ========================================
   링크 스타일
   ======================================== */

/* Point 링크 */
.link-point {
    color: var(--color-point);
    text-decoration: none;
}
.link-point:hover {
    color: var(--color-point-dark);
}

/* Shadow 링크 */
.link-shadow {
    color: var(--color-shadow);
    text-decoration: none;
}
.link-shadow:hover {
    color: var(--color-shadow-dark);
}

/* ========================================
   폼 스타일
   ======================================== */

/* 포커스 상태 */
.form-control:focus,
.form-select:focus {
    border-color: var(--color-point);
    box-shadow: 0 0 0 0.25rem rgba(242, 162, 206, 0.15);
}

/* 체크박스/라디오 */
.form-check-input:focus {
    border-color: var(--color-point);
    box-shadow: 0 0 0 0.25rem rgba(242, 162, 206, 0.15);
}

.form-check-input:checked {
    background-color: var(--color-point);
    border-color: var(--color-point);
}

/* ========================================
   뱃지 스타일
   ======================================== */

.badge-point {
    background-color: var(--color-point);
    color: #fff;
}

.badge-shadow {
    background-color: var(--color-shadow);
    color: #fff;
}

.badge-black {
    background-color: var(--color-black);
    color: #fff;
}

/* ========================================
   알림창 스타일
   ======================================== */

.alert-point {
    background-color: #FCF0F7;
    border-color: var(--color-point-light);
    color: #8B4968;
}

.alert-point .alert-link {
    color: #6B3550;
}