/* ============================================================
   Textmolt Design Token Seed (--tm-*)
   Phase 2 Workstream A — 51-token base layer (49 base + 2 brand-rgb helpers)
   Source: docs/plans/PHASE_2_IMPLEMENTATION_PLAN.md (v1.1 Codex PASS)
   Census:  docs/plans/PHASE_1B_TOKEN_CENSUS.md

   Categories (count): brand 4 + brand-rgb 2 + semantic 6 + border 2 + status 3 +
                      overlay 2 + z-index 11 + radius 6 + shadow 6 +
                      spacing 6 + motion 3 = 51

   Loaded BEFORE styles.css so legacy --accent-/--bg-/--text-/--shadow-/
   --radius-/--border- aliases can reference --tm-*. Theme variants
   (data-model gpt/claude/deepseek/aii) override --tm-brand-purple-rgb
   indirectly via existing --primary-glow-rgb plumbing.
   ============================================================ */

:root {
  /* ── Brand color (4) ── */
  --tm-brand-purple: #7c5cfc;        /* PM-locked brand purple */
  --tm-brand-purple-rgb: 124, 92, 252;
  --tm-brand-blue: #1E40AF;
  --tm-brand-blue-rgb: 30, 64, 175;
  --tm-brand-green: #10b981;
  --tm-brand-orange: #f97316;

  /* ── Semantic color (6) — text + bg ── */
  --tm-text-primary: #1e293b;
  --tm-text-secondary: #475569;
  --tm-text-muted: #94a3b8;
  --tm-bg-1: #f9fafb;                 /* page background */
  --tm-bg-2: #ffffff;                 /* surface / card */
  --tm-bg-3: #f3f4f6;                 /* tertiary / chip */

  /* ── Border (2) ── */
  --tm-border-default: #e5e7eb;
  --tm-border-soft: #d1d5db;

  /* ── Status (3) ── */
  --tm-status-success: #10b981;
  --tm-status-danger: #ef4444;
  --tm-status-warning: #f59e0b;

  /* ── Overlay (2) ── */
  --tm-overlay-modal: rgba(0, 0, 0, 0.45);
  --tm-overlay-toast: rgba(0, 0, 0, 0.25);

  /* ── z-index scale (11) — names per plan A.7 ── */
  --tm-z-fab: 20;
  --tm-z-raised: 50;
  --tm-z-sticky: 100;
  --tm-z-update-banner: 101; /* 介于 sticky(100) 与 banner(200) 之间，UpdateBanner 专用 */
  --tm-z-banner: 200;
  --tm-z-toast: 1000;
  --tm-z-modal: 2000;
  --tm-z-overlay: 9000;
  --tm-z-modal-top: 10000;
  --tm-z-onboarding: 10100;
  --tm-z-critical: 10200;

  /* ── Radius (6) ── */
  --tm-radius-xs: 4px;
  --tm-radius-sm: 6px;
  --tm-radius-md: 10px;
  --tm-radius-lg: 12px;
  --tm-radius-xl: 16px;
  --tm-radius-full: 9999px;

  /* ── Shadow (6) ── */
  --tm-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.05);
  --tm-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.08);
  --tm-shadow-3: 0 8px 24px rgba(0, 0, 0, 0.12);
  --tm-shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.05);
  --tm-shadow-float: 0 20px 50px -10px rgba(0, 0, 0, 0.12);
  --tm-shadow-xl: 0 16px 48px -8px rgba(0, 0, 0, 0.18);

  /* ── Spacing scale (6) — 4 / 8 / 12 / 16 / 24 / 32 ── */
  --tm-space-1: 4px;
  --tm-space-2: 8px;
  --tm-space-3: 12px;
  --tm-space-4: 16px;
  --tm-space-5: 24px;
  --tm-space-6: 32px;

  /* ── Motion (3) ── */
  --tm-motion-fast: 0.15s ease;
  --tm-motion-normal: 0.25s ease;
  --tm-motion-slow: 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ============================================================
   Dark theme overrides — 25 of 51 tokens override under dark
   (brand 6 + semantic 6 + border 2 + status 3 + overlay 2 + shadow 6 = 25;
    z-index / radius / spacing / motion 不分主题)
   Trigger: html[data-theme="dark"]
   ============================================================ */
:root[data-theme="dark"] {
  /* Brand (lifted brightness for dark surface) */
  --tm-brand-purple: #a78bfa;
  --tm-brand-purple-rgb: 167, 139, 250;
  --tm-brand-blue: #3b82f6;
  --tm-brand-blue-rgb: 59, 130, 246;
  --tm-brand-green: #34d399;
  --tm-brand-orange: #fb923c;

  /* Semantic */
  --tm-text-primary: #f1f5f9;
  --tm-text-secondary: #cbd5e1;
  --tm-text-muted: #94a3b8;
  --tm-bg-1: #121212;
  --tm-bg-2: #1e1e1e;
  --tm-bg-3: #121212;

  /* Border */
  --tm-border-default: #2a2a2a;
  --tm-border-soft: #3a3a3a;

  /* Status */
  --tm-status-success: #34d399;
  --tm-status-danger: #f87171;
  --tm-status-warning: #fbbf24;

  /* Overlay (deeper) */
  --tm-overlay-modal: rgba(0, 0, 0, 0.6);
  --tm-overlay-toast: rgba(0, 0, 0, 0.4);

  /* Shadow (deeper for dark) */
  --tm-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.3);
  --tm-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.4);
  --tm-shadow-3: 0 8px 24px rgba(0, 0, 0, 0.5);
  --tm-shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.3);
  --tm-shadow-float: 0 20px 50px -10px rgba(0, 0, 0, 0.6);
  --tm-shadow-xl: 0 16px 48px -8px rgba(0, 0, 0, 0.65);
}

/* ============================================================
   z-index utility classes (consumed by JS-injected components
   that cannot read CSS custom properties from inline cssText).
   See A.5: AnnouncementBanner / AnnouncementModal /
   UpdateBanner / versionCheckFlow.
   Only sets z-index — does NOT touch position / inset / display.
   ============================================================ */
.tm-z-banner-sticky { z-index: var(--tm-z-sticky); }       /* AnnouncementBanner (was 100) */
.tm-z-update-banner { z-index: var(--tm-z-update-banner); } /* UpdateBanner 101 (one tier above sticky) */
.tm-z-overlay-modal { z-index: var(--tm-z-overlay); }      /* AnnouncementModal + versionCheckFlow force-update overlay (was 9999) */