/* ============================================
   Public Pages Design Tokens
   暖底 + 雙色策略：Brand Orange (70%) + Charcoal (30%)

   適用範圍：所有對外公開頁面
   - Landing Page (body.landing-page)
   - Docs / Helper / Demo 等 (body.public-page)

   所有變數使用 --pub- 前綴
   目前僅定義變數，不影響任何現有樣式
   ============================================ */

body.public-page,
body.landing-page {

  /* ========== 1. Orange Scale (主角 70%) ========== */
  --pub-o-50:  #FFFBF7;    /* 頁面底色、section 淡底 */
  --pub-o-100: #FFF5F0;    /* 卡片淡底、feature 背景 */
  --pub-o-200: #FEEBC8;    /* badge 背景、node icon 背景 */
  --pub-o-300: #FBD38D;    /* 卡片邊框、accent 裝飾 */
  --pub-o-500: #FF6B35;    /* 品牌主色、CTA、按鈕 */
  --pub-o-700: #E55A2B;    /* hover 深色、強調 */
  --pub-o-900: #C05621;    /* 文字深色、badge 文字 */

  /* ========== 2. Charcoal Scale (配角 30%) ========== */
  --pub-c-50:  #F7FAFC;    /* 用戶訊息底、input 背景 */
  --pub-c-100: #EDF2F7;    /* 分隔線、淡灰底 */
  --pub-c-200: #E2E8F0;    /* 邊框、divider */
  --pub-c-400: #A0AEC0;    /* 次要文字、comment、時間 */
  --pub-c-500: #718096;    /* label、placeholder */
  --pub-c-700: #4A5568;    /* code header、次標題 */
  --pub-c-800: #2D3748;    /* analytics 深底、code 背景 */
  --pub-c-900: #1A202C;    /* 最深背景、chat demo */

  /* ========== 3. Warm Surfaces (暖色底) ========== */
  --pub-w-0:   #FFFFFF;    /* 卡片白底、對話框 */
  --pub-w-50:  #FFFBF7;    /* 頁面底色 (= o-50) */
  --pub-w-100: #FFFAF0;    /* tag container、淡暖底 */

  /* ========== 4. Semantic Colors (功能用) ========== */
  --pub-sem-success:  #48BB78;  /* 綠色確認、pulse、上線狀態 */
  --pub-sem-info:     #4299E1;  /* 藍色資訊、連結 */
  --pub-sem-warning:  #F59E0B;  /* 黃色警告 */
  --pub-sem-error:    #EF4444;  /* 紅色錯誤 */

  /* 語義色彩 — 背景/邊框/文字 */
  --pub-sem-warning-bg:     #FFFBEB;
  --pub-sem-warning-border: #FDE68A;
  --pub-sem-warning-text:   #92400E;
  --pub-sem-error-bg:       #FEF2F2;
  --pub-sem-error-border:   #FECACA;
  --pub-sem-error-text:     #991B1B;

  /* ========== 4b. Indigo Accent (About / Legal 頁面) ========== */
  --pub-indigo:         #6366F1;  /* 主 indigo 色 */
  --pub-indigo-dark:    #4F46E5;  /* hover 深化 */
  --pub-indigo-light:   #C7D2FE;  /* 淺邊框、hover border */
  --pub-indigo-bg:      #EEF2FF;  /* icon 背景、step 背景 */
  --pub-indigo-point:   #A5B4FC;  /* 列表圓點 */
  --pub-indigo-shadow:  rgba(99, 102, 241, 0.06);
  --pub-indigo-shadow-lg: rgba(99, 102, 241, 0.25);
  --pub-indigo-shadow-xl: rgba(99, 102, 241, 0.35);

  /* ========== 4c. Extra Blob Colors ========== */
  --pub-blob-warm:     #F97316;   /* About hero 暖 blob */
  --pub-blob-cool:     #6366F1;   /* About hero 冷 blob */
  --pub-blob-purple:   #A78BFA;   /* Legal hero 紫 blob */
  --pub-blob-blue:     #60A5FA;   /* Legal hero 藍 blob */

  /* ========== 4e. Gradient Mist Colors (漸層過渡) ========== */
  --pub-indigo-mist:   #F5F0FF;   /* About hero 漸層中段 (indigo → warm) */
  --pub-indigo-mist-2: #F5F3FF;   /* About CTA 漸層中段 */
  --pub-violet-mist:   #F8F6FF;   /* Legal hero 漸層起始 (淡紫) */
  --pub-mint-mist:     #F0FAF5;   /* Legal hero 漸層終點 (薄荷) */

  /* ========== 4f. Landing Extended Palette ========== */
  --pub-purple:        #9F7AEA;   /* Landing 裝飾紫 */
  --pub-pink:          #ED64A6;   /* Landing 裝飾粉 */

  /* ========== 4d. Changelog Tag System ========== */
  --pub-tag-launch-bg:     #FDE8E8;
  --pub-tag-launch-text:   #C0392B;
  --pub-tag-launch-border: #E74C3C;
  --pub-tag-new-bg:        #FFF3E0;
  --pub-tag-new-text:      #E67E22;
  --pub-tag-new-border:    var(--pub-o-500);
  --pub-tag-improve-bg:    #E3F2FD;
  --pub-tag-improve-text:  #2980B9;
  --pub-tag-improve-border:#3498DB;
  --pub-tag-fix-bg:        #E8F5E9;
  --pub-tag-fix-text:      #27AE60;
  --pub-tag-fix-border:    #2ECC71;

  /* ========== 5. Section Backgrounds ========== */
  /* 區塊交替使用暖底，營造節奏感 */
  --pub-bg-hero:       var(--pub-w-50);
  --pub-bg-scenarios:  var(--pub-w-0);
  --pub-bg-features:   var(--pub-o-100);
  --pub-bg-howitworks: var(--pub-w-50);
  --pub-bg-benefits:   var(--pub-w-0);
  --pub-bg-pricing:    var(--pub-o-50);
  --pub-bg-analytics:  var(--pub-c-800);
  --pub-bg-faq:        var(--pub-w-50);
  --pub-bg-cta:        var(--pub-o-100);

  /* ========== 6. Component Tokens ========== */

  /* --- Nav --- */
  --pub-nav-bg:            rgba(255, 251, 247, 0.95);
  --pub-nav-bg-scrolled:   rgba(255, 255, 255, 0.95);
  --pub-nav-border:        rgba(255, 107, 53, 0.1);
  --pub-nav-link:          var(--pub-c-700);
  --pub-nav-link-hover:    var(--pub-o-500);

  /* --- CTA / Buttons --- */
  --pub-cta-bg:            var(--pub-o-500);
  --pub-cta-bg-hover:      var(--pub-o-700);
  --pub-cta-text:          var(--pub-w-0);
  --pub-cta-shadow:        rgba(255, 107, 53, 0.2);
  --pub-cta-shadow-hover:  rgba(255, 107, 53, 0.4);

  /* --- Cards (通用) --- */
  --pub-card-bg:           var(--pub-w-0);
  --pub-card-border:       rgba(255, 107, 53, 0.1);
  --pub-card-border-hover: rgba(255, 107, 53, 0.2);
  --pub-card-shadow:       0 1px 3px rgba(0, 0, 0, 0.1);
  --pub-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.15);

  /* --- Scenario Cards (統一橘色策略) --- */
  --pub-scenario-bg:         var(--pub-o-200);
  --pub-scenario-border:     var(--pub-o-300);
  --pub-scenario-badge-bg:   var(--pub-o-200);
  --pub-scenario-badge-text: var(--pub-o-900);
  --pub-scenario-icon:       var(--pub-o-500);
  --pub-scenario-link:       var(--pub-o-900);

  /* --- Tabs --- */
  --pub-tab-bg:            transparent;
  --pub-tab-bg-active:     var(--pub-o-500);
  --pub-tab-text:          var(--pub-c-500);
  --pub-tab-text-active:   var(--pub-w-0);

  /* --- Badges --- */
  --pub-badge-bg:          var(--pub-o-200);
  --pub-badge-text:        var(--pub-o-900);
  --pub-badge-border:      rgba(255, 107, 53, 0.2);

  /* --- Steps / Roadmap --- */
  --pub-step-line:         var(--pub-o-300);
  --pub-step-dot:          var(--pub-o-500);
  --pub-step-dot-inactive: var(--pub-c-200);

  /* --- Access Control (Pricing) --- */
  --pub-price-card-bg:     var(--pub-w-0);
  --pub-price-card-border: rgba(255, 107, 53, 0.2);
  --pub-price-highlight:   var(--pub-o-500);
  --pub-price-badge-bg:    #FEF3C7;
  --pub-price-badge-text:  var(--pub-o-900);

  /* --- Analytics (Dark Section) --- */
  --pub-analytics-bg:           var(--pub-c-800);
  --pub-analytics-text:         var(--pub-w-0);
  --pub-analytics-label:        var(--pub-c-500);
  --pub-analytics-divider:      rgba(74, 85, 104, 0.5);
  --pub-analytics-code-bg:      var(--pub-c-800);
  --pub-analytics-code-header:  var(--pub-c-700);
  --pub-analytics-code-line:    var(--pub-c-700);
  --pub-analytics-code-comment: var(--pub-c-400);
  --pub-analytics-code-string:  #63B3ED;
  --pub-analytics-code-keyword: #B794F4;
  --pub-analytics-code-highlight: #68D391;

  /* --- Hero Blobs --- */
  --pub-blob-primary:      rgba(255, 107, 53, 0.2);
  --pub-blob-secondary:    rgba(251, 211, 141, 0.3);

  /* --- Chat Demo --- */
  --pub-chat-bg:           #1A1A2E;
  --pub-chat-sidebar:      var(--pub-w-0);
  --pub-chat-header:       var(--pub-o-500);
  --pub-chat-msg-user-bg:  var(--pub-c-50);
  --pub-chat-msg-ai-bg:    var(--pub-o-500);
  --pub-chat-msg-ai-text:  var(--pub-w-0);
  --pub-chat-input-bg:     var(--pub-c-50);
  --pub-chat-send-btn:     var(--pub-o-500);
  --pub-chat-send-text:    var(--pub-o-900);
  --pub-chat-time:         var(--pub-c-400);
  --pub-chat-typing-bg:    var(--pub-w-0);
  --pub-chat-typing-text:  var(--pub-c-800);

  /* --- Mockup UI --- */
  --pub-mockup-dot-red:    #FC8181;
  --pub-mockup-dot-yellow: #F6E05E;
  --pub-mockup-dot-green:  #68D391;

  /* --- Decorative --- */
  --pub-scroll-hint-border:   rgba(255, 107, 53, 0.2);
  --pub-scroll-mouse:         rgba(255, 107, 53, 0.7);
  --pub-pulse-success:        rgba(72, 187, 120, 0.7);
  --pub-grid-pattern:         rgba(255, 107, 53, 0.03);
  --pub-grid-overlay:         rgba(255, 255, 255, 0.95);
  --pub-trust-badge-border:   rgba(255, 107, 53, 0.08);
  --pub-trust-badge-shadow:   rgba(255, 107, 53, 0.2);
  --pub-security-badge-border: rgba(255, 107, 53, 0.1);
  --pub-faq-border:           rgba(255, 107, 53, 0.05);

  /* ========== 7. Typography ========== */
  --pub-heading-color:     var(--pub-c-900);
  --pub-body-color:        var(--pub-c-700);
  --pub-muted-color:       var(--pub-c-500);
  --pub-link-color:        var(--pub-o-500);
  --pub-link-hover:        var(--pub-o-700);
}

