/* ═══ Linear-Informed Refinement Layer ═══
 * Loaded AFTER dashboard.css + design-tokens.css.
 * Adopts Linear's *behavioral* discipline (motion, density, focus ring,
 * hairline surfaces) while preserving Toomics' existing brand identity
 * (Pretendard typography, blue primary #2563EB, Korean-first spacing).
 *
 * Brand colors and typography intentionally UNCHANGED.
 * This file adds missing motion vocabulary and refines surface treatment.
 *
 * See reports/DESIGN.md §Colors / §Typography for canonical tokens.
 * This file covers §Motion / §Surfaces which the canonical doc does not.
 */

:root {
    /* ── Motion tokens (new — Linear Method § "design for purpose") ── */
    --duration-instant: 80ms;     /* Toggle flip, checkbox, minor state */
    --duration-fast:    120ms;    /* Hover, focus, tooltip appearance */
    --duration-normal:  200ms;    /* Dialog open, drawer slide, expand */
    --duration-slow:    320ms;    /* Page-level transitions, reveals */

    --ease-standard:    cubic-bezier(0.4, 0, 0.2, 1);     /* Material-like */
    --ease-emphasized:  cubic-bezier(0.2, 0, 0, 1);       /* Linear-like, quick in */
    --ease-out-expo:    cubic-bezier(0.19, 1, 0.22, 1);   /* Overshoot-feel */

    /* ── Hairline surfaces (Linear's "wireframes in moonlight") ── */
    --border-hairline:        rgba(15, 23, 42, 0.06);   /* ultra-subtle */
    --border-hairline-strong: rgba(15, 23, 42, 0.10);   /* for primary cards */

    /* ── Subtle interactive states (Linear's restrained hover) ── */
    --color-hover-subtle:     rgba(37, 99, 235, 0.05);   /* primary blue at 5% */
    --color-active-subtle:    rgba(37, 99, 235, 0.10);

    /* ── Density tokens (Linear-tight, Pretendard-safe) ── */
    --row-height-dense:  38px;    /* Table rows, dense lists (Pretendard-tuned; Linear's 36 too tight for Korean) */
    --row-height-normal: 44px;    /* Default forms, buttons */
    --row-height-roomy:  52px;    /* Header, hero rows */

    /* ── Focus ring (layered — inner white gap + outer indigo ring) ──
       Indigo (Linear's signature #5E6AD2) — intentionally distinct from the
       Toomics primary blue so users recognize it as a system focus signal,
       not "the same button at a different saturation". */
    --ring-offset-color: #FFFFFF;
    --ring-width:        2px;
    --ring-color:        rgba(94, 106, 210, 0.5);   /* Linear indigo #5E6AD2 at 50% */
}

/* ── Motion applied: universal micro-transitions on interactive affordances ── */
button,
.btn,
a,
[role="button"],
[data-interactive],
.toggle,
.filter-chip,
select,
input,
textarea {
    transition:
        background-color var(--duration-fast) var(--ease-standard),
        border-color     var(--duration-fast) var(--ease-standard),
        color            var(--duration-fast) var(--ease-standard),
        box-shadow       var(--duration-fast) var(--ease-standard),
        transform        var(--duration-fast) var(--ease-emphasized);
}

/* ── Focus: Linear-style layered ring (white gap inside, brand ring outside) ── */
:focus-visible,
.demo-focus {
    outline: var(--ring-width) solid var(--ring-color);
    outline-offset: 2px;
    box-shadow: 0 0 0 1px var(--ring-offset-color);
}

/* ── Card surface refinement (hairline border, crisper shadow) ── */
.card,
.panel,
.metric-card,
.kpi-card,
.filter-bar,
.filters,
.ticket-table-wrap,
[data-card] {
    border: 1px solid var(--border-hairline);
    box-shadow:
        0 0 0 1px var(--border-hairline),
        0 1px 2px rgba(15, 23, 42, 0.03);
}
.kpi-card:hover {
    box-shadow:
        0 0 0 1px var(--border-hairline-strong),
        0 4px 12px rgba(15, 23, 42, 0.05);
}

/* ── Table density — Linear's "data is the design" ── */
table tbody tr {
    height: var(--row-height-dense);
}
table tbody tr:hover,
table tbody tr.demo-hover {
    background-color: var(--color-hover-subtle);
}

/* ── Status pill refinement — less saturated, Linear-calm ── */
.status-pill,
.badge,
[data-status] {
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--letter-spacing-wide, 0.04em);
}

/* ── Reduced motion respect (Linear Method § "tool works for you") ── */
@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;
    }
}