/**
 * BigFoot Camping - Design System CSS
 * Source: bigfoot-design/빅풋캠핑_pencil.pen (Text Style Guide kW4GD, Color Style Guide 3hfIF)
 * Font: Pretendard (400/500/600/700/800)
 * Viewport: 412x870 (Mobile)
 */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 1. Design Tokens
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root {
    /* Primary */
    --bf-primary: #43bb8e;
    --bf-primary-light: #e7f8f7;
    --bf-secondary: #b6f0e1;
    --bf-accent: #ff5816;

    /* Text */
    --bf-text-dark: #191919;
    --bf-text-medium: #878a93;
    --bf-text-light: #afb2bb;

    /* Background */
    --bf-bg-page: #f5f5f5;
    --bf-bg-card: #ffffff;

    /* Border */
    --bf-border: #eaebed;
    --bf-border-light: #edeff1;

    /* Gray (Pure) */
    --bf-gray-100: #f5f5f5;
    --bf-gray-200: #e9e9e9;
    --bf-gray-300: #cbcbcb;
    --bf-gray-400: #a2a2a2;
    --bf-gray-500: #878787;
    --bf-gray-600: #707070;
    --bf-gray-700: #5d5d5d;
    --bf-gray-800: #323232;
    --bf-gray-900: #191919;

    /* Gray Cool */
    --bf-gc-01: #f5f5f5;
    --bf-gc-02: #edeff1;
    --bf-gc-03: #eaebed;
    --bf-gc-04: #d2d4d9;
    --bf-gc-05: #afb2bb;
    --bf-gc-06: #878a93;
    --bf-gc-07: #5a5a5f;
    --bf-gc-08: #000000;

    /* Semantic */
    --bf-gray-dark: #5a5a5f;
    --bf-chat-bg: #edeff1;
    --bf-separator: #eaebed;
    --bf-disabled-bg: #edeff1;
    --bf-disabled-text: #5a5a5f;

    /* Social */
    --bf-kakao: #fdde38;
    --bf-naver: #20cc06;

    /* Font */
    --bf-font: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 2. Base Reset
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

body {
    font-family: var(--bf-font);
    background-color: var(--bf-bg-card);
    color: var(--bf-text-dark);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

* {
    -webkit-tap-highlight-color: transparent;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 3. Typography Scale
 *
 * From Text Style Guide (kW4GD):
 *   H1:       24px / 800 / 1.4 / -0.72px
 *   H2:       20px / 600 / 1.4
 *   H3:       18px / 800 / 1.4
 *   Btn1:     18px / 700 / 1.4 / -0.54px
 *   Btn2:     14px / 700 / 1.6 / -0.42px
 *   Subtitle: 16px / 800 / 1.4
 *   Body1:    16px / 400 / 1.4
 *   Body2:    14px / 400 / 1.4 / -0.42px
 *   Caption:  12px / 400 / 1.4
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.bf-h1 {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -0.72px;
}

.bf-h2 {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
}

.bf-h3 {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.4;
}

.bf-btn1 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.54px;
}

.bf-btn2 {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: -0.42px;
}

.bf-subtitle {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.4;
}

.bf-body1 {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
}

.bf-body2 {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.42px;
}

.bf-caption {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 4. Common Utilities
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Text color */
.bf-text-primary { color: var(--bf-primary); }
.bf-text-accent  { color: var(--bf-accent); }
.bf-text-dark    { color: var(--bf-text-dark); }
.bf-text-medium  { color: var(--bf-text-medium); }
.bf-text-light   { color: var(--bf-text-light); }

/* Background */
.bf-bg-primary   { background: var(--bf-primary); }
.bf-bg-page      { background: var(--bf-bg-page); }
.bf-bg-card      { background: var(--bf-bg-card); }

/* Button base (shared by PrimaryButton / SecondaryButton parts) */
.bf-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    border-radius: 10px;
    transition: opacity 0.2s;
}

.bf-btn:active {
    opacity: 0.8;
}

.bf-btn-primary {
    background: var(--bf-primary);
    color: #ffffff;
    height: 51px;
}

.bf-btn-secondary {
    background: var(--bf-gc-02);
    color: var(--bf-gc-07);
    height: 56px;
}

.bf-btn-disabled {
    background: var(--bf-disabled-bg);
    color: var(--bf-disabled-text);
    pointer-events: none;
}

/* Separator */
.bf-separator {
    height: 1px;
    background: var(--bf-separator);
}

.bf-separator-thick {
    height: 8px;
    background: var(--bf-bg-page);
}

/* Safe area padding */
.bf-safe-bottom {
    padding-bottom: env(safe-area-inset-bottom);
}

/* Ellipsis */
.bf-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bf-ellipsis-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Tag pill (shared base for TagPill, DateTagPill, LocationTagPill) */
.bf-pill {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 500;
}