/*
 * 後台外觀微調層 — 疊在 tocas.min.css 之上，只在 dashboard/* 頁面載入。
 * 原則：能用 tocas 既有 class 就用（例如卡片浮起是 .ts-box.is-raised），
 *       這裡只覆寫設計變數／色盤，加少數 tocas 沒提供的手感，不動版面結構。
 *
 * 進度：
 *   step 1 — 圓角、陰影、主色等設計變數；按鈕過渡；輸入框聚焦光暈；捲軸；字體平滑
 *   step 2 — 重新調色：整組深色階改中性炭黑（不帶色調），白字改柔白，拉出層次
 *   之後 — 側邊欄、表格、對話框、頁首、表單密度
 */

/* ── 設計變數 ─────────────────────────────────────────── */
html {
    /* 圓角放大一點，收斂稜角 */
    --ts-border-radius-container: 0.6rem;
    --ts-border-radius-element: 0.55rem;
    --ts-border-radius-secondary: 0.4rem;

    /* 主色改用較清爽的藍，維持藍色語意 */
    --ts-primary-400: #5aa9ff;
    --ts-primary-500: #3b8bf0;
    --ts-primary-600: #2f74d8;
    --ts-primary-700: #245fb8;
    --ts-primary-800: #1c4a91;
    --ts-primary-900: #14356b;

    /* 浮起陰影：近層描邊 + 遠層擴散，比預設柔和 */
    --ts-elevated-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 12px 28px -14px rgba(0, 0, 0, 0.22);
}

html.is-dark {
    --ts-primary-400: #63b0ff;
    --ts-primary-500: #4c97f2;
    --ts-primary-600: #3b83e6;
    --ts-primary-700: #2f6ec9;
    --ts-primary-800: #24568f;
    --ts-primary-900: #1a3f6b;

    --ts-elevated-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 14px 32px -14px rgba(0, 0, 0, 0.55);
}

/* ── 深色中性色盤：重定 tocas 的灰階，中性炭黑、不帶色調 ────
 * tocas 深色模式所有灰階（背景、邊框、文字）都指向 --ts-dark-gray-*，
 * 這裡整組重定為 R=G=B 的純中性灰，避免原本死白 + 我上一版偏藍的問題。
 * 50 最暗（頁底），900 最亮（標題）。
 */
html {
    --ts-dark-gray-50: #1c1c1c;   /* 頁面底色 */
    --ts-dark-gray-75: #222222;   /* 選單 hover */
    --ts-dark-gray-100: #262626;  /* 浮起表面 / modal */
    --ts-dark-gray-200: #2e2e2e;
    --ts-dark-gray-300: #3a3a3a;  /* 邊框 */
    --ts-dark-gray-400: #545454;  /* 次要圖示 / 停用 */
    --ts-dark-gray-500: #9a9a9a;  /* 次要文字 */
    --ts-dark-gray-600: #c8c8c8;
    --ts-dark-gray-700: #d8d8d8;
    --ts-dark-gray-800: #e6e6e6;  /* 主要文字：柔白，不用純白 */
    --ts-dark-gray-900: #f5f5f5;  /* 標題 / 強調 */
}
html.is-dark {
    --ts-page-background-secondary: #171717;
    --ts-page-background-tertiary: #121212;
}

/* ── 字體平滑 ─────────────────────────────────────────── */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
.ts-header,
h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.01em;
}

/* 卡片浮起用 tocas 既有的 .ts-box.is-raised，不在這裡另外寫；
 * 上面已把 --ts-elevated-shadow 調柔，is-raised／下拉／彈窗會一起套用。 */

/* ── 按鈕手感：tocas 按鈕沒有過渡，補一個 ─────────────────── */
.ts-button {
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.06s ease;
}
.ts-button:not(.is-disabled):active {
    transform: translateY(1px);
}

/* ── 輸入框：平滑過渡 + 聚焦光暈 ──────────────────────── */
.ts-input input,
.ts-input textarea,
.ts-select select {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ts-input input:focus,
.ts-input textarea:focus,
.ts-select select:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ts-primary-500) 28%, transparent);
}

/* ── 捲軸：細一點、低調一點（webkit）────────────────────── */
html.is-dark * {
    scrollbar-color: var(--ts-gray-400) transparent;
    scrollbar-width: thin;
}
html.is-dark ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
html.is-dark ::-webkit-scrollbar-track {
    background: transparent;
}
html.is-dark ::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--ts-gray-400) 80%, transparent);
    border: 2px solid transparent;
    background-clip: content-box;
    border-radius: 999px;
}
html.is-dark ::-webkit-scrollbar-thumb:hover {
    background: var(--ts-gray-500);
    background-clip: content-box;
}