/*
 * YC Design Tokens
 * 來源：
 *   1) src/assets/app.css 內既有的 .yc-color-*、.yc-title-*、.yc-*-spacing 等 utility class
 *      （已在 /RRR 規範展示頁實際使用，數值以此為準）
 *   2) css規範/yc-css-definition.json（Figma 匯出）經 analyze.js 解析出的補充樣式，
 *      標示於「補充樣式」區塊，尚未在程式碼中被實際引用，採用前請再次確認。
 * 用途：跨專案共用的 CSS 變數檔，直接 @import 或複製到目標專案即可使用。
 */

:root {
  /* ---------- 字型家族 ---------- */
  --yc-font-primary: 'Source Sans Pro', sans-serif;   /* 內文、標題主字型 */
  --yc-font-ui: 'Inter', sans-serif;                   /* 數字、圖表、標註類文字 */
  --yc-font-nav: 'Fustat', sans-serif;                 /* Navbar 品牌文字 */
  --yc-font-icon: 'Font Awesome 5 Free', 'Font Awesome 6 Free'; /* Icon 一律使用 Font Awesome 5.15.4 */

  /* ---------- 色階（對應 app.css .yc-color-* / .yc-border-color-* / .btn-*） ---------- */
  --yc-blue-100: #d2ebff;
  --yc-blue-400: #1d8ddf;
  --yc-blue-500: #0170c2;   /* primary */
  --yc-blue-600: #025692;   /* primary hover */

  --yc-yellow-500: #fe9900; /* warning */
  --yc-yellow-600: #d68203; /* warning hover */

  --yc-green-500: #37ad52;  /* success */
  --yc-green-600: #2c8b42;  /* success hover */

  --yc-red-500: #ec0000;    /* danger */
  --yc-red-600: #ca0303;    /* danger hover */

  --yc-gray-100: #f4f6f9;
  --yc-gray-200: #d3d3d3;
  --yc-gray-300: #848484;
  --yc-gray-500: #6c757d;   /* secondary */

  --yc-color-white: #ffffff;
  --yc-color-black: #000000;

  /* ---------- 語意色（對應 Bootstrap 按鈕語意） ---------- */
  --yc-color-primary: var(--yc-blue-500);
  --yc-color-primary-hover: var(--yc-blue-600);
  --yc-color-success: var(--yc-green-500);
  --yc-color-success-hover: var(--yc-green-600);
  --yc-color-danger: var(--yc-red-500);
  --yc-color-danger-hover: var(--yc-red-600);
  --yc-color-warning: var(--yc-yellow-500);
  --yc-color-warning-hover: var(--yc-yellow-600);
  --yc-color-secondary: var(--yc-gray-500);

  --yc-color-dialog-title: #0071c1;  /* .yc-dialog-h3-bold 標題文字/底線色 */
  --yc-color-border: #dee2e6;        /* table-container / multiselect 邊框 */
  --yc-color-table-stripe: #f7f7f7;  /* 表格偶數列 */
  --yc-color-table-hover: #f0f0f0;   /* 表格 hover */

  /* ---------- 字級（對應 app.css .yc-title-h*） ---------- */
  --yc-title-h1-size: 28px;
  --yc-title-h1-bold-weight: 600;
  --yc-title-h2-size: 24px;
  --yc-title-h2-bold-weight: 600;
  --yc-title-h3-size: 20px;
  --yc-title-h3-bold-weight: 600;
  --yc-title-h6-size: 12px;
  --yc-title-h6-bold-weight: 600;

  /* ---------- 間距（對應 app.css .yc-*-spacing） ---------- */
  --yc-content-padding-top: 1.5rem;
  --yc-content-padding-bottom: 3rem;
  --yc-main-title-spacing: 3rem;
  --yc-component-sm-spacing: 0.75rem;
  --yc-component-spacing: 2rem;
  --yc-component-lg-spacing: 2.5rem;

  /* ---------- 圓角（對應 app.css .modal-container / .el-card） ---------- */
  --yc-radius-card: 8px;
  --yc-radius-modal: 10px;

  /* ---------- 陰影（對應 app.css multiselect / table scrollbar） ---------- */
  --yc-shadow-inset-input: inset 0px 1px 2px rgba(0, 0, 0, 0.075);
  --yc-shadow-scrollbar-thumb: rgba(0, 0, 0, 0.2);

  /* =====================================================================
   * 以下為 Figma 補充樣式（analysis_output.json 統計得出），
   * 目前尚未在程式碼中被實際引用，僅供設計對照，採用前請再次確認。
   * ===================================================================== */
  --yc-text-body-size: 12px;         /* 最常見內文字級（Figma 統計 92 次） */
  --yc-text-body-line-height: 15.08px;
  --yc-text-caption-size: 10px;      /* 按鈕文字（確定/取消）等小型文字 */
  --yc-text-caption-line-height: 12.57px;

  --yc-color-text-secondary: #606266; /* 日期等次要文字 */
  --yc-color-text-tertiary: #828282;  /* Navbar 使用者資訊 */
  --yc-color-text-muted: #aeb1b8;
  --yc-color-text-note: #b3b3b3;      /* 「備註」標籤 */
  --yc-color-text-alert: #545454;     /* Sweet Alert 標題/內文 */
  --yc-color-bg-light: #f5f6fa;

  --yc-radius-sm: 2px;
  --yc-radius-md: 4px;
  --yc-radius-lg: 6px;
  --yc-radius-circle: 100px;          /* 頭像等圓形元素 */

  --yc-border-width-thin: 0.5px;
  --yc-border-width-base: 1px;

  --yc-shadow-navbar: 0 2px 2px 0.5px rgba(0, 0, 0, 0.25);
  --yc-shadow-sidebar: 10px 0 24.2px 3px rgba(0, 0, 0, 0.1);
  --yc-shadow-popup: 0 0 4px rgba(0, 0, 0, 0.25);
}