/* ============================================================
 * PLANBEAR Design Tokens
 * ============================================================
 * Notion 디자인 시스템 방법론 차용 + PLANBEAR 정체성 유지
 * - Color: PLANBEAR 블루 계열 (Notion 보라 X)
 * - Typography: 시니어 친화 (body 17px 기본, Notion은 16px)
 * - Spacing/Radius: Notion 스케일 그대로
 * ============================================================ */

:root {
    /* ─── Brand & Primary ─────────────────────────────── */
    --color-primary: #1976d2;            /* PLANBEAR 블루 — 신뢰감 톤 */
    --color-primary-pressed: #145ea8;
    --color-primary-deep: #0d47a1;       /* 강조 진행 */
    --color-primary-soft: #e8f1fb;       /* 살짝 깔리는 배경 (호버/선택 영역) */
    --color-on-primary: #ffffff;

    /* ─── Brand Navy (Hero band) ──────────────────────── */
    --color-brand-navy: #0a1530;         /* 깊은 네이비 — Hero 배경 */
    --color-brand-navy-deep: #060d1f;    /* 더 깊은 진한 네이비 */
    --color-brand-navy-mid: #1a2a52;     /* 중간 네이비 (decorative) */

    /* ─── Link & Inline ───────────────────────────────── */
    --color-link: #0075de;
    --color-link-pressed: #005bab;

    /* ─── Brand accent (sparingly) ─────────────────────── */
    --color-accent-teal: #2a9d99;
    --color-accent-green: #1aae39;
    --color-accent-orange: #dd5b00;
    --color-accent-yellow: #f5d75e;

    /* ─── Card tints (Notion pastel 팔레트 — 절제 사용) ─ */
    --color-tint-blue: #e8f1fb;          /* 정보 카드 */
    --color-tint-sky: #dcecfa;           /* 가벼운 정보 */
    --color-tint-mint: #d9f3e1;          /* 성공/확인 */
    --color-tint-yellow: #fef7d6;        /* 주의/하이라이트 */
    --color-tint-yellow-bold: #f9e79f;   /* 고강조 배너 */
    --color-tint-cream: #f8f5e8;         /* 차분 강조 */
    --color-tint-peach: #ffe8d4;         /* 따뜻한 강조 */
    --color-tint-rose: #fde0ec;          /* 부드러운 핑크 */
    --color-tint-lavender: #e6e0f5;      /* 부드러운 보라 */
    --color-tint-gray: #f0eeec;          /* 중립 */

    /* tint 위 텍스트 컬러 (대비 안전) */
    --color-on-tint-peach: #793400;
    --color-on-tint-rose: #a02e6d;
    --color-on-tint-mint: #167a2c;
    --color-on-tint-lavender: #391c57;
    --color-on-tint-sky: #145ea8;
    --color-on-tint-yellow: #7a5a00;

    /* ─── Surface ──────────────────────────────────────── */
    --color-canvas: #ffffff;             /* 페이지 / 카드 표면 */
    --color-surface: #f6f8fa;            /* 섹션 구분 / featured 배경 */
    --color-surface-soft: #fafbfc;       /* 더 옅은 구분 */
    --color-ivory: #faf7f2;              /* 에디토리얼 베이지 (랜딩용) */
    --color-hairline-ivory: #ebe6dc;     /* 아이보리 위 hairline */

    /* ─── Hairline (테두리) ────────────────────────────── */
    --color-hairline: #e5e8eb;           /* 1px 일반 테두리 */
    --color-hairline-soft: #eef0f2;      /* 더 옅음 */
    --color-hairline-strong: #c8ccd1;    /* 입력 필드용 */

    /* ─── Text (시니어 친화 — 충분한 대비) ────────────── */
    --color-ink-deep: #000000;
    --color-ink: #1a1a1a;                /* 본문 기본 */
    --color-charcoal: #37352f;           /* 본문 강조 */
    --color-slate: #4a5266;              /* 보조 텍스트 */
    --color-steel: #6b7280;              /* 3차 텍스트 */
    --color-stone: #9ca3af;              /* 캡션/보조 */
    --color-muted: #b9bdc4;               /* 비활성/플레이스홀더 */
    --color-on-dark: #ffffff;
    --color-on-dark-muted: #b8bdc7;

    /* ─── Semantic ─────────────────────────────────────── */
    --color-success: #1aae39;
    --color-warning: #dd5b00;
    --color-error: #e03131;

    /* ─── Alert (login.html 등 알림 박스) ───────────────── */
    --color-error-bg: #fdecec;
    --color-error-border: #f5c2c2;
    --color-error-text: #8a1f1f;
    --color-warning-bg: var(--color-tint-yellow);
    --color-warning-border: #f1d676;
    --color-warning-text: #76520a;

    /* ─── Messaging tone (room.html — 참가자 메시징 컨텍스트, Slack 풍) ─ */
    --color-message-canvas: #ffffff;
    --color-message-canvas-soft: #f8f8f8;
    --color-message-canvas-hover: #f5f5f5;
    --color-message-ink: #1d1c1d;
    --color-message-ink-soft: #616061;
    --color-message-ink-muted: #868686;
    --color-message-hairline: #e8e8e8;
    --color-message-operator: #1264a3;
    --color-message-success: #2eb67d;
    --color-message-warning: #e97a00;
    --color-message-urgent: #e01e5a;

    /* ─── Participant input (room_question.html — 모바일 질문 입력 컨텍스트, 카톡 풍) ─ */
    --color-participant-canvas: #b2c7d9;
    --color-participant-chat-bg: #abc1d1;
    --color-participant-bubble: #fee500;
    --color-participant-ink: #3c1e1e;

    /* ─── Spacing (Notion 스케일 그대로 차용, 4px base) ─ */
    --space-xxs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 20px;
    --space-xl: 24px;
    --space-xxl: 32px;
    --space-xxxl: 40px;
    --space-section-sm: 48px;
    --space-section: 64px;
    --space-section-lg: 96px;
    --space-hero: 120px;

    /* ─── Radius ───────────────────────────────────────── */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;       /* 버튼·인풋 (Notion 표준, NOT pill) */
    --radius-lg: 12px;      /* 카드 */
    --radius-xl: 16px;
    --radius-xxl: 20px;
    --radius-xxxl: 24px;
    --radius-full: 9999px;  /* 배지·필탭 한정 */

    /* ─── Typography (시니어 친화: body 17px) ─────────── */
    --font-family-sans: 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;

    --font-hero-display: 600 76px/1.1 var(--font-family-sans);
    --font-display-lg: 600 56px/1.15 var(--font-family-sans);
    --font-h1: 600 44px/1.2 var(--font-family-sans);
    --font-h2: 600 32px/1.25 var(--font-family-sans);
    --font-h3: 600 24px/1.3 var(--font-family-sans);
    --font-h4: 600 20px/1.4 var(--font-family-sans);
    --font-h5: 600 18px/1.45 var(--font-family-sans);
    --font-subtitle: 400 19px/1.5 var(--font-family-sans);
    --font-body: 400 17px/1.6 var(--font-family-sans);              /* 시니어 친화 17px */
    --font-body-medium: 500 17px/1.6 var(--font-family-sans);
    --font-body-sm: 400 15px/1.55 var(--font-family-sans);          /* 보조 */
    --font-body-sm-medium: 500 15px/1.55 var(--font-family-sans);
    --font-caption: 400 13px/1.4 var(--font-family-sans);
    --font-caption-bold: 600 13px/1.4 var(--font-family-sans);
    --font-button: 500 15px/1.3 var(--font-family-sans);
    --font-button-lg: 500 17px/1.3 var(--font-family-sans);

    /* 글자 간격 (display 사이즈에 음수 트래킹) */
    --letter-tight: -1px;
    --letter-tighter: -1.5px;
    --letter-display: -2px;

    /* ─── Elevation (Shadow) ───────────────────────────── */
    --shadow-flat: 0 0 0 1px var(--color-hairline);
    --shadow-1: 0 1px 2px rgba(15, 15, 15, 0.04);
    --shadow-2: 0 4px 12px rgba(15, 15, 15, 0.08);
    --shadow-3: 0 24px 48px -8px rgba(15, 15, 15, 0.20);
    --shadow-modal: 0 16px 48px -8px rgba(15, 15, 15, 0.16);

    /* ─── Transition ──────────────────────────────────── */
    --transition-fast: 150ms ease;
    --transition-default: 200ms ease;
    --transition-slow: 300ms ease;
}