/* ========== 8. Dark Mode ========== */
[data-theme="dark"] body.public-page,
[data-theme="dark"] body.landing-page {

  /* Orange Scale (保持品牌色，微調亮度) */
  --pub-o-50:  #1C1410;
  --pub-o-100: #2A1D14;
  --pub-o-200: #3D2A18;
  --pub-o-300: #5C3D20;
  --pub-o-500: #FF7A4A;
  --pub-o-700: #FF9B73;
  --pub-o-900: #FFB899;

  /* Charcoal Scale (反轉) */
  --pub-c-50:  #1A202C;
  --pub-c-100: #2D3748;
  --pub-c-200: #4A5568;
  --pub-c-400: #A0AEC0;
  --pub-c-500: #CBD5E0;
  --pub-c-700: #E2E8F0;
  --pub-c-800: #0F1623;
  --pub-c-900: #F7FAFC;

  /* Warm Surfaces → 深暖底 */
  --pub-w-0:   #1A1A2E;
  --pub-w-50:  #151520;
  --pub-w-100: #1E1E30;

  /* Nav */
  --pub-nav-bg:          rgba(21, 21, 32, 0.95);
  --pub-nav-bg-scrolled: rgba(26, 26, 46, 0.95);
  --pub-nav-border:      rgba(255, 122, 74, 0.15);

  /* CTA */
  --pub-cta-shadow:       rgba(255, 122, 74, 0.25);
  --pub-cta-shadow-hover: rgba(255, 122, 74, 0.4);

  /* Cards */
  --pub-card-bg:           #1E1E30;
  --pub-card-border:       rgba(255, 122, 74, 0.15);
  --pub-card-border-hover: rgba(255, 122, 74, 0.25);
  --pub-card-shadow:       0 1px 3px rgba(0, 0, 0, 0.3);
  --pub-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.4);

  /* Analytics (暗色 section 在 dark mode 更深) */
  --pub-analytics-bg:      #0A0E16;
  --pub-analytics-code-bg: #0A0E16;

  /* Chat Demo */
  --pub-chat-bg:       #0A0E16;
  --pub-chat-sidebar:  #1E1E30;

  /* Indigo Accent (dark) */
  --pub-indigo:         #818CF8;
  --pub-indigo-dark:    #6366F1;
  --pub-indigo-light:   #4338CA;
  --pub-indigo-bg:      #1E1B4B;
  --pub-indigo-point:   #6366F1;
  --pub-indigo-shadow:  rgba(129, 140, 248, 0.1);
  --pub-indigo-shadow-lg: rgba(129, 140, 248, 0.3);
  --pub-indigo-shadow-xl: rgba(129, 140, 248, 0.4);

  /* Extra Blobs (dark) */
  --pub-blob-warm:     rgba(249, 115, 22, 0.15);
  --pub-blob-cool:     rgba(99, 102, 241, 0.15);
  --pub-blob-purple:   rgba(167, 139, 250, 0.12);
  --pub-blob-blue:     rgba(96, 165, 250, 0.12);

  /* Gradient Mist (dark) */
  --pub-indigo-mist:   #1E1A2E;
  --pub-indigo-mist-2: #1E1B30;
  --pub-violet-mist:   #1C1828;
  --pub-mint-mist:     #0F1F18;

  /* Landing Extended (dark) */
  --pub-purple:        rgba(159, 122, 234, 0.6);
  --pub-pink:          rgba(237, 100, 166, 0.6);

  /* Semantic (dark) */
  --pub-sem-warning-bg:     #2A2000;
  --pub-sem-warning-border: #854D0E;
  --pub-sem-warning-text:   #FDE68A;
  --pub-sem-error-bg:       #2A0000;
  --pub-sem-error-border:   #991B1B;
  --pub-sem-error-text:     #FECACA;

  /* Changelog Tags (dark) */
  --pub-tag-launch-bg:     #2A1010;
  --pub-tag-launch-text:   #FC8181;
  --pub-tag-launch-border: #E74C3C;
  --pub-tag-new-bg:        #2A1D00;
  --pub-tag-new-text:      #FBD38D;
  --pub-tag-new-border:    var(--pub-o-500);
  --pub-tag-improve-bg:    #0A1929;
  --pub-tag-improve-text:  #90CDF4;
  --pub-tag-improve-border:#3498DB;
  --pub-tag-fix-bg:        #0A2910;
  --pub-tag-fix-text:      #9AE6B4;
  --pub-tag-fix-border:    #2ECC71;

  /* Hero Blobs (降低透明度) */
  --pub-blob-primary:   rgba(255, 122, 74, 0.12);
  --pub-blob-secondary: rgba(251, 211, 141, 0.15);

  /* Decorative */
  --pub-grid-pattern: rgba(255, 122, 74, 0.02);
  --pub-grid-overlay: rgba(21, 21, 32, 0.95);

  /* Typography */
  --pub-heading-color: var(--pub-c-900);
  --pub-body-color:    var(--pub-c-700);
  --pub-muted-color:   var(--pub-c-500);
}

/* ========== 9. High Contrast ========== */
@media (prefers-contrast: high) {
  body.public-page,
  body.landing-page {
    --pub-o-500:  #E04A15;
    --pub-o-700:  #C03A0A;
    --pub-o-900:  #8B2500;

    --pub-c-700:  #1A202C;
    --pub-c-800:  #0F1623;
    --pub-c-900:  #000000;

    --pub-card-border:       rgba(0, 0, 0, 0.2);
    --pub-card-border-hover: rgba(0, 0, 0, 0.4);

    --pub-cta-bg:      #E04A15;
    --pub-cta-bg-hover: #C03A0A;

    --pub-heading-color: #000000;
    --pub-body-color:    #1A202C;
  }
}