@charset "UTF-8";

/*
 * Integration Platform shared visual foundation.
 * Keep selectors deliberately low-specificity so business modules can retain
 * their own identity while sharing the DESIGN.md baseline and accessibility.
 */
:root {
    --ui-primary: #2563eb;
    --ui-primary-hover: #1d4ed8;
    --ui-primary-soft: #eff6ff;
    --ui-on-primary: #ffffff;
    --ui-surface: #ffffff;
    --ui-surface-subtle: #f8fafc;
    --ui-text: #0f172a;
    --ui-text-secondary: #475569;
    --ui-border: #e2e8f0;
    --ui-border-strong: #cbd5e1;
    --ui-success: #15803d;
    --ui-success-soft: #f0fdf4;
    --ui-warning: #a16207;
    --ui-warning-soft: #fefce8;
    --ui-danger: #b91c1c;
    --ui-danger-soft: #fef2f2;
    --ui-focus-ring: rgba(37, 99, 235, 0.34);
    --ui-radius-control: 6px;
    --ui-radius-panel: 10px;
    --ui-radius-large: 14px;
    --ui-space-1: 4px;
    --ui-space-2: 8px;
    --ui-space-3: 16px;
    --ui-space-4: 24px;
    --ui-space-5: 32px;
    --ui-shadow-float: 0 16px 40px rgba(15, 23, 42, 0.14);
    --ui-duration-fast: 160ms;
    --ui-duration-normal: 220ms;
    --ui-layer-dropdown: 20;
    --ui-layer-sticky: 30;
    --ui-layer-overlay: 40;
    --ui-layer-modal: 50;
    color-scheme: light;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
}

:where(*, *::before, *::after) {
    box-sizing: border-box;
}

:where(html) {
    min-width: 320px;
    min-height: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

:where(body) {
    min-width: 320px;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    color: var(--ui-text);
    background: var(--ui-surface-subtle);
    font-family: Inter, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:where(button, input, select, textarea) {
    max-width: 100%;
    color: inherit;
    font: inherit;
}

:where(button, [type="button"], [type="submit"], [type="reset"], select) {
    touch-action: manipulation;
}

:where(button, [type="button"], [type="submit"], [type="reset"], a[href], label[for], select) {
    cursor: pointer;
}

:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    min-height: 36px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-control);
    background-color: var(--ui-surface);
}

:where(textarea) {
    min-height: 88px;
    resize: vertical;
}

:where(button, input, select, textarea, a[href], [tabindex]):focus-visible {
    outline: 3px solid var(--ui-focus-ring);
    outline-offset: 2px;
}

:focus-visible {
    outline: 3px solid var(--ui-focus-ring);
    outline-offset: 2px;
}

:where(button, input, select, textarea):disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

:where(a) {
    color: var(--ui-primary);
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
}

:where(a:hover) {
    color: var(--ui-primary-hover);
}

:where(img, svg, video, canvas) {
    max-width: 100%;
}

:where(img, svg) {
    vertical-align: middle;
}

:where(h1, h2, h3, h4, h5, h6) {
    color: inherit;
    line-height: 1.35;
    text-wrap: balance;
}

:where(p) {
    text-wrap: pretty;
}

:where(table) {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

:where(th) {
    color: var(--ui-text-secondary);
    font-weight: 600;
    text-align: left;
}

:where(hr) {
    height: 1px;
    border: 0;
    background: var(--ui-border);
}

:where(dialog) {
    max-width: min(680px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-large);
    background: var(--ui-surface);
    color: var(--ui-text);
    box-shadow: var(--ui-shadow-float);
}

:where(dialog)::backdrop {
    background: rgba(15, 23, 42, 0.52);
}

::selection {
    background: var(--ui-primary-soft);
    color: var(--ui-text);
}

@media (hover: hover) {
    :where(button, [type="button"], [type="submit"], [type="reset"], a[href]) {
        transition-duration: var(--ui-duration-fast);
        transition-timing-function: ease-out;
    }
}

@media (pointer: coarse) {
    :where(button, [type="button"], [type="submit"], [type="reset"], select) {
        min-height: 44px;
    }
}

@media (max-width: 480px) {
    :where(body) {
        overflow-wrap: anywhere;
    }

    :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    :where(*, *::before, *::after) {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}