/* ============================================================
 * 컴포넌트 — 토큰 기반 재사용 클래스
 * ============================================================ */

/* ─── 버튼 ─────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    padding: 10px 18px;
    font: var(--font-button);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
    user-select: none;
    white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { cursor: not-allowed; opacity: 0.55; }

.btn-primary {
    background: var(--color-primary);
    color: var(--color-on-primary);
}
.btn-primary:hover:not(:disabled) { background: var(--color-primary-pressed); }

.btn-dark {
    background: var(--color-ink-deep);
    color: var(--color-on-dark);
}
.btn-dark:hover:not(:disabled) { background: var(--color-charcoal); }

.btn-secondary {
    background: transparent;
    color: var(--color-ink);
    border-color: var(--color-hairline-strong);
}
.btn-secondary:hover:not(:disabled) {
    background: var(--color-surface);
    border-color: var(--color-slate);
}

.btn-on-dark {
    background: var(--color-on-dark);
    color: var(--color-ink);
}
.btn-on-dark:hover:not(:disabled) { background: var(--color-surface); }

.btn-secondary-on-dark {
    background: transparent;
    color: var(--color-on-dark);
    border-color: var(--color-on-dark-muted);
}
.btn-secondary-on-dark:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--color-on-dark);
}

.btn-ghost {
    background: transparent;
    color: var(--color-ink);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
}
.btn-ghost:hover:not(:disabled) { background: var(--color-surface); }

.btn-link {
    background: transparent;
    color: var(--color-link);
    padding: 0;
    font: var(--font-body-sm-medium);
    text-decoration: none;
}
.btn-link:hover:not(:disabled) { color: var(--color-link-pressed); text-decoration: underline; }

.btn-lg {
    padding: 14px 24px;
    font: var(--font-button-lg);
}
.btn-sm {
    padding: 6px 12px;
    font: var(--font-caption-bold);
}

/* ─── 카드 ─────────────────────────────────────────────── */
.card {
    background: var(--color-canvas);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
}
.card-feature {
    background: var(--color-canvas);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-lg);
    padding: var(--space-xxl);
}
.card-tint-blue   { background: var(--color-tint-blue);   border-color: transparent; }
.card-tint-mint   { background: var(--color-tint-mint);   border-color: transparent; }
.card-tint-yellow { background: var(--color-tint-yellow); border-color: transparent; }
.card-tint-cream  { background: var(--color-tint-cream);  border-color: transparent; }
.card-tint-gray   { background: var(--color-tint-gray);   border-color: transparent; }

