/**
 * Workspace Design Tokens & Utility Classes
 * Single source of truth for colors, spacing, radii, shadows, and shared component styles.
 *
 * Merged from:
 *   - tokens.css (Phase 2: design token definitions)
 *   - workspace-components.css (Phase 3: shared utility classes)
 *
 * @version 2.0.0
 */

/* ==========================================================================
   1. Design Tokens
   ========================================================================== */

:root {
  /* === Primary Colors === */
  --ws-color-primary: #0370ff;
  --ws-color-primary-dark: #014fbc;
  --ws-color-primary-soft: #eef6ff;

  /* === Primary Light === */
  --ws-color-primary-light: #9dccff;

  /* === Accent Colors === */
  --ws-color-accent-cyan: #09c3ff;
  --ws-color-accent-mint: #02f5c2;

  /* === Text Colors === */
  --ws-color-text-primary: #1a2332;
  --ws-color-text-secondary: #52697a;
  --ws-color-text-muted: #66788d;
  --ws-color-text-heading: #1a2332;
  --ws-color-text-caption: #52697a;
  --ws-color-text-footnote: #66788d;

  /* === Surface & Background === */
  --ws-color-surface: #ffffff;
  --ws-color-surface-pure: #ffffff;
  --ws-color-bg: #f6f9fc;
  --ws-color-bg-subtle: #f0f4f8;
  --ws-color-bg-page: #f6f9fc;

  /* === Borders === */
  --ws-color-border: #dce7f3;
  --ws-color-border-default: #e2e8f0;
  --ws-color-border-input: #b9c9d7;
  --ws-color-border-form: #d0d7de;

  /* === Semantic States === */
  --ws-color-success: #176b45;
  --ws-color-success-bg: #f1fbf7;
  --ws-color-danger: #a53d3d;
  --ws-color-danger-bg: #fef2f2;
  --ws-color-focus-ring: rgba(3, 112, 255, 0.24);
  --ws-color-warning-text: #674c1e;
  --ws-color-warning-bg: #fff9ec;
  --ws-color-warning-border: #ead8ad;

  /* === Extended Colors === */
  --ws-color-deep-blue: #014fbc;
  --ws-color-green: #17b978;
  --ws-color-warning-accent: #e6932e;

  /* === Scrollbar === */
  --ws-color-scrollbar-track: #f0f2f5;
  --ws-color-scrollbar-thumb: #c0c8d4;

  /* === Legacy Variables (migrated from workspace-theme.css) === */
  --paper: #ffffff;
  --ink: #1a2332;
  --white: #ffffff;
  --muted: #6b7c93;
  --line: #e2e8f0;

  /* === Product Variables (migrated from workspace-theme.css) === */
  --product-surface: #ffffff;
  --product-surface-soft: rgba(0, 0, 0, .02);
  --product-line: #e2e8f0;
  --product-line-strong: rgba(1, 79, 188, .38);
  --product-text: #1a2332;
  --product-muted: #6b7c93;
  --product-blue: #014fbc;
  --product-blue-soft: rgba(1, 79, 188, .08);
  --product-green: #17b978;
  --product-warn: #e6932e;
  --product-danger: #d9534f;

  /* === Workspace Product Variables ===
     Light-theme values for product-page components inside the workspace.
     product-pages.css references these so that the standalone dark theme
     (body:not(.workspace-vue-shell)) can override via the same names. */
  --ws-product-surface: #ffffff;
  --ws-product-surface-soft: rgba(0, 0, 0, .02);
  --ws-product-line: #e2e8f0;
  --ws-product-line-strong: rgba(1, 79, 188, .38);
  --ws-product-text: #1a2332;
  --ws-product-muted: #6b7c93;
  --ws-product-blue: #014fbc;
  --ws-product-blue-soft: rgba(1, 79, 188, .08);
  --ws-product-input-bg: #ffffff;
  --ws-product-tabs-bg: rgba(0, 0, 0, .03);
  --ws-product-hero-gradient: rgba(1, 79, 188, .04);
  --ws-product-stage-bg: rgba(0, 0, 0, .02);
  --ws-product-node-bg: #f0f2f5;
  --ws-product-node-border: #d0d7e0;
  --ws-product-node-text: #6b7c93;
  --ws-product-node-done-bg: #014fbc;
  --ws-product-node-done-text: #ffffff;
  --ws-product-cover-bg: #e8edf2;

  /* === Spacing (4px baseline) === */
  --ws-space-1: 4px;
  --ws-space-2: 8px;
  --ws-space-3: 12px;
  --ws-space-4: 16px;
  --ws-space-5: 20px;
  --ws-space-6: 24px;
  --ws-space-8: 32px;
  --ws-space-10: 40px;
  --ws-space-12: 48px;

  /* === Border Radius === */
  --ws-radius-sm: 8px;
  --ws-radius-md: 12px;
  --ws-radius-lg: 16px;

  /* === Shadows === */
  --ws-shadow-card-sm: 0 4px 12px rgba(1, 79, 188, .12);
  --ws-shadow-card-md: 0 16px 40px rgba(1, 79, 188, .16);
  --ws-shadow-card-lg: 0 32px 64px rgba(1, 79, 188, .20);
  --ws-shadow-md: 0 4px 16px rgba(1, 79, 188, 0.10);
}

