@charset "UTF-8";

/* ========================================
   BNK Design Tokens
   Foundation / Palette / Spacing / Radius 는 Figma 변수에서 추출한 값입니다.
   추출: design-tokens/figma-variable-extract.css
   그 밖의 그룹(타이포·섀도·z-index 등)은 Figma에 없는 코드 전용 토큰입니다.
   ======================================== */

:root {
    /* Foundation Colors - Light Mode */
    --foundation-primary-bnk-red: #d21300;
    --foundation-primary-bnk-dark-red: #9c0f01;
    --foundation-primary-bnk-dark-gray: #655c4f;
    --foundation-primary-bnk-light-gray: #b7a997;
    --foundation-primary-black: #222222;

    --foundation-font-bnk-red: #d21300;
    --foundation-font-black: #222222;
    --foundation-font-gray-1: #323336;
    --foundation-font-gray-2: #656669;
    --foundation-font-gray-3: #88898c;
    --foundation-font-gray-4: #929399;
    --foundation-font-white: #ffffff;

    --foundation-line-gray-1: #eff0f5;
    --foundation-line-gray-2: #dce0e9;
    --foundation-line-gray-3: #c4c8d1;
    --foundation-line-popup: #eff0f5;
    --foundation-line-white: #ffffff;

    --foundation-bg-bg-1: #f8f9fc;
    --foundation-bg-bg-2: #eff0f5;
    --foundation-bg-bg-3: #dce0e9;
    --foundation-bg-bg-popup: #ffffff;
    --foundation-bg-bg-popup-2: #f8f9fc;
    --foundation-bg-bg-popup-3: #eff0f5;
    --foundation-bg-bg-white: #ffffff;
    --foundation-bg-dim-70: #000000b2;

    --foundation-ui-success: #ed0015;
    --foundation-ui-error: #1c57f8;
    --foundation-ui-warning: #ffab2d;
    --foundation-ui-information: #adaeb2;

    --foundation-icon-black: #222222;
    --foundation-icon-gray: #929399;
    --foundation-icon-gray-2: #656669;
    --foundation-icon-red: #d21300;
    --foundation-icon-white: #ffffff;

    --foundation-btn-red: #d21300;
    --foundation-btn-red-pressed: #9c0f01;
    --foundation-btn-red-process: #f4c4bf;
    --foundation-btn-gray: #c4c8d1;
    --foundation-btn-2-btn: #dce0e9;
    --foundation-btn-2-btn-pressed: #b9bec7;
    --foundation-btn-2-btn-popup: #dce0e9;
    --foundation-btn-2-btn-popup-pressed: #b9bec7;

    --foundation-etc-calender: #f4c4bf;

    --foundation-global-white: #ffffff;
    --foundation-global-black: #020c22;
    --foundation-global-red: #d21300;
    --foundation-global-blue: #375dfb;

    --foundation-label-light-red: #fbe5e5;
    --foundation-label-light-orange: #fbe9e7;
    --foundation-label-light-green: #e8f5e9;
    --foundation-label-light-blue: #ebf1ff;
    --foundation-label-light-purple: #f3e5f5;
    --foundation-label-orange: #ff5722;
    --foundation-label-green: #4caf50;
    --foundation-label-purple: #9c27b0;
    --foundation-label-red: #d21300;
    --foundation-label-blue: #375dfb;

    /* Palette Colors */
    --palette-gray-0: #ffffff;
    --palette-gray-100: #f8f9fc;
    --palette-gray-200: #f3f4f8;
    --palette-gray-300: #eff0f5;
    --palette-gray-400: #dce0e9;
    --palette-gray-500: #c4c8d1;
    --palette-gray-550: #b9bec7;
    --palette-gray-600: #929399;
    --palette-gray-700: #88898c;
    --palette-gray-800: #656669;
    --palette-gray-900: #323336;
    --palette-gray-1000: #222222;
    --palette-global-white: #ffffff;
    --palette-global-black: #020c22;
    --palette-red-darker: #8b0304;
    --palette-red-dark: #9c0f01;
    --palette-red-base: #d21300;
    --palette-red-light: #f4c4bf;
    --palette-red-lighter: #fbe5e5;
    --palette-blue-darker: #162664;
    --palette-blue-dark: #253ea7;
    --palette-blue-base: #375dfb;
    --palette-blue-light: #c2d6ff;
    --palette-blue-lighter: #ebf1ff;
    --palette-bnk-gray-light: #b7a997;
    --palette-bnk-gray-dark: #655c4f;
    --palette-semantic-error: #1c57f8;
    --palette-semantic-warning: #ffab2d;
    --palette-semantic-information: #adaeb2;
    --palette-semantic-success: #ed0015;
    --palette-orange-darker: #bf360c;
    --palette-orange-dark: #d84315;
    --palette-orange-base: #ff5722;
    --palette-orange-light: #ffccbc;
    --palette-orange-lighter: #fbe9e7;
    --palette-purple-darker: #4a148c;
    --palette-purple-dark: #6a1b9a;
    --palette-purple-base: #9c27b0;
    --palette-purple-light: #e1bee7;
    --palette-purple-lighter: #f3e5f5;
    --palette-green-darker: #1b5e20;
    --palette-green-dark: #2e7d32;
    --palette-green-base: #4caf50;
    --palette-green-light: #c8e6c9;
    --palette-green-lighter: #e8f5e9;

    /* Spacing Variables */
    --space-0: 0px;
    --space-1: 2px;
    --space-2: 4px;
    --space-3: 6px;
    --space-4: 8px;
    --space-5: 10px;
    --space-6: 12px;
    --space-7: 14px;
    --space-8: 16px;
    --space-9: 18px;
    --space-10: 20px;
    --space-11: 22px;
    --space-12: 24px;
    --space-13: 26px;
    --space-14: 30px;
    --space-15: 32px;
    --space-16: 34px;
    --space-17: 36px;
    --space-18: 38px;
    --space-19: 40px;
    --space-20: 44px;
    --space-21: 48px;
    --space-22: 64px;
    --space-23: 80px;
    --space-24: 96px;
    --space-25: 120px;

    /* Radius Variables */
    --radius-0: 0px;
    --radius-1: 2px;
    --radius-2: 4px;
    --radius-3: 6px;
    --radius-4: 8px;
    --radius-5: 10px;
    --radius-6: 12px;
    --radius-7: 14px;
    --radius-8: 16px;
    --radius-9: 18px;
    --radius-10: 20px;
    --radius-11: 22px;
    --radius-12: 24px;
    --radius-13: 26px;
    --radius-14: 30px;
    --radius-15: 32px;
    --radius-16: 34px;
    --radius-17: 36px;
    --radius-18: 38px;
    --radius-19: 40px;
    --radius-20: 44px;
    --radius-21: 48px;
    --radius-22: 64px;
    --radius-23: 80px;
    --radius-24: 96px;
    --radius-25: 120px;

    /* Typography Variables */
    --font-size-xs: 1.2rem;    /* 12px */
    --font-size-sm: 1.4rem;   /* 14px */
    --font-size-base: 1.6rem;     /* 16px */
    --font-size-lg: 1.8rem;   /* 18px */
    --font-size-xl: 2rem;    /* 20px */
    --font-size-2xl: 2.4rem;    /* 24px */
    --font-size-3xl: 3rem;  /* 30px */
    --font-size-4xl: 3.6rem;   /* 36px */

    /* Font Weight Variables */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* Line Height Variables */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* Shadow Variables */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* Z-Index Variables */
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;

    /* Transition Variables */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 200ms ease-in-out;
    --transition-slow: 300ms ease-in-out;

    /* Border Variables */
    --border-width-thin: 1px;
    --border-width-normal: 2px;
    --border-width-thick: 3px;

    /* Focus Variables */
    --focus-ring-color: var(--foundation-primary-bnk-red);
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;

    /* Disabled State Variables */
    --disabled-opacity: 0.6;
    --disabled-cursor: not-allowed;
}

