/*
 * SPSV29 semantic design tokens
 *
 * Existing themes continue to own the legacy variables (--bg-color,
 * --card-bg-color, --text-color, --subtle-text-color, --border-color and
 * --accent-color).  The application consumes the semantic --ui-* layer below,
 * so changing a theme remaps every shared component without duplicating its
 * layout rules.
 */

:root {
    color-scheme: light;

    /* Default visual direction: calm operational ledger. */
    --bg-color: #edf3f0;
    --card-bg-color: #fbfdfc;
    --text-color: #17211f;
    --subtle-text-color: #5d6d68;
    --border-color: #cbd8d3;
    --accent-color: #087d6b;
    --accent-hover-color: #066555;

    /* Fallbacks for browsers without color-mix(). */
    --ui-canvas: #edf3f0;
    --ui-surface: #fbfdfc;
    --ui-surface-muted: #f1f5f3;
    --ui-surface-raised: #ffffff;
    --ui-text: #17211f;
    --ui-text-muted: #5d6d68;
    --ui-text-faint: #7c8a86;
    --ui-border: #cbd8d3;
    --ui-border-soft: #dfe7e4;
    --ui-action: #087d6b;
    --ui-action-hover: #066555;
    --ui-action-text: #087d6b;
    --ui-on-action: #ffffff;
    --ui-toolbar-bg: #111827;
    --ui-toolbar-bg-hover: #1f2937;
    --ui-toolbar-fg: #f8fafc;
    --ui-toolbar-border: #475569;
    --ui-focus: #0b8f7b;
    --ui-selection: rgba(8, 125, 107, 0.2);
    --ui-overlay: rgba(13, 24, 21, 0.62);

    --ui-success: #087a55;
    --ui-success-solid: #087a55;
    --ui-success-soft: #e3f5ed;
    --ui-warning: #9a5c08;
    --ui-warning-solid: #9a5c08;
    --ui-warning-soft: #fff2d6;
    --ui-danger: #b13d4a;
    --ui-danger-solid: #b13d4a;
    --ui-danger-soft: #fde9eb;
    --ui-info: #176b87;
    --ui-info-soft: #e4f2f7;

    --ui-font-body: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
    --ui-font-label: "Montserrat", "Noto Sans TC", sans-serif;
    --ui-font-tech: "Orbitron", "Montserrat", sans-serif;

    --ui-text-xs: 0.75rem;
    --ui-text-sm: 0.875rem;
    --ui-text-md: 1rem;
    --ui-text-lg: 1.125rem;
    --ui-text-xl: clamp(1.35rem, 1.1rem + 0.8vw, 1.8rem);
    --ui-text-display: clamp(2rem, 1.4rem + 2vw, 3.25rem);

    --ui-space-1: 0.25rem;
    --ui-space-2: 0.5rem;
    --ui-space-3: 0.75rem;
    --ui-space-4: 1rem;
    --ui-space-5: 1.5rem;
    --ui-space-6: 2rem;
    --ui-space-7: 3rem;

    --ui-radius-xs: 0.25rem;
    --ui-radius-sm: 0.45rem;
    --ui-radius-md: 0.7rem;
    --ui-radius-lg: 0.9rem;
    --ui-radius-pill: 999px;

    --ui-control-height: 2.625rem;
    --ui-page-width: 100rem;
    --ui-reading-width: 46rem;
    --ui-gutter: clamp(0.75rem, 0.3rem + 1.5vw, 2rem);

    --ui-shadow-panel: 0 1px 2px rgba(20, 40, 34, 0.05), 0 8px 24px rgba(20, 40, 34, 0.045);
    --ui-shadow-float: 0 12px 32px rgba(13, 30, 25, 0.14);
    --ui-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ui-duration-fast: 140ms;
    --ui-duration: 220ms;
}