/* ==========================================================================
   2. Shared Utility Classes
   ========================================================================== */

/* Card variants */
.ws-card { padding: var(--ws-space-4); border: 1px solid var(--ws-color-border); border-radius: var(--ws-radius-md); background: var(--ws-color-surface); }
.ws-card--lg { padding: var(--ws-space-6); border-radius: var(--ws-radius-lg); }
.ws-card--sm { padding: var(--ws-space-3); border-radius: var(--ws-radius-sm); }
.ws-card--shadow { box-shadow: var(--ws-shadow-card-md); }

/* Button variants */
.ws-btn { height: 36px; padding: 0 var(--ws-space-4); border-radius: var(--ws-radius-sm); font-size: 11px; font-weight: 750; cursor: pointer; transition: all 0.2s ease; }
.ws-btn--primary { background: var(--ws-color-primary); color: var(--ws-color-surface); border: 1px solid var(--ws-color-primary); }
.ws-btn--primary:hover { background: var(--ws-color-primary-dark); border-color: var(--ws-color-primary-dark); }
.ws-btn--outline { background: var(--ws-color-surface); color: var(--ws-color-text-primary); border: 1px solid var(--ws-color-border); }
.ws-btn--outline:hover { border-color: var(--ws-color-primary); color: var(--ws-color-primary); }
.ws-btn--text { background: transparent; color: var(--ws-color-text-primary); border: none; }
.ws-btn--text:hover { color: var(--ws-color-primary); }
.ws-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Form utilities — single source of truth for select / input / textarea */
.ws-select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--ws-color-border-form);
  border-radius: var(--ws-radius-sm);
  padding: 8px 36px 8px 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ws-color-text-primary);
  background-color: var(--ws-color-surface-pure);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2352697a' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.ws-select:hover {
  border-color: var(--ws-color-border-input);
}
.ws-select:focus {
  outline: none;
  border-color: var(--ws-color-primary);
  box-shadow: 0 0 0 3px rgba(3, 112, 255, 0.12);
}
.ws-select:disabled {
  background-color: var(--ws-color-bg-subtle);
  color: var(--ws-color-text-muted);
  cursor: not-allowed;
}

.ws-input {
  border: 1px solid var(--ws-color-border-input);
  border-radius: var(--ws-radius-sm);
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ws-color-text-primary);
  background-color: var(--ws-color-surface-pure);
  transition: border-color 0.15s ease;
}
.ws-input::placeholder {
  color: var(--ws-color-text-muted);
}
.ws-input:focus {
  outline: none;
  border-color: var(--ws-color-primary);
  box-shadow: 0 0 0 3px rgba(3, 112, 255, 0.12);
}
.ws-input:disabled {
  background-color: var(--ws-color-bg-subtle);
  color: var(--ws-color-text-muted);
  cursor: not-allowed;
}

.ws-textarea {
  border: 1px solid var(--ws-color-border-input);
  border-radius: var(--ws-radius-sm);
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ws-color-text-primary);
  background-color: var(--ws-color-surface-pure);
  resize: vertical;
  transition: border-color 0.15s ease;
}
.ws-textarea::placeholder {
  color: var(--ws-color-text-muted);
}
.ws-textarea:focus {
  outline: none;
  border-color: var(--ws-color-primary);
  box-shadow: 0 0 0 3px rgba(3, 112, 255, 0.12);
}
.ws-textarea:disabled {
  background-color: var(--ws-color-bg-subtle);
  color: var(--ws-color-text-muted);
  cursor: not-allowed;
}

