/* ══════════════════════════════════════════════════════════
   tokens.css — AI 投資紀律教練 設計系統（Design Tokens）v3
   色彩方向 A′：亮藍＋琥珀（保留現有品牌感，Day 25E.1）
   ──────────────────────────────────────────────────────────
   🧒 小孩版：這是「顏料盒」。上半部是一罐一罐的顏料（基礎色），
   下半部是貼在罐子上的用途標籤（語意色）。頁面 CSS 只准看
   「用途標籤」拿顏料，以後要換顏色或做深色模式，只改這個檔案。
   規則：
   1. 頁面 CSS 只使用「語意層」（--color-*、--status-*、--score-*、
      --price-*、--space-*、--radius-*、--shadow-*、--text-* …），
      不直接使用「基礎層」（--blue-600 這類色階）。
   2. 本檔不寫任何元素樣式，只定義變數。
   3. 斷點無法用變數寫進 @media，統一照下列數值使用：
      手機 < 768px｜平板 768–1023px｜桌機 ≥ 1024px
   ══════════════════════════════════════════════════════════ */

:root {
  /* ───────────── 基礎層：色階（頁面 CSS 不直接使用） ───────────── */

  /* 亮藍（品牌主色，沿用現有） */
  --blue-50:  #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;

  /* 冷灰（中性色：文字、邊框、表面） */
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-450: #7e8da2; /* 自訂：輸入框邊框專用，對比 ≥ 3:1（無障礙的元件邊界標準） */
  --slate-500: #64748b;
  --slate-550: #5b6b80; /* 自訂：輔助小字專用，在所有淺色背景上對比都 ≥ 4.9:1 */
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-900: #0f172a;

  /* 琥珀（收藏星號、自評星等、警告、分數中） */
  --amber-50:  #fffbeb;
  --amber-100: #fef3c7;
  --amber-200: #fde68a;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --amber-800: #92400e;

  /* 麥穗黃（自訂：只用於「已封存」，比警告的琥珀暗一點、偏土黃，兩者分得開） */
  --wheat-100: #faf3d9;
  --wheat-150: #f5eac4;
  --wheat-200: #e8d48c;
  --wheat-500: #c49a2a;
  --wheat-800: #6b4f10;

  /* 綠（成功、分數高、已完成） */
  --emerald-50:  #ecfdf5;
  --emerald-100: #d1fae5;
  --emerald-200: #a7f3d0;
  --emerald-600: #059669;
  --emerald-700: #047857;

  /* 紅（錯誤、危險操作、分數低） */
  --red-50:  #fef2f2;
  --red-100: #fee2e2;
  --red-200: #fecaca;
  --red-600: #dc2626;
  --red-700: #b91c1c;

  /* 台股漲跌專用 */
  --green-700: #15803d;

  --white: #ffffff;

  /* ───────────── 語意層：頁面 CSS 只用這一層 ───────────── */

  /* 背景與表面 */
  --color-bg:              #f4f8fb; /* 漸層載入前的底色 */
  /* 背景「清晨天空」（Richard 2026-10-05 選定方案 B）：
     左上天藍＋右上淡水藍＋下方淡蜜桃三個光暈，疊在左上→右下的對角漸層上。
     必須畫在「固定背景層」（body::before，position: fixed），
     光暈才會一直待在螢幕的角落與底部，不會隨著長頁面被拉長。 */
  --color-bg-gradient:     radial-gradient(circle at 8% 12%, rgba(147, 197, 253, 0.30), transparent 34%),
                           radial-gradient(circle at 92% 10%, rgba(165, 243, 252, 0.26), transparent 32%),
                           radial-gradient(circle at 50% 92%, rgba(254, 215, 170, 0.24), transparent 45%),
                           linear-gradient(135deg, #eaf6ff 0%, #f2fafc 45%, #fbf8f4 100%);
  --color-surface:         var(--white);    /* 輸入框、彈窗、下拉選單 */
  --color-surface-card:    rgba(255, 255, 255, 0.88); /* 卡片、編輯器：保留原本的透亮感 */
  --color-surface-sunken:  var(--slate-50); /* 卡片中的區塊、唯讀欄位、表單區段底色 */
  --color-surface-muted:   var(--slate-100);/* 小標籤、停用按鈕、圖示按鈕底色 */
  --color-surface-hover:   var(--slate-200);/* 中性按鈕 hover */
  --color-overlay:         rgba(15, 23, 42, 0.45); /* 彈窗遮罩 */

  /* 文字 */
  --color-text-heading:    var(--slate-900);
  --color-text:            var(--slate-900);
  --color-text-secondary:  var(--slate-600);
  --color-text-muted:      var(--slate-550);
  --color-text-disabled:   var(--slate-400); /* 只用於停用狀態（無障礙規範豁免） */
  --color-text-inverse:    var(--white);
  --color-icon-muted:      var(--slate-550); /* 未收藏的 ☆ 等可點擊圖示 */

  /* 邊框 */
  --color-border:          var(--slate-200);
  --color-border-strong:   var(--slate-300); /* 次要按鈕、篩選標籤 */
  --color-border-hover:    var(--slate-400);
  --color-border-input:    var(--slate-450); /* 輸入框、下拉選單、文字框：長輩要一眼看出「這裡可以填」 */
  --color-border-input-hover: var(--slate-500);
  --color-border-focus:    var(--blue-500);

  /* 品牌主色（亮藍） */
  --color-primary:         var(--blue-600);
  --color-primary-hover:   var(--blue-700);
  --color-primary-active:  var(--blue-800);
  --color-primary-text:    var(--blue-700); /* 淺底上的品牌色文字 */
  --color-primary-subtle:  var(--blue-50);
  --color-primary-soft:    var(--blue-100);
  --color-primary-border:  var(--blue-200);
  --color-primary-border-hover: var(--blue-300);
  --color-on-primary:      var(--white);

  /* 點綴色（亮琥珀）：收藏星號、自評星等 */
  --color-accent:          var(--amber-500);
  --color-accent-outline:  var(--amber-600); /* 星號的細外框，讓亮黃在白底上仍看得清楚 */

  /* 狀態：成功／警告／危險／資訊（各附淡色背景與邊框） */
  --color-success:         var(--emerald-600);
  --color-success-text:    var(--emerald-700);
  --color-success-soft:    var(--emerald-50);
  --color-success-soft-hover: var(--emerald-100);
  --color-success-border:  var(--emerald-200);

  --color-warning:         var(--amber-600);
  --color-warning-text:    var(--amber-800);
  --color-warning-soft:    var(--amber-50);
  --color-warning-soft-hover: var(--amber-100);
  --color-warning-border:  var(--amber-200);

  --color-danger:          var(--red-600);
  --color-danger-text:     var(--red-700);
  --color-danger-soft:     var(--red-50);
  --color-danger-soft-hover: var(--red-100);
  --color-danger-border:   var(--red-200);

  --color-info:            var(--blue-600);
  --color-info-text:       var(--blue-700);
  --color-info-soft:       var(--blue-50);
  --color-info-border:     var(--blue-200);

  /* 封存（按鈕與標籤共用；和警告的琥珀分開） */
  --color-archive-text:      var(--wheat-800);
  --color-archive-bg:        var(--wheat-100);
  --color-archive-bg-hover:  var(--wheat-150);
  --color-archive-border:    var(--wheat-200);

  /* 計畫狀態（卡片左側色條＋狀態標籤） */
  --status-draft-strip:      var(--slate-400);
  --status-draft-text:       var(--slate-700);
  --status-draft-bg:         var(--slate-100);
  --status-draft-border:     var(--slate-200);
  --status-active-strip:     var(--blue-600);
  --status-active-text:      var(--blue-700);
  --status-active-bg:        var(--blue-100);
  --status-active-border:    var(--blue-200);
  --status-completed-strip:  var(--emerald-600);
  --status-completed-text:   var(--emerald-700);
  --status-completed-bg:     var(--emerald-100);
  --status-completed-border: var(--emerald-200);
  --status-archived-strip:   var(--wheat-500);
  --status-archived-text:    var(--color-archive-text);
  --status-archived-bg:      var(--color-archive-bg);
  --status-archived-border:  var(--color-archive-border);

  /* 紀律完成度（≥80 高／50–79 中／<50 低，顯示為百分比）：和漲跌色分開定義 */
  --score-high:       var(--emerald-600);
  --score-high-text:  var(--emerald-700);
  --score-mid:        var(--amber-500);  /* 亮琥珀：和紅色明顯分開 */
  --score-mid-text:   var(--amber-800);
  --score-low:        var(--red-600);
  --score-low-text:   var(--red-700);
  --score-track:      var(--slate-200); /* 紀律環的底圈 */

  /* 台股漲跌（紅漲綠跌，和歐美相反） */
  --price-up:   var(--red-600);
  --price-down: var(--green-700);
  --price-flat: var(--slate-550);

  /* ───────────── 字體 ───────────── */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC",
               "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  /* 字級：以 html 的 16px 為 1rem（html 不寫死 px，尊重使用者的瀏覽器字級設定） */
  --text-xs:   0.75rem;   /* 12px：非必要標註，少用 */
  --text-sm:   0.875rem;  /* 14px：輔助文字、標籤 */
  --text-base: 1rem;      /* 16px：表單欄位、次要內文 */
  --text-md:   1.125rem;  /* 18px：內文基準（Richard 2026-10-05 確認） */
  --text-lg:   1.25rem;   /* 20px：卡片標題 */
  --text-xl:   1.5rem;    /* 24px：區段標題 */
  --text-2xl:  1.875rem;  /* 30px：頁面標題 */
  --text-body: var(--text-md);
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600; /* 標題、按鈕 */
  --weight-bold:     700; /* 只用於大數字（紀律完成度） */
  --leading-body:  1.65;
  --leading-tight: 1.3;

  /* ───────────── 間距（4px 為單位） ───────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ───────────── 圓角 ───────────── */
  --radius-sm:   6px;   /* 小標籤 */
  --radius-md:   10px;  /* 按鈕、輸入框 */
  --radius-lg:   14px;  /* 卡片、表單區段 */
  --radius-xl:   20px;  /* 彈窗、編輯器外框 */
  --radius-full: 999px; /* 膠囊、圓形 */

  /* ───────────── 陰影 ───────────── */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 14px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 6px 18px rgba(15, 23, 42, 0.09), 0 2px 4px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.22);
  --shadow-primary: 0 8px 20px rgba(37, 99, 235, 0.25);
  --focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.35);

  /* ───────────── 動態效果 ───────────── */
  --motion-fast: 150ms;
  --motion-base: 250ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ───────────── 版面與觸控 ───────────── */
  --tap-min: 44px;              /* 觸控目標最小尺寸 */
  --content-max: 1040px;        /* 內容區最大寬度 */
  --nav-bottom-height: 64px;    /* 手機底部導覽列（不含安全區域） */
  --nav-rail-width: 72px;       /* 平板左側圖示欄 */
  --nav-sidebar-width: 220px;   /* 桌機左側側邊欄 */

  /* ───────────── 疊放層級 ───────────── */
  --z-bg: -1;                   /* 固定背景層（body::before） */
  --z-dropdown: 20;
  --z-nav: 100;
  --z-sticky-cta: 110;
  --z-modal: 1000;
  --z-toast: 1100;
}

/* 尊重系統「減少動態效果」設定：動畫時間歸零 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
  }
}