/* ============================================================
 * 中央融資顧問 - Design System v1.0
 * 2026-05-22
 *
 * Tokens 集中管理，新元件優先採用此系統，
 * 舊頁面漸進遷移（不破壞既有 btn-primary 等行內 style）。
 * ============================================================ */

:root {
    /* === Color tokens === */
    --c-brand-primary: #FF6B35;
    --c-brand-primary-hover: #E55A2B;
    --c-brand-primary-soft: rgba(255, 107, 53, 0.08);
    --c-brand-secondary: #1E3A5F;
    --c-brand-secondary-hover: #15294A;

    --c-accent-warm: #F7F3E9;
    --c-accent-cool: #F0F4F8;

    --c-success: #10B981;
    --c-warning: #F59E0B;
    --c-danger:  #DC2626;
    --c-trust:   #1E40AF;    /* 信任藍 — 試算/預約/詢價類 CTA */

    --c-text-strong: #1A202C;
    --c-text-body:   #4A5568;
    --c-text-mute:   #718096;
    --c-text-invert: #FFFFFF;
    --c-text-on-brand: #FFFFFF;

    --c-bg-page:   #FFFFFF;
    --c-bg-soft:   #F9FAFB;
    --c-bg-muted:  #F3F4F6;
    --c-border-subtle: #E5E7EB;
    --c-border-default: #D1D5DB;

    /* === Spacing scale (4px base) === */
    --s-1: 4px;   --s-2: 8px;   --s-3: 12px;
    --s-4: 16px;  --s-5: 20px;  --s-6: 24px;
    --s-8: 32px;  --s-10: 40px; --s-12: 48px;
    --s-16: 64px; --s-20: 80px; --s-24: 96px;

    /* === Radius === */
    --r-sm: 8px;  --r-md: 12px; --r-lg: 16px;
    --r-xl: 20px; --r-2xl: 24px;
    --r-pill: 9999px;

    /* === Shadow === */
    --shadow-sm:    0 1px 2px rgba(0, 0, 0, .05);
    --shadow-md:    0 4px 12px rgba(0, 0, 0, .08);
    --shadow-lg:    0 8px 24px rgba(0, 0, 0, .12);
    --shadow-xl:    0 16px 40px rgba(0, 0, 0, .15);
    --shadow-cta:   0 8px 24px rgba(255, 107, 53, .35);
    --shadow-trust: 0 8px 24px rgba(30, 64, 175, .25);

    /* === Typography === */
    --ff-sans: -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei",
               "Segoe UI", Roboto, "Noto Sans TC", sans-serif;
    --fz-xs: 12px; --fz-sm: 14px; --fz-base: 16px;
    --fz-lg: 18px; --fz-xl: 20px; --fz-2xl: 24px;
    --fz-3xl: 30px; --fz-4xl: 36px; --fz-5xl: 48px;
    --lh-tight: 1.25; --lh-snug: 1.4; --lh-base: 1.6;
    --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

    /* === Transition === */
    --t-quick: 150ms cubic-bezier(.4, 0, .2, 1);
    --t-base:  250ms cubic-bezier(.4, 0, .2, 1);
    --t-slow:  400ms cubic-bezier(.4, 0, .2, 1);

    /* === Z-index === */
    --z-dropdown: 100;
    --z-sticky:   500;
    --z-modal:    1000;
    --z-toast:    2000;
}

/* ============================================================
 * Button hierarchy
 * 命名規範：ds-* 前綴，避免與既有 .btn-primary 衝突
 * ============================================================ */

/* 共用基底 */
.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-6);
    border-radius: var(--r-pill);
    font-weight: var(--fw-semibold);
    font-size: var(--fz-base);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all var(--t-base);
    white-space: nowrap;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.ds-btn:focus-visible {
    outline: 3px solid var(--c-trust);
    outline-offset: 2px;
}

.ds-btn--lg { padding: var(--s-4) var(--s-8); font-size: var(--fz-lg); }
.ds-btn--sm { padding: var(--s-2) var(--s-4); font-size: var(--fz-sm); }
.ds-btn--block { width: 100%; }

