/**
 * Design Tokens.
 * Based on FRONTEND.md specifications.
 */
:root {
    /* Colors */
    --travel-primary: #2C3E50;
    --travel-accent: #E67E22;
    --travel-bg: #FAFAFA;
    --travel-card-bg: #FFFFFF;
    
    --travel-text-main: #2C3E50;
    --travel-text-muted: #5A6C7D;
    --travel-text-secondary: #9CA8B5;
    
    --travel-status-operating: #27AE60;
    --travel-status-maintenance: #F39C12;
    --travel-status-closed: #95A5A6;

    /* Semantic colors (toast / inline messages) */
    --travel-color-success: #27AE60;
    --travel-color-warning: #F39C12;
    --travel-color-danger:  #C0392B;
    --travel-color-info:    #3498DB;

    /* Typography */
    --travel-font-main: 'Inter', system-ui, -apple-system, sans-serif;
    --travel-font-zh: 'Noto Sans TC', 'PingFang TC', sans-serif;
    
    /* Font Sizes */
    --travel-fs-h1: 32px;
    --travel-fs-h2: 26px;
    --travel-fs-h3: 20px;
    --travel-fs-h4: 18px;
    --travel-fs-h5: 16px;
    --travel-fs-body: 18px;
    --travel-fs-small: 16px;

    /* Spacing */
    --travel-space-xs: 4px;
    --travel-space-sm: 8px;
    --travel-space-md: 16px;
    --travel-space-lg: 24px;
    --travel-space-xl: 32px;
    --travel-space-2xl: 48px;
    --travel-space-3xl: 64px;

    /* Components */
    --travel-radius-card: 8px;
    --travel-radius-btn: 6px;
    --travel-radius-pill: 999px;
    --travel-radius-md: 8px;
    --travel-radius-lg: 16px;

    /* Surface / borders / muted backgrounds */
    --travel-surface: #FFFFFF;
    --travel-border: #E7E5E0;
    --travel-bg-soft: #F3F4F6;
    --travel-bg-page: #FAFAF7;
    --travel-text: #1A202C;

    /* Hero — 統一 /me/ 與 /u/ 個人 hero 視覺 */
    --travel-hero-bg: #FFFFFF;
    --travel-hero-fallback: linear-gradient(135deg, var(--travel-primary) 0%, var(--travel-accent) 100%);
    --travel-hero-overlay: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.55) 100%);
    --travel-hero-avatar-ring: var(--travel-bg-page);
    --travel-hero-avatar-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
    --travel-hero-avatar-size: 140px;
    --travel-hero-avatar-size-md: 168px;
    --travel-hero-cover-h: 280px;
    --travel-hero-cover-h-md: 360px;
    --travel-hero-cover-h-lg: 440px;

    /* Layout breakpoints (documented; CSS @media still uses literals).
       --bp-sm: 480px  --bp-md: 768px  --bp-lg: 1024px  --bp-xl: 1280px */
    --travel-shadow: 0 8px 24px rgba(0,0,0,0.08);
    --travel-shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
    --travel-shadow-card: 0 18px 40px rgba(15, 23, 42, 0.08);
    --travel-transition: 0.2s ease;

    /* Focus ring colour（avatar / 按鈕 focus-visible 共用） */
    --travel-focus-ring: var(--travel-accent);
}

@media (min-width: 1024px) {
    :root {
        --travel-fs-h1: 48px;
    }
}