body.app-shell {
    --ui-canvas: var(--bg-color, #edf3f0);
    --ui-surface: var(--card-bg-color, #fbfdfc);
    --ui-surface-raised: var(--card-bg-color, #ffffff);
    --ui-text: var(--text-color, #17211f);
    --ui-text-muted: var(--subtle-text-color, #5d6d68);
    --ui-border: var(--border-color, #cbd8d3);
    --ui-action: var(--accent-color, #087d6b);
    --ui-action-hover: var(--accent-hover-color, #066555);
    --ui-action-text: var(--accent-color, #087d6b);
    --ui-toolbar-bg: #111827;
    --ui-toolbar-bg-hover: #1f2937;
    --ui-toolbar-fg: #f8fafc;
    --ui-toolbar-border: #475569;
    --ui-focus: var(--accent-color, #087d6b);

    min-width: 20rem;
    min-height: 100vh;
    margin: 0;
    background-color: var(--ui-canvas) !important;
    background-image: none !important;
    color: var(--ui-text);
    font-family: var(--ui-font-body);
    font-feature-settings: "kern" 1, "tnum" 1;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

@supports (color: color-mix(in srgb, white, black)) {
    body.app-shell {
        --ui-surface-muted: color-mix(in srgb, var(--ui-surface) 91%, var(--ui-text) 9%);
        --ui-border-soft: color-mix(in srgb, var(--ui-border) 66%, transparent);
        --ui-text-faint: color-mix(in srgb, var(--ui-text-muted) 78%, transparent);
        --ui-selection: color-mix(in srgb, var(--ui-action) 22%, transparent);
        --ui-toolbar-bg: color-mix(in srgb, #111827 88%, var(--ui-action) 12%);
        --ui-toolbar-bg-hover: color-mix(in srgb, #111827 74%, var(--ui-action) 26%);
        --ui-toolbar-border: color-mix(in srgb, #475569 70%, var(--ui-action) 30%);
    }
}

body.app-shell[data-theme-tone="dark"] {
    color-scheme: dark;
    --ui-on-action: #ffffff;
    --ui-overlay: rgba(2, 8, 7, 0.78);
    --ui-success: #56d6a3;
    --ui-success-soft: rgba(39, 155, 108, 0.16);
    --ui-warning: #f2bd64;
    --ui-warning-soft: rgba(185, 116, 24, 0.18);
    --ui-danger: #ff8e99;
    --ui-danger-soft: rgba(190, 55, 70, 0.2);
    --ui-info: #7fcce6;
    --ui-info-soft: rgba(39, 131, 162, 0.2);
    --ui-shadow-panel: 0 1px 2px rgba(0, 0, 0, 0.24), 0 10px 28px rgba(0, 0, 0, 0.16);
    --ui-shadow-float: 0 16px 40px rgba(0, 0, 0, 0.34);
}

body.app-shell::before {
    content: "";
    position: fixed;
    inset: 0 0 auto;
    z-index: 10050;
    height: 3px;
    pointer-events: none;
    background: var(--ui-action);
    box-shadow: none;
}

body.app-shell::after {
    content: none !important;
}

body.app-shell ::selection {
    background: var(--ui-selection);
    color: var(--ui-text);
}

body.app-shell :where(h1, h2, h3, h4, p) {
    text-wrap: pretty;
}

body.app-shell :where(h1, h2, h3, h4) {
    color: var(--ui-text);
    font-family: var(--ui-font-body);
    letter-spacing: -0.018em;
}

body.app-shell h1 {
    font-size: var(--ui-text-xl);
    font-weight: 700;
    line-height: 1.25;
}

body.app-shell h2 {
    font-weight: 700;
    line-height: 1.3;
}

body.app-shell :where(.text-gray-900, .text-gray-800, .text-gray-700) {
    color: var(--ui-text) !important;
}

body.app-shell :where(.text-gray-600, .text-gray-500, .text-gray-400) {
    color: var(--ui-text-muted) !important;
}

body.app-shell :where(.border-gray-100, .border-gray-200, .border-gray-300, .divide-gray-100, .divide-gray-200) {
    border-color: var(--ui-border) !important;
}

body.app-shell :where(.bg-gray-50, .bg-gray-100) {
    background-color: var(--ui-surface-muted) !important;
}

body.app-shell :where(.bg-white) {
    background-color: var(--ui-surface) !important;
}

body.app-shell a {
    text-underline-offset: 0.18em;
}

body.app-shell :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--ui-focus) !important;
    outline-offset: 2px;
    box-shadow: none;
}

body.app-shell :where(button, input, select, textarea) {
    font: inherit;
}

body.app-shell :where(button, [role="button"], a) {
    -webkit-tap-highlight-color: transparent;
}

body.app-shell :where(button, [role="button"]):disabled,
body.app-shell :where(input, select, textarea):disabled {
    cursor: not-allowed;
    filter: saturate(0.55);
    opacity: 0.58;
}

body.app-shell * {
    scrollbar-color: var(--ui-border) transparent;
    scrollbar-width: thin;
}

body.app-shell *::-webkit-scrollbar {
    width: 0.65rem;
    height: 0.65rem;
}

body.app-shell *::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-border);
    background-clip: padding-box;
}

.skip-link {
    position: fixed;
    inset: 0.75rem auto auto 0.75rem;
    z-index: 11000;
    translate: 0 -200%;
    border-radius: var(--ui-radius-sm);
    padding: 0.65rem 0.9rem;
    background: var(--ui-action);
    color: var(--ui-on-action);
    font-weight: 700;
    transition: translate var(--ui-duration-fast) ease-out;
}

.skip-link:focus {
    translate: 0;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --ui-duration-fast: 1ms;
        --ui-duration: 1ms;
    }

    body.app-shell *,
    body.app-shell *::before,
    body.app-shell *::after {
        scroll-behavior: auto !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }
}

@media (forced-colors: active) {
    body.app-shell::before {
        background: Highlight;
    }

    body.app-shell :where(a, button, input, select, textarea):focus-visible {
        outline-color: Highlight !important;
    }
}

@media print {
    body.app-shell {
        --ui-canvas: #ffffff !important;
        --ui-surface: #ffffff !important;
        --ui-surface-muted: #ffffff !important;
        --ui-surface-raised: #ffffff !important;
        --ui-text: #000000 !important;
        --ui-text-muted: #222222 !important;
        --ui-text-faint: #333333 !important;
        --ui-border: #777777 !important;
        --ui-border-soft: #aaaaaa !important;
        --ui-action: #000000 !important;
        --ui-action-hover: #000000 !important;
        --ui-on-action: #ffffff !important;

        padding: 0 !important;
        background: #ffffff !important;
        color: #000000 !important;
    }

    body.app-shell::before,
    .skip-link {
        display: none !important;
    }

    body.app-shell .view {
        animation: none !important;
    }
}