/* ==========================================================================
   Variables
   ========================================================================== */

:root {
    /* Colors */
    --color-brand: #0b85ff;
    --color-navOverlay: rgba(255, 255, 255, 0.92);
    --color-white: #ffffff;
    --color-black: #000000;
    --color-text: #333333;
    --color-gray: #999999;
    --color-textPink: #e90f96;
    --color-accent: #ff4e92;
    --color-bgMuted: #e9f8ff;
    --color-bgYellow: #fff5b2;
    --color-badgeBg: #0146bc;
    --color-borderGray: #dddddd;
    --color-borderDash: #dddddd;

    /* Typography */
    --font-family-base: 'LINESeedJP_OTF_Rg', sans-serif;
    --font-family-bold: 'LINESeedJP_OTF_Bd', sans-serif;
    --font-family-black: 'LINESeedJP_OTF_Eb', sans-serif;

    --font-size-xs: 12px;
    --font-size-flowPlus: 13px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-md: 18px;
    --font-size-lg: 20px;
    --font-size-xl: 22px;
    --font-size-xxl: 24px;
    --font-size-2xl: 32px;
    --font-size-3xl: 40px;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --font-weight-black: 900;

    --line-height-base: 30px;
    --line-height-reward: 22px;
    --line-height-circle: 32px;
    --line-height-stepBadge: 36px;
    --line-height-flowCard: 24px;
    --line-height-flowPlus: 20px;

    /* Spacing */
    --space-xxs: 2px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-badge: 15px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* Border */
    --border-radius-card: 10px;
    --border-radius-badge: 6px;
    --border-radius-btn: 100px;
    --border-radius-circle: 1000px;
    --border-width-qa: 8px;
    --border-width-circle: 10px;

    /* Shadow */
    --shadow-card: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
    --shadow-btn: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 0px rgba(0, 0, 0, 0.15);

    /* Size */
    --size-cardWidth: 235px;
    --size-cardImgWidth: 150px;
    --size-cardImgHeight: 90px;
    --size-cardBottomHeight: 107px;
    --size-btnHeight: 70px;
    --size-btnMaxWidth: 480px;
    --size-dot: 7px;
    --size-icon: 22px;
    --size-qaMaxWidth: 900px;
    --size-pgMaxWidth: 900px;
    --size-recommendMaxWidth: 940px;
    --size-flowCardWidth: 220px;
    --size-flowIllustHeight: 160px;
    --size-flowPlusIcon: 26px;
    --size-circle: 170px;
    --size-illustWidth: 212px;
    --size-illustCharWidth: 172px;
    --size-illustCharHeight: 209px;
    --size-app: 85px;
}