/* Status badges */
.ws-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.ws-badge--success { background: var(--ws-color-success-bg); color: var(--ws-color-success); }
.ws-badge--warning { background: var(--ws-color-warning-bg); color: var(--ws-color-warning-text); }
.ws-badge--danger { background: #fef2f2; color: var(--ws-color-danger); }
.ws-badge--info { background: var(--ws-color-primary-soft); color: var(--ws-color-primary-dark); }

/* Text utilities */
.ws-text-muted { color: var(--ws-color-text-muted); }
.ws-text-secondary { color: var(--ws-color-text-secondary); }
.ws-text-primary { color: var(--ws-color-text-primary); }
.ws-font-semibold { font-weight: 600; }
.ws-font-bold { font-weight: 700; }

/* ==========================================================================
   3. Workspace Page Base
   ========================================================================== */

.workspace-page {
  width: min(1240px, 100%);
  margin: 0 auto;
  color: var(--ws-color-text-primary);
  font-family: Manrope, "Noto Sans SC", sans-serif;
}

/* ==========================================================================
   4. Override product-pages.css dark theme for workspace
   ========================================================================== */

.workspace-vue-shell .product-page,
.workspace-vue-shell .product-delivery {
  color: var(--ws-color-text-primary);
  background: transparent;
}

/* Delivery sub-component overrides for workspace light theme.
   styles.css scopes dark delivery colours to body:not(.workspace-vue-shell)
   (Task #176). product-pages.css adds structural + some hard-coded dark
   values under .product-delivery .delivery-* (same specificity, loads
   before this file). These rules use --ws-product-* variables and win
   by cascade order to provide a complete light appearance. */

.workspace-vue-shell .delivery-topbar select {
  background: var(--ws-product-input-bg);
  color: var(--ws-product-text);
}

.workspace-vue-shell .delivery-tabs {
  background: var(--ws-product-tabs-bg);
}

.workspace-vue-shell .delivery-hero {
  background:
    radial-gradient(circle at 92% 15%, var(--ws-product-hero-gradient), transparent 28%),
    var(--ws-product-surface);
}

.workspace-vue-shell .delivery-status {
  background: var(--ws-product-surface-soft);
  border-color: var(--ws-product-line);
}
.workspace-vue-shell .delivery-status span {
  color: var(--ws-product-text);
}
.workspace-vue-shell .delivery-status small {
  color: var(--ws-product-muted);
}
.workspace-vue-shell .delivery-status i {
  background: var(--ws-product-muted);
}

.workspace-vue-shell .delivery-result,
.workspace-vue-shell .delivery-control {
  background: var(--ws-product-surface);
  border-color: var(--ws-product-line);
}
.workspace-vue-shell .delivery-result h3,
.workspace-vue-shell .delivery-control h3 {
  color: var(--ws-product-text);
}

.workspace-vue-shell .delivery-document {
  color: var(--ws-product-text);
  background: var(--ws-product-surface);
  border-color: var(--ws-product-line);
}
.workspace-vue-shell .delivery-document h2,
.workspace-vue-shell .delivery-document h3 {
  color: var(--ws-product-text);
}
.workspace-vue-shell .delivery-document p {
  color: var(--ws-product-muted);
}
.workspace-vue-shell .delivery-document ul {
  color: var(--ws-product-text);
}

.workspace-vue-shell .delivery-control li {
  color: var(--ws-product-muted);
}
.workspace-vue-shell .delivery-control li i {
  background: var(--ws-product-surface-soft);
  color: var(--ws-product-muted);
}

.workspace-vue-shell .delivery-version {
  background: var(--ws-product-blue-soft);
  color: var(--ws-product-blue);
}

.workspace-vue-shell .delivery-primary {
  background: var(--ws-product-blue);
  color: #fff;
  border: 1px solid var(--ws-product-blue);
  border-radius: var(--ws-radius-sm);
  min-height: 42px;
  padding: 0 20px;
  font-weight: 700;
  font-size: 13px;
  box-shadow: none;
  cursor: pointer;
}
.workspace-vue-shell .delivery-primary:hover {
  background: var(--ws-color-primary-dark);
  border-color: var(--ws-color-primary-dark);
}
.workspace-vue-shell .text-link {
  border: 1px solid var(--ws-color-border);
  border-radius: var(--ws-radius-sm);
  background: var(--ws-color-surface);
  color: var(--ws-color-text-secondary);
  min-height: 34px;
  padding: 0 12px;
  font-weight: 600;
  font-size: 11px;
  cursor: pointer;
}
.workspace-vue-shell .delivery-secondary {
  background: var(--ws-product-surface-soft);
  color: var(--ws-product-blue);
  border-color: var(--ws-product-line);
}

.workspace-vue-shell .asset-preview {
  background: var(--ws-color-surface) !important;
}

/* ==========================================================================
   6. Component-level Defensive Overrides
   Override styles.css/product-pages.css dark rules that may leak into workspace
   ========================================================================== */

/* --- 6.1 Toast notifications --- */
.workspace-vue-shell .toast {
  background: var(--ws-color-surface, #fff) !important;
  color: var(--ws-color-text-primary, #172b4d) !important;
  border-color: var(--ws-color-border, #dfe1e6) !important;
  text-shadow: none !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.08) !important;
}

/* --- 6.2 Modal / Dialog --- */
.workspace-vue-shell .modal,
.workspace-vue-shell .intake-modal,
.workspace-vue-shell .auth-card,
.workspace-vue-shell .auth-security-card {
  background: var(--ws-color-surface, #fff);
  color: var(--ws-color-text-primary, #172b4d);
  border-color: var(--ws-color-border, #dfe1e6);
}
.workspace-vue-shell .modal-backdrop {
  background: rgba(0, 0, 0, 0.4);
}

/* --- 6.3 Native form elements --- */
.workspace-vue-shell input,
.workspace-vue-shell textarea,
.workspace-vue-shell select {
  background: var(--ws-color-surface, #fff);
  color: var(--ws-color-text-primary, #172b4d);
  border: 1px solid var(--ws-color-border-input, #dfe1e6);
  border-radius: 8px;
}
.workspace-vue-shell input:focus,
.workspace-vue-shell textarea:focus,
.workspace-vue-shell select:focus {
  border-color: var(--ws-color-primary, #0370ff);
  box-shadow: 0 0 0 2px rgba(3, 112, 255, 0.15);
  outline: none;
}
.workspace-vue-shell input::placeholder,
.workspace-vue-shell textarea::placeholder {
  color: var(--ws-color-text-muted, #6b778c);
}

/* --- 6.4 Form elements inside modals --- */
.workspace-vue-shell .intake-modal input,
.workspace-vue-shell .intake-modal textarea,
.workspace-vue-shell .intake-modal select,
.workspace-vue-shell .auth-card input,
.workspace-vue-shell .member-invite-form input,
.workspace-vue-shell .member-invite-form select {
  background: var(--ws-color-surface, #fff);
  color: var(--ws-color-text-primary, #172b4d);
  border: 1px solid var(--ws-color-border-input, #dfe1e6);
}

/* --- 6.5 Buttons inside modals --- */
.workspace-vue-shell .intake-modal form > button,
.workspace-vue-shell .auth-card button,
.workspace-vue-shell .receipt-command-form button {
  background: var(--ws-color-primary, #0370ff);
  color: #fff;
  border: none;
  border-radius: 8px;
}

/* --- 6.6 Card components --- */
.workspace-vue-shell .member-card,
.workspace-vue-shell .resume-block,
.workspace-vue-shell .resume-page,
.workspace-vue-shell .resume-cover,
.workspace-vue-shell .resume-layout {
  background: var(--ws-color-surface, #fff);
  color: var(--ws-color-text-primary, #172b4d);
  border-color: var(--ws-color-border, #dfe1e6);
}

/* --- 6.8 Video mode --- */
.workspace-vue-shell .video-mode-tabs {
  background: var(--ws-color-bg-subtle, #f4f5f7);
}
.workspace-vue-shell .v8-workspace > header {
  background: var(--ws-color-surface, #fff);
  color: var(--ws-color-text-primary, #172b4d);
}

/* --- 6.10 Materials / upload --- */
.workspace-vue-shell .material-upload label,
.workspace-vue-shell .detail-upload {
  background: var(--ws-color-bg-subtle, #f4f5f7);
  color: var(--ws-color-text-primary, #172b4d);
}
.workspace-vue-shell .materials-status {
  background: var(--ws-color-bg-subtle, #f4f5f7);
  color: var(--ws-color-text-secondary, #6b778c);
}

/* --- 6.11 Resume tags --- */
.workspace-vue-shell .resume-tags span {
  background: var(--ws-color-bg-subtle, #f4f5f7);
  color: var(--ws-color-text-primary, #172b4d);
}

/* --- 6.12 Navigation / Tab --- */
.workspace-vue-shell .intake-nav button {
  background: var(--ws-color-bg-subtle, #f4f5f7);
  color: var(--ws-color-text-primary, #172b4d);
}

/* --- 6.13 owner-app modal (product-pages.css) --- */
.workspace-vue-shell .owner-app .modal-backdrop {
  background: rgba(0, 0, 0, 0.4);
}
.workspace-vue-shell .owner-app .modal {
  background: var(--ws-color-surface, #fff);
  color: var(--ws-color-text-primary, #172b4d);
}

/* 6.14 Delivery / Video Mode Tab 按钮 */
.workspace-vue-shell .delivery-tabs button,
.workspace-vue-shell .video-mode-tabs button {
  background: var(--ws-color-surface, #fff) !important;
  border: 1px solid var(--ws-color-border, #dce7f3) !important;
  border-radius: var(--ws-radius-md, 8px) !important;
  color: var(--ws-color-text-secondary, #475569) !important;
  padding: 8px 16px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.workspace-vue-shell .delivery-tabs button:hover,
.workspace-vue-shell .video-mode-tabs button:hover {
  background: var(--ws-color-bg-subtle, #f1f5f9) !important;
  border-color: var(--ws-color-primary, #0370ff) !important;
  color: var(--ws-color-text-primary, #1a1a2e) !important;
}

.workspace-vue-shell .delivery-tabs button.active,
.workspace-vue-shell .video-mode-tabs button.active {
  background: var(--ws-color-primary-soft, #e8f0fe) !important;
  border-color: var(--ws-color-primary, #0370ff) !important;
  color: var(--ws-color-primary, #0370ff) !important;
  font-weight: 600 !important;
}

/* 6.15 Task Filter */
.workspace-vue-shell .task-filter {
  background: var(--ws-color-surface, #fff) !important;
  border: 1px solid var(--ws-color-border, #dce7f3) !important;
  border-radius: var(--ws-radius-md, 8px) !important;
  padding: 12px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.workspace-vue-shell .task-filter button {
  background: var(--ws-color-surface, #fff) !important;
  border: 1px solid var(--ws-color-border, #dce7f3) !important;
  border-radius: var(--ws-radius-sm, 6px) !important;
  color: var(--ws-color-text-secondary, #475569) !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.workspace-vue-shell .task-filter button:hover {
  background: var(--ws-color-bg-subtle, #f1f5f9) !important;
  border-color: var(--ws-color-primary, #0370ff) !important;
}

.workspace-vue-shell .task-filter button.active {
  background: var(--ws-color-primary-soft, #e8f0fe) !important;
  border-color: var(--ws-color-primary, #0370ff) !important;
  color: var(--ws-color-primary, #0370ff) !important;
  font-weight: 600 !important;
}

/* 6.16 Task Summary Metric */
.workspace-vue-shell .task-summary .metric {
  background: var(--ws-color-surface, #fff) !important;
  border: 1px solid var(--ws-color-border, #dce7f3) !important;
  border-radius: var(--ws-radius-md, 8px) !important;
  padding: 16px 20px !important;
}

.workspace-vue-shell .task-summary .metric .metric-value {
  color: var(--ws-color-text-primary, #1a1a2e) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
}

.workspace-vue-shell .task-summary .metric .metric-label {
  color: var(--ws-color-text-secondary, #475569) !important;
  font-size: 13px !important;
}

/* 6.17 Task Stream */
.workspace-vue-shell .task-stream {
  background: var(--ws-color-surface, #fff) !important;
  border: 1px solid var(--ws-color-border, #dce7f3) !important;
  border-radius: var(--ws-radius-md, 8px) !important;
}

.workspace-vue-shell .task-stream-row {
  background: var(--ws-color-surface, #fff) !important;
  border-bottom: 1px solid var(--ws-color-border, #dce7f3) !important;
}

.workspace-vue-shell .task-stream-row:last-child {
  border-bottom: none !important;
}

/* 6.18 Outline Button */
.workspace-vue-shell .outline-button {
  background: var(--ws-color-surface, #fff) !important;
  border: 1px solid var(--ws-color-border, #dce7f3) !important;
  border-radius: var(--ws-radius-md, 8px) !important;
  color: var(--ws-color-text-primary, #1a1a2e) !important;
  padding: 8px 16px !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.workspace-vue-shell .outline-button:hover {
  background: var(--ws-color-bg-subtle, #f1f5f9) !important;
  border-color: var(--ws-color-primary, #0370ff) !important;
}