/* L1 主要行動 — 全站最多 1-2 處同時出現（LINE 諮詢、立即申請） */
.ds-btn--primary {
    background: var(--c-brand-primary);
    color: var(--c-text-on-brand);
    box-shadow: var(--shadow-cta);
}
.ds-btn--primary:hover {
    background: var(--c-brand-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 12px 30px rgba(255, 107, 53, .42);
}

/* L2 次要行動 — 看更多、查看利率 */
.ds-btn--secondary {
    background: var(--c-text-on-brand);
    color: var(--c-brand-secondary);
    border-color: var(--c-border-default);
}
.ds-btn--secondary:hover {
    background: var(--c-bg-soft);
    border-color: var(--c-brand-secondary);
}

/* L3 文字按鈕 — 取消、返回、次要連結 */
.ds-btn--ghost {
    background: transparent;
    color: var(--c-brand-secondary);
}
.ds-btn--ghost:hover {
    background: var(--c-brand-primary-soft);
    color: var(--c-brand-primary);
}

/* 信任 CTA — 試算、預約諮詢、線上申請 */
.ds-btn--trust {
    background: var(--c-trust);
    color: var(--c-text-on-brand);
    box-shadow: var(--shadow-trust);
}
.ds-btn--trust:hover {
    background: #1530A0;
    transform: translateY(-1px);
}

/* LINE 專屬色 */
.ds-btn--line {
    background: #06C755;
    color: var(--c-text-on-brand);
}
.ds-btn--line:hover {
    background: #05B04C;
    transform: translateY(-1px);
}

/* 電話 CTA */
.ds-btn--phone {
    background: var(--c-success);
    color: var(--c-text-on-brand);
}
.ds-btn--phone:hover { background: #0E9E70; }

/* ============================================================
 * Mobile 底部固定 CTA bar
 * ============================================================ */
.ds-mobile-cta-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-sticky);
    background: rgba(255, 255, 255, .98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--c-border-subtle);
    padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 20px rgba(0, 0, 0, .08);
}

@media (max-width: 768px) {
    .ds-mobile-cta-bar { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--s-2); align-items: center; }
    body { padding-bottom: 80px; }   /* 避免 footer 被遮擋 */
}

.ds-mobile-cta-bar .ds-btn {
    padding: var(--s-3) var(--s-2);
    font-size: var(--fz-sm);
    border-radius: var(--r-md);
}

.ds-mobile-cta-bar__menu {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-md);
    background: var(--c-bg-muted);
    color: var(--c-text-body);
    cursor: pointer;
    border: none;
}

/* ============================================================
 * Trust grid (hero 信任區塊)
 * ============================================================ */
.ds-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-4);
    padding-top: var(--s-6);
    border-top: 1px solid rgba(255, 255, 255, .15);
}

@media (max-width: 640px) {
    .ds-trust-grid { grid-template-columns: repeat(2, 1fr); }
}

.ds-trust-item {
    text-align: center;
}
.ds-trust-item__value {
    font-size: var(--fz-2xl);
    font-weight: var(--fw-bold);
    color: var(--c-brand-primary);
    line-height: 1;
    margin-bottom: var(--s-1);
}
.ds-trust-item__label {
    font-size: var(--fz-xs);
    color: rgba(255, 255, 255, .85);
}

@media (min-width: 768px) {
    .ds-trust-item__value { font-size: var(--fz-3xl); }
    .ds-trust-item__label { font-size: var(--fz-sm); }
}

/* ============================================================
 * Cards
 * ============================================================ */
.ds-card {
    background: var(--c-bg-page);
    border-radius: var(--r-2xl);
    padding: var(--s-6);
    box-shadow: var(--shadow-md);
    transition: all var(--t-base);
}
.ds-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.ds-card--hero {
    background: linear-gradient(135deg, var(--c-brand-primary) 0%, #FF8A5C 100%);
    color: var(--c-text-on-brand);
    border-radius: var(--r-2xl);
    padding: var(--s-8);
}

/* ============================================================
 * Reduced motion
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .ds-btn, .ds-card { transition: none; }
    .ds-btn:hover, .ds-card:hover { transform: none; }
}

/* ============================================================
 * Phase 4-B: A11Y enhancements
 * ============================================================ */

/* Universal focus-visible — visible ring on keyboard nav, hidden on mouse */
*:focus-visible {
    outline: 3px solid var(--c-trust);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* Skip link improvement (was tucked away) */
.sr-only:focus,
a[href="#main-content"]:focus {
    position: fixed !important;
    top: 16px !important;
    left: 16px !important;
    z-index: var(--z-toast);
    padding: 12px 24px;
    background: var(--c-brand-secondary);
    color: var(--c-text-on-brand);
    border-radius: var(--r-pill);
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow-lg);
}

/* Higher-contrast primary button text on light backgrounds
 * (#FF6B35 on white is 3.2:1 — below WCAG AA 4.5:1 for body text,
 *  so apply only when 18px+/bold per Large Text rule) */
.primary-text-on-light-strong {
    color: #C84A1E;    /* Darker orange, 5.2:1 on white ✓ AA */
}

/* Skip nav (top-anchored when focused) */
a[href="#main-content"] {
    transition: top var(--t-quick);
}

/* Increase tap-target size for mobile interactive elements */
@media (max-width: 768px) {
    .ds-btn, button, a[role="button"] {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Reduced motion (also in animations.css but centralized here too) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Selection contrast */
::selection {
    background: var(--c-brand-primary);
    color: var(--c-text-on-brand);
}

/* High contrast outline for input focus */
input:focus,
textarea:focus,
select:focus,
button:focus {
    outline-color: var(--c-trust);
}