/* ─── 입력 필드 ────────────────────────────────────────── */
.input {
    display: block;
    width: 100%;
    background: var(--color-canvas);
    color: var(--color-ink);
    border: 1px solid var(--color-hairline-strong);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    font: var(--font-body);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.12);
}
.input::placeholder { color: var(--color-muted); }

/* ─── 배지 ─────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font: var(--font-caption-bold);
    color: var(--color-on-primary);
    background: var(--color-primary);
}
.badge-tag {
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}
.badge-tag-blue   { background: var(--color-tint-blue);   color: var(--color-primary-deep); }
.badge-tag-mint   { background: var(--color-tint-mint);   color: var(--color-accent-green); }
.badge-tag-orange { background: var(--color-tint-yellow); color: var(--color-accent-orange); }

/* ─── Hero band ───────────────────────────────────────── */
.hero-band {
    background: var(--color-brand-navy);
    color: var(--color-on-dark);
    padding: var(--space-hero) var(--space-xxl);
    position: relative;
    overflow: hidden;
}
.hero-band-deep {
    background: var(--color-brand-navy-deep);
}

/* ─── 푸터 ─────────────────────────────────────────────── */
.footer-region {
    background: var(--color-canvas);
    color: var(--color-charcoal);
    padding: var(--space-section) var(--space-xxl);
    border-top: 1px solid var(--color-hairline);
}
.footer-link {
    color: var(--color-steel);
    font: var(--font-body-sm);
    text-decoration: none;
    padding: var(--space-xxs) 0;
}
.footer-link:hover { color: var(--color-ink); }