/**
 * CSS Variables - 공용 디자인 토큰
 *
 * 모든 페이지(SPA, HEEx)에서 공통으로 사용하는 CSS 변수를 정의합니다.
 * 이 파일은 다른 모든 CSS보다 먼저 로드되어야 합니다.
 *
 * 참조하는 파일: styles.css, app.css, archive.css 등
 * 각 파일에서 페이지별 오버라이드가 필요한 경우 해당 파일의 :root에서 재정의합니다.
 */

:root {
    /* ── Background ── */
    --bg: #ffffff;

    /* ── Surface (glassmorphism) ── */
    --surface: #fefefef0;
    --surface--border: #ffffff42;
    --surface--blur: 32px;
    --surface-2: #f0f0f0cd;
    --surface-2--border: #efefef42;
    --surface-2--blur: 5px;

    /* component (upper) */
    --surface-component: #efefeff0;
    --surface-component--border: #ffffff2d;
    --surface-component--blur: 5px;
    --surface-card: #fff;
    /* component (down) */
    --surface-component-2: #191f280f;

    /* component (down + backdrop) */
    --surface-component-3: #f0f0f0e0;
    --surface-component-3--border: #171c2305;
    --surface-component-3--blur: 5px;

    /* ── Typography ── */
    --text: rgba(15, 23, 42, 0.78);
    --text-content: #111827;
    --muted: #6b7684;

    /* ── Colors ── */
    --accent: #3182f6;
    --primary: #2563eb;
    --danger: #f04452;
    --warning: #ff8d0a;
    --warning-bg-1: rgba(251, 191, 36, 0.1);
    --warning-bg-2: hsla(32, 100%, 52%, 0.381);
    --ok: #23c483;
    --accent-hover: #601bf4;

    /* ── Status Colors (상태별 색상) ──
     * 상태       | color (전경)   | bg (배경1-파스텔) | bg2 (배경2-투명)
     * ----------|----------------|------------------|------------------
     * todo      | #9ca3af        | #f3f4f6          | rgba(156,163,175,0.25)
     * planning  | #22d3ee        | #ecfeff          | rgba(34,211,238,0.25)
     * planned   | #06b6d4        | #cffafe          | rgba(6,182,212,0.25)
     * in_progress| #e84393       | #fce7f3          | rgba(232,67,147,0.25)
     * in_review | #f97316        | #fff7ed          | rgba(249,115,22,0.25)
     * done      | #22c55e        | #dcfce7          | rgba(34,197,94,0.25)
     * cancelled | #ef4444        | #fef2f2          | rgba(239,68,68,0.25)
     */
    --status-todo: #9ca3af;
    --status-todo-bg: #f3f4f6;
    --status-todo-bg2: rgba(156, 163, 175, 0.25);
    --status-planning: #22d3ee;
    --status-planning-bg: #ecfeff;
    --status-planning-bg2: rgba(34, 211, 238, 0.25);
    --status-planned: #06b6d4;
    --status-planned-bg: #cffafe;
    --status-planned-bg2: rgba(6, 182, 212, 0.25);
    --status-in-progress: #e84393;
    --status-in-progress-bg: #fce7f3;
    --status-in-progress-bg2: rgba(232, 67, 147, 0.25);
    --status-in-review: #f97316;
    --status-in-review-bg: #fff7ed;
    --status-in-review-bg2: rgba(249, 115, 22, 0.25);
    --status-done: #22c55e;
    --status-done-bg: #dcfce7;
    --status-done-bg2: rgba(34, 197, 94, 0.25);
    --status-cancelled: #ef4444;
    --status-cancelled-bg: #fef2f2;
    --status-cancelled-bg2: rgba(239, 68, 68, 0.25);

    /* ── Border / Shadow ── */
    --line: rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow: 0 10px 26px rgba(0, 0, 0, 0.1);

    /* ── Layout ── */
    --radius: 16px;
    --radius-sm: 14px;
    --gap: 12px;
    --control-height: 52px;
    --lane-width: 360px;
    --plan-route-gap: 4px;

    /* ── In-progress animation ── */
    --inprogress-border-width: 4px;
    --inprogress-sheen-speed: 20s;
    --inprogress-sheen-direction: normal;
    --inprogress-sheen-travel: -400%;
    --inprogress-sheen-animation: inprogress-sheen;
    --inprogress-sheen-gradient: linear-gradient(
        -105deg,
        #e84393,
        #f472b6,
        #ec4899,
        #f97316,
        #fdba74,
        #fb923c,
        #fbbf24,
        #f9a8d4,
        #db2777,
        #fed7aa,
        #e84393,
        #fb923c,
        #be185d,
        #f97316
    );
    --inprogress-sheen-size: 900% 100%;
    --inprogress-glow-animation: inprogress-glow-sheen;
    --inprogress-glow-speed: 30s;
    --inprogress-glow-blur: 50px;
    --inprogress-glow-opacity: 0.75;
    --inprogress-glow-spread: 4px;
    --inprogress-glow-gradient: var(--inprogress-sheen-gradient);
    /* --msg-mention-task-color:#f426ff;
    --msg-mention-agent-color:#000; */
    --agent-gradient: linear-gradient(
        135deg,
        #e7ddc9 0%,
        #ffcdea 20%,
        #dfd9ff 100%
    );
}

