﻿/* ==========================================================================
   GEO 前端雛型 Design Tokens — geo-tokens.css
   原生 Design Tokens 核心規範 (包含 9 套官方主題色票、Typography 與間距系統)
   ========================================================================== */

:root {
  /* 1. 預設主題核心色票 (Default Theme - 海軍藍) */
  --geo-primary:           #3973ac; /* 主品牌色：主要按鈕、側邊欄背景 */
  --geo-secondary:         #83b4e6; /* 次要色：頂部 AppBar、進階查詢、檢視按鈕 */
  --geo-tertiary:          #31527b; /* 第三輔助色：查詢按鈕、表格表頭底色 */
  --geo-error:             #e03535; /* 錯誤與危險色：刪除按鈕、未發佈標籤 */
  --geo-info:              #2196F3; /* 資訊狀態色 */
  --geo-success:           #4CAF50; /* 成功狀態色：發佈中標籤、已審核 */
  --geo-warning:           #FB8C00; /* 警示狀態色：審查中標籤 */

  /* 介面載體色票 */
  --geo-background:        #F7F8F8; /* 主頁面底色 */
  --geo-surface:           #FFFFFF; /* 白色卡片載體底色 */
  --geo-nav-active:        #ade8f4; /* 主選單 Active 亮標色 */
  --geo-search-card:       #f2f2f2; /* 查詢區塊/進階查詢底色 */
  --geo-table-striped:     #f1f1f1; /* 表格斑馬紋交替色 */
  --geo-row-warning:       #ffebee; /* 資料列警示底色：逾期、檢核為否 */
  --geo-cell-group:        #f5f5f5; /* 資料表格分類欄（merge）底色 */

  /* 互動狀態色 */
  --geo-primary-hover:     #0353a4;
  --geo-secondary-hover:   #0077b6;
  --geo-tertiary-hover:    #003847;
  --geo-error-hover:       #c62828;

  /* 語意文字色（淡色底上的深色文字，確保對比） */
  --geo-success-text:      #2e7d32;
  --geo-warning-text:      #b45309;
  --geo-info-text:         #1565c0;

  /* 2. 字體族群與階層規範 (Typography Tokens) */
  --geo-font-family:       system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "PingFang TC", "Microsoft JhengHei", "微軟正黑體", sans-serif;
  --geo-font-mono:         Consolas, Monaco, "Courier New", monospace;

  --geo-fs-title:          24px;   /* 頁面大標題 (Page Title / H1) */
  --geo-fs-section:        18px;   /* 區塊飾條大標題 (Section Title / H2) */
  --geo-fs-card:           18px;   /* 卡片群組標題、彈窗標題 (Card Title / H3) */
  --geo-fs-subtitle:       16px;   /* 頁面副標題 / 表單標題 (16px 粗體) */
  --geo-fs-nav:            15px;   /* 側邊欄三層選單一致字級 (統一 15px) */
  --geo-fs-nav-sub:        15px;   /* 側邊欄子選單項目 (統一 15px) */
  --geo-fs-breadcrumb:     16px;   /* 麵包屑導航 (Breadcrumb，純文字無底色) */
  --geo-fs-tab:            18px;   /* 頁籤項目 (Tab，未選 600、目前頁籤 700) */
  --geo-fs-appbar:         25px;   /* 頂列系統名稱 (App Bar Title，700 粗體；600px 以下 17px) */
  --geo-fs-label:          16px;   /* 表單標籤 (Form Label，16px 粗體) */
  --geo-label-stroke:      0.3px;  /* 欄位名稱描邊加粗：進階搜尋、業務彈窗、唯讀明細、分組表單、照片卡片 */
  --geo-fs-body:           16px;   /* 正文、表單欄位輸入、彈窗內容 (16px 正文) */
  --geo-fs-table:          16px;   /* 表格內容 (Table Cell，16px 正文) */
  --geo-fs-caption:        12px;   /* 輔助標籤、微小註解 (Caption / Badge) */

  --geo-text-primary:      rgba(0, 0, 0, 0.87); /* 主文字 (87% 黑) */
  --geo-text-secondary:    rgba(0, 0, 0, 0.60); /* 次要文字 (60% 黑) */
  --geo-text-disabled:     rgba(0, 0, 0, 0.38); /* 停用文字 (38% 黑) */
  --geo-text-white:        #FFFFFF;

  --geo-border:            rgba(0, 0, 0, 0.12); /* 標準細框線 */
  --geo-border-hover:      rgba(0, 0, 0, 0.38);
  --geo-border-focus:      var(--geo-primary);
  --geo-input-border:      rgba(0, 0, 0, 0.38); /* 輸入框、下拉選單、日期、檔案上傳等表單控制項外框 */
  --geo-input-border-hover: rgba(0, 0, 0, 0.87);
  --geo-divider:           rgba(0, 0, 0, 0.2);  /* 分隔線 <geo-divider> */

  /* 3. 4px 間距網格 */
  --geo-space-1:           4px;
  --geo-space-2:           8px;
  --geo-space-3:           12px;
  --geo-space-4:           16px;
  --geo-space-5:           20px;
  --geo-space-6:           24px;
  --geo-space-8:           32px;
  --geo-space-10:          40px;
  --geo-space-12:          48px;

  /* 4. 圓角系統 (標準六級規格) */
  --geo-rounded-0:         0px;    /* 無圓角 (rounded="0") */
  --geo-rounded-xs:        2px;    /* 超微圓角 (rounded="xs") */
  --geo-rounded-sm:        4px;    /* 預設小圓角 (rounded="sm") */
  --geo-rounded-md:        8px;    /* 卡片中圓角 (rounded="md") */
  --geo-rounded-lg:        16px;   /* 大圓角 (rounded="lg") */
  --geo-rounded-xl:        28px;   /* 膠囊/超大圓角 (rounded="xl") */
  --geo-rounded-pill:      9999px; /* 全膠囊圓角 */

  /* 5. 陰影層次 (Elevation System) */
  --geo-elevation-0:       none;
  --geo-elevation-1:       0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12);
  --geo-elevation-3:       0px 3px 3px -2px rgba(0,0,0,0.2), 0px 3px 4px 0px rgba(0,0,0,0.14), 0px 1px 8px 0px rgba(0,0,0,0.12);
  --geo-elevation-2:       0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
  --geo-elevation-4:       0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12);
  --geo-elevation-up:      0px -2px 8px 0px rgba(0,0,0,0.08); /* 固定在畫面底部的動作列上緣陰影 */

  /* 6. 按鈕尺寸等級 (五級規格) */
  --geo-btn-xsmall-h:      20px;   /* x-small 高度 */
  --geo-btn-small-h:       28px;   /* small 高度 (表格專用) */
  --geo-btn-default-h:     36px;   /* default 預設操作按鈕高度 */
  --geo-btn-large-h:       44px;   /* large 高度 */
  --geo-btn-xlarge-h:      52px;   /* x-large 高度 */

  /* 按鈕間距（第二層區塊一律引用，不寫死數值） */
  --geo-btn-gap:           6px;    /* 一般按鈕之間：搜尋列、進階搜尋操作列、彈窗底部、清單工具列、頁面按鈕、表單動作列 */
  --geo-btn-gap-table:     6px;    /* 表格操作欄小按鈕之間 */

  /* 控制項高度與寬度 */
  --geo-radius-base:       4px;    /* 全域容器預設圓角 */
  --geo-input-height:      40px;   /* 標準輸入框與下拉選單高度 */
  --geo-appbar-height:     64px;   /* 頂部 AppBar 高度 */
  --geo-sidebar-width:     285px;  /* 側邊欄展開寬度 */
  --geo-sidebar-rail:      64px;   /* 側邊欄收闔 Rail 寬度 */
  --geo-sidebar-rail-width:64px;   /* 側邊欄收闔 Rail 寬度別名 */
}