/* Dark Mode Variables */
[data-theme="dark"],
.dark-mode,
.darkmode {
    /* Foundation Colors - Dark Mode */
    --foundation-primary-bnk-red: #d21300;
    --foundation-primary-bnk-dark-red: #9c0f01;
    --foundation-primary-bnk-dark-gray: #655c4f;
    --foundation-primary-bnk-light-gray: #b7a997;
    --foundation-primary-black: #ffffff;

    --foundation-font-bnk-red: #FFB3AB;
    --foundation-font-black: #ffffff;
    --foundation-font-gray-1: #dce0e9;
    --foundation-font-gray-2: #dce0e9;
    --foundation-font-gray-3: #c4c8d1;
    --foundation-font-gray-4: #656669;
    --foundation-font-white: #323336;

    --foundation-line-gray-1: #323336;
    --foundation-line-gray-2: #656669;
    --foundation-line-gray-3: #88898c;
    --foundation-line-popup: #656669;
    --foundation-line-white: #ffffff;

    --foundation-bg-bg-1: #323336;
    --foundation-bg-bg-2: #323336;
    --foundation-bg-bg-3: #656669;
    --foundation-bg-bg-popup: #323336;
    --foundation-bg-bg-popup-2: #222222;
    --foundation-bg-bg-popup-3: #656669;
    --foundation-bg-bg-white: #222222;
    --foundation-bg-dim-70: #000000b2;

    --foundation-ui-success: #ed0015;
    --foundation-ui-error: #1c57f8;
    --foundation-ui-warning: #ffab2d;
    --foundation-ui-information: #adaeb2;

    --foundation-icon-black: #ffffff;
    --foundation-icon-gray: #929399;
    --foundation-icon-gray-2: #b9bec7;
    --foundation-icon-red: #d21300;
    --foundation-icon-white: #222222;

    --foundation-btn-red: #d21300;
    --foundation-btn-red-pressed: #9c0f01;
    --foundation-btn-red-process: #656669;
    --foundation-btn-gray: #656669;
    --foundation-btn-2-btn: #323336;
    --foundation-btn-2-btn-pressed: #323336;
    --foundation-btn-2-btn-popup: #656669;
    --foundation-btn-2-btn-popup-pressed: #222222;

    --foundation-etc-calender: #fbe5e5;

    --foundation-global-white: #ffffff;
    --foundation-global-black: #020c22;
    --foundation-global-red: #ffffff;
    --foundation-global-blue: #ffffff;

    --foundation-label-light-red: #656669;
    --foundation-label-light-orange: #656669;
    --foundation-label-light-green: #656669;
    --foundation-label-light-blue: #656669;
    --foundation-label-light-purple: #656669;
    --foundation-label-orange: #ffffff;
    --foundation-label-green: #ffffff;
    --foundation-label-purple: #ffffff;
    --foundation-label-red: #ffffff;
    --foundation-label-blue: #ffffff;
}