@property --inprogress-conic-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@property --inreview-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

/* ═══════════════════════════════════════════════════
   Performance Settings (Reduce Motion / Blur)
   ═══════════════════════════════════════════════════ */

/* Reduce Motion: Disable animations and transitions */
:root[data-reduce-motion="true"],
:root[data-reduce-motion="true"] * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
}

:root[data-reduce-motion="true"] .pdb-bg__gradient,
:root[data-reduce-motion="true"] .gradient-bg__gradient,
:root[data-reduce-motion="true"] .dashboard__bg-gradient {
    animation: none !important;
    background-position: 0% 50% !important;
}

:root[data-reduce-motion="true"] .card--in-progress::before,
:root[data-reduce-motion="true"] .card--in-progress::after,
:root[data-reduce-motion="true"] .gradient-border-spin,
:root[data-reduce-motion="true"] .card--in-review::before,
:root[data-reduce-motion="true"] .card--in-review::after {
    animation: none !important;
}

:root[data-reduce-motion="true"] .pdb-floating-agent,
:root[data-reduce-motion="true"] .pdb-anim__idle {
    animation: none !important;
    transition: none !important;
}

/* Reduce Blur: Disable backdrop-filter effects */
:root[data-reduce-blur="true"] .glass-page,
:root[data-reduce-blur="true"] .dialog__panel,
:root[data-reduce-blur="true"] .surface,
:root[data-reduce-blur="true"] .dropdown,
:root[data-reduce-blur="true"] .popover,
:root[data-reduce-blur="true"] [class*="glass"],
:root[data-reduce-blur="true"] [class*="backdrop"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

:root[data-reduce-blur="true"] .pdb-bg__gradient,
:root[data-reduce-blur="true"] .gradient-bg__gradient,
:root[data-reduce-blur="true"] .card--in-progress::after,
:root[data-reduce-blur="true"] .card--in-review::after {
    filter: none !important;
}

/* Also respect system prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    :root:not([data-reduce-motion="false"]),
    :root:not([data-reduce-motion="false"]) * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    :root:not([data-reduce-motion="false"]) .pdb-bg__gradient,
    :root:not([data-reduce-motion="false"]) .gradient-bg__gradient,
    :root:not([data-reduce-motion="false"]) .dashboard__bg-gradient {
        animation: none !important;
    }
}

/* ═══════════════════════════════════════════════════
   Fine-grained Performance Settings
   ═══════════════════════════════════════════════════ */

/* 카드 상태 그라데이션 비활성화 */
:root[data-gradient-card="false"] .card--in-progress::before,
:root[data-gradient-card="false"] .card--in-progress::after,
:root[data-gradient-card="false"] .card--in-review::before,
:root[data-gradient-card="false"] .card--in-review::after,
:root[data-gradient-card="false"] .card--planning-pending::before,
:root[data-gradient-card="false"] .card--planning-pending::after {
    animation: none !important;
    background: currentColor !important;
    opacity: 0.5 !important;
}

:root[data-gradient-card="false"] .card--in-progress {
    border: 2px solid var(--status-in-progress) !important;
}

:root[data-gradient-card="false"] .card--in-review {
    border: 2px solid var(--status-in-review) !important;
}

:root[data-gradient-card="false"] .card--planning-pending {
    border: 2px solid var(--status-planning) !important;
}

/* 배경 그라데이션 비활성화 */
:root[data-gradient-bg="false"] .pdb-bg__gradient,
:root[data-gradient-bg="false"] .gradient-bg__gradient,
:root[data-gradient-bg="false"] .dashboard__bg-gradient {
    animation: none !important;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
}

/* 글로우 효과 비활성화 */
:root[data-glow-effect="false"] .card--in-progress::after,
:root[data-glow-effect="false"] .card--in-review::after,
:root[data-glow-effect="false"] .card--planning-pending::after {
    filter: none !important;
    opacity: 0 !important;
}

/* 글래스 효과 비활성화 */
:root[data-glass-effect="false"] .glass-page,
:root[data-glass-effect="false"] .dialog__panel,
:root[data-glass-effect="false"] .surface,
:root[data-glass-effect="false"] .dropdown,
:root[data-glass-effect="false"] .popover,
:root[data-glass-effect="false"] [class*="glass"],
:root[data-glass-effect="false"] [class*="backdrop"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ═══════════════════════════════════════════════════
   Performance Details UI Styles
   ═══════════════════════════════════════════════════ */

.perf-details {
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.03);
    padding: 0;
}

.perf-details[open] {
    padding-bottom: 4px;
}

.perf-details__summary {
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(15, 23, 42, 0.6);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.perf-details__summary::-webkit-details-marker {
    display: none;
}

.perf-details__summary::before {
    content: "▶";
    font-size: 10px;
    transition: transform 0.15s ease;
}

.perf-details[open] .perf-details__summary::before {
    transform: rotate(90deg);
}