/* DEFAULT_SOURCE: DESIGN_SYSTEM_BASELINE_20260827 */
/* SCOPE: 2049 Visual Asset Canvas Next 普通产品界面；proof Harness 不得覆盖这些语义 owner。 */

/* D28：剧本正文的衬线字体随产品打包，本地加载，不从外网取。
   子集与许可见 `fonts/NOTICE.md`，由 `scripts/fonts/build-script-serif-subset.py` 生成。
   只打包 400 一个字重：正文层级靠字号与字距区分，不让浏览器合成伪粗体。
   DEFAULT_SOURCE: USER_EXPLICIT_20260918_LONGTASK; SCOPE: 仅剧本正文字形。 */
@font-face {
  font-family: "Next Script Serif";
  src: url("./fonts/noto-serif-sc-subset.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  /* 字体还没到位时先用系统衬线显示，正文不空着。 */
  font-display: swap;
}

:root {
  /* DEFAULT_SOURCE: UI_LAYOUT; SCOPE: assistant reference card wrapping only. */
  --assistant-reference-card-min-width: 220px;
  /* DEFAULT_SOURCE: USER_EXPLICIT_20260908_AESTHETIC_UPGRADE;
     SCOPE: shared light/dark product presentation; no media pixels or world geometry. */
  --color-canvas-background: #eff0f1;
  --color-canvas-background-secondary: #e9ebed;
  --color-canvas-grid: rgb(86 96 109 / 18%);
  --color-canvas-focus-mask: rgb(235 237 240 / 78%);
  --color-canvas-border: rgb(31 40 52 / 10%);
  --color-canvas-border-strong: rgb(31 40 52 / 22%);
  --color-node-image: #fafbfc;
  --color-node-video: #fafbfc;
  --color-node-panorama: #fafbfc;
  --color-node-audio: #fafbfc;
  --color-node-note: #ffffff;
  --color-node-border: #c7ccd2;
  --color-relationship-line: #939eaa;
  --color-panorama-background: #0a0f13;
  --color-surface-primary: #ffffff;
  --color-surface-raised: #f6f7f8;
  --color-surface-hover: #e9edf1;
  --color-surface-input: var(--color-surface-raised);
  --color-surface-chrome: rgb(255 255 255 / 94%);
  --color-content-primary: #20252c;
  --color-content-secondary: #606873;
  --color-content-disabled: #939ba5;
  --color-accent-primary: #426b99;
  --color-accent-focus: #335e8e;
  --color-control-primary: #283d55;
  --color-on-control-primary: #ffffff;
  --color-surface-active: color-mix(in srgb, var(--color-accent-primary) 9%, var(--color-surface-primary));
  --color-on-media: #f7f9fc;
  --color-media-error: #ffb8bd;
  --color-media-overlay: rgb(14 19 27 / 72%);
  --color-modal-scrim: rgb(26 33 44 / 24%);
  --color-field-error: color-mix(in srgb, var(--color-accent-danger) 7%, var(--color-surface-primary));
  --color-border-subtle: var(--color-canvas-border);
  /* Compatibility names used by existing project and asset components. */
  --color-accent: var(--color-accent-primary);
  --color-accent-violet: var(--color-accent-primary);
  --color-canvas-bg: var(--color-canvas-background);
  --color-danger: var(--color-accent-danger);
  --color-danger-content: var(--color-accent-danger);
  --color-focus-ring: var(--color-accent-focus);
  --color-status-positive: var(--color-accent-confirm);
  --color-surface-base: var(--color-surface-primary);
  --color-surface-muted: var(--color-surface-raised);
  --color-text-primary: var(--color-content-primary);
  --font-size-label: var(--ui-font-label);
  --chrome-island-gap: var(--space-3);
  --color-accent-confirm: #247454;
  --color-accent-warning: #8b601f;
  --color-accent-danger: #b4424b;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --border-hairline: 1px;
  --control-height: 38px;
  /* DEFAULT_SOURCE: USER_EXPLICIT_20260908; SCOPE: transparent connector hit area only. */
  --node-anchor-hit-size: 60px;
  --canvas-grid-size: 64px;
  --viewer-max-inline-size: 720px;
  --radius-control: 10px;
  --radius-card: 18px;
  --radius-overlay: 22px;
  --radius-inset: 8px;
  --shadow-control: 0 1px 2px rgb(28 39 52 / 5%);
  --shadow-card: 0 2px 6px rgb(28 39 52 / 4%), 0 8px 24px rgb(28 39 52 / 5%);
  --shadow-overlay: 0 4px 12px rgb(28 39 52 / 5%), 0 20px 56px rgb(28 39 52 / 12%);
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", "PingFang SC", "Microsoft YaHei UI", sans-serif;
  --type-body: 400 var(--ui-font-body)/1.6 var(--font-ui);
  --type-label: 500 var(--ui-font-label)/1.45 var(--font-ui);
  --type-title: 600 var(--ui-font-heading)/1.4 var(--font-ui);
  --type-number: 500 var(--ui-font-label)/1.4 var(--font-ui);
  --motion-feedback: 120ms;
  --motion-overlay: 160ms;
  --motion-focus: 220ms;
  /* DEFAULT_SOURCE: USER_EXPLICIT_20260910; SCOPE: task and media feedback, not a progress estimate. */
  --motion-cycle: 1600ms;
  /* USER_EXPLICIT_20260910 / UI_LAYOUT: restrained in-card generation feedback. */
  --motion-generation-ambient: 4800ms;
  --generation-title-clearance: 56px;
  --motion-reveal: 360ms;
  --motion-ease-out: cubic-bezier(.2, .8, .2, 1);
  --canvas-text-scale: 1.2;
  --canvas-icon-scale: 2;
  --ui-scale-factor: 1;
  --ui-font-caption: max(12px, calc(12px * var(--ui-scale-factor)));
  --ui-font-body: max(13px, calc(14px * var(--ui-scale-factor)));
  --ui-font-label: max(12px, calc(13px * var(--ui-scale-factor)));
  --ui-font-heading: calc(16px * var(--ui-scale-factor));
  --ui-control-size: max(32px, calc(36px * var(--ui-scale-factor)));
  --ui-icon-size: calc(20px * var(--ui-scale-factor));
  --ui-panel-padding: calc(var(--space-4) * var(--ui-scale-factor));
  --canvas-left-rail-icon-size: var(--ui-icon-size);
  --canvas-left-rail-control-size: var(--ui-control-size);
  --canvas-zoom-icon-size: var(--ui-icon-size);
  --canvas-zoom-control-size: var(--ui-control-size);
  --canvas-topbar-icon-size: var(--ui-icon-size);
  --canvas-topbar-control-size: var(--ui-control-size);
  --z-canvas: 0;
  --z-node: 10;
  --z-selection: 20;
  --z-overlay: 40;
  /* DEFAULT_SOURCE: USER_EXPLICIT_20260905_INSPECTOR_OCCLUSION;
     SCOPE: floating workspace ordering above canvas chrome, below modal dialogs. */
  --z-workspace: 40;
  /* DEFAULT_SOURCE: USER_EXPLICIT_20260905_REFERENCE_THUMBNAILS;
     SCOPE: shared reference presentations, never node/world dimensions. */
  --asset-thumbnail-size: 42px;
  --asset-inline-thumbnail-size: 36px;
  --asset-preview-size: 280px;
  --z-media-preview: 190;
  /* DEFAULT_SOURCE: OLD_CANVAS_FRONTEND_OVERLAY_TOPOLOGY + R8_5_FLOATING_WORKSPACE;
     SCOPE: viewport-modal surfaces must remain above every non-modal floating workspace. */
  --z-dialog: 180;
  /* T71（设计方案第十节）：制作视图的语义变量。全部指向既有语义颜色，因此浅色与三套深色主题各自成立，
     深色主题不需要再写一遍；对比度按 D19（WCAG 2.2 AA）。SCOPE: 制作视图外观，不描述任何媒体像素或世界尺寸。 */
  --production-tone-neutral: var(--color-content-secondary);
  --production-tone-progress: var(--color-accent-primary);
  --production-tone-done: var(--color-accent-confirm);
  --production-tone-attention: var(--color-accent-warning);
  --production-tone-problem: var(--color-accent-danger);
  --production-tone-neutral-surface: color-mix(in srgb, var(--production-tone-neutral) 10%, var(--color-surface-primary));
  --production-tone-progress-surface: color-mix(in srgb, var(--production-tone-progress) 10%, var(--color-surface-primary));
  --production-tone-done-surface: color-mix(in srgb, var(--production-tone-done) 10%, var(--color-surface-primary));
  --production-tone-attention-surface: color-mix(in srgb, var(--production-tone-attention) 10%, var(--color-surface-primary));
  --production-tone-problem-surface: color-mix(in srgb, var(--production-tone-problem) 10%, var(--color-surface-primary));
  /* 四阶段流水线 */
  --production-stage-bar-height: 44px;
  --production-stage-dot-size: 8px;
  --production-stage-gap: var(--space-4);
  --production-stage-active: var(--production-tone-progress);
  --production-stage-done: var(--production-tone-done);
  --production-stage-pending: var(--production-tone-neutral);
  /* 剧本排版：阅读字号 16px、行高 1.8、段距、对白缩进、场景标题字距。
     衬线中文用随产品打包的子集（D28），子集之外的字回落到系统衬线；不从外网加载字体。 */
  --script-font-serif: "Next Script Serif", "Songti SC", "SimSun", "Noto Serif CJK SC", "Source Han Serif SC", "Times New Roman", serif;
  /* 正文只用 400：打包的子集没有粗体，避免浏览器合成伪粗体。 */
  --script-font-weight: 400;
  --script-font-size: 16px;
  --script-line-height: 1.8;
  --script-block-gap: var(--space-3);
  --script-dialogue-indent: 2em;
  --script-scene-letter-spacing: 0.08em;
  --script-scene-font-size: calc(var(--script-font-size) * 0.9);
  /* 卡片与媒体比例：圆角沿用 --radius-card，发丝边框，默认不加阴影；抽屉与浮层才用 --shadow-overlay。 */
  --production-card-radius: var(--radius-card);
  --production-card-border-width: var(--border-hairline);
  --production-card-padding: var(--space-4);
  --production-card-gap: var(--space-3);
  --production-look-aspect: 3 / 4;
  --production-shot-aspect: 16 / 9;
  --production-drawer-inline-size: 420px;
  --production-pending-panel-inline-size: 320px;
}

/* Existing theme identifiers remain valid for saved browser preferences. */
:root:is([data-ui-theme="obsidian"], [data-ui-theme="cobalt"], [data-ui-theme="graphite"]) {
  --color-canvas-background: #181b1f;
  --color-canvas-background-secondary: #15181b;
  --color-canvas-grid: rgb(202 213 226 / 12%);
  --color-canvas-focus-mask: rgb(18 21 25 / 78%);
  --color-canvas-border: rgb(222 229 239 / 9%);
  --color-canvas-border-strong: rgb(222 229 239 / 23%);
  --color-node-image: #252a30;
  --color-node-video: #252a30;
  --color-node-panorama: #252a30;
  --color-node-audio: #252a30;
  --color-node-note: #292f35;
  --color-node-border: #48505a;
  --color-relationship-line: #778392;
  --color-surface-primary: #242930;
  --color-surface-raised: #2b323a;
  --color-surface-hover: #353e49;
  --color-surface-input: var(--color-surface-raised);
  --color-surface-chrome: rgb(36 41 48 / 96%);
  --color-content-primary: #edf0f4;
  --color-content-secondary: #adb7c4;
  --color-content-disabled: #75818f;
  --color-accent-primary: #91b3dc;
  --color-accent-focus: #b5cbea;
  --color-control-primary: #dce7f4;
  --color-on-control-primary: #26374b;
  --color-accent-confirm: #87c5ab;
  --color-accent-warning: #d6b279;
  --color-accent-danger: #e59a9e;
  --color-modal-scrim: rgb(8 12 18 / 52%);
  --shadow-control: 0 1px 2px rgb(0 0 0 / 12%);
  --shadow-card: 0 3px 8px rgb(0 0 0 / 12%), 0 10px 28px rgb(0 0 0 / 14%);
  --shadow-overlay: 0 6px 16px rgb(0 0 0 / 16%), 0 24px 64px rgb(0 0 0 / 24%);
}

:root[data-ui-theme="cobalt"] {
  --color-canvas-background: #17202b;
  --color-surface-primary: #242f3d;
  --color-surface-raised: #2b3848;
  --color-surface-hover: #35465a;
  --color-surface-input: var(--color-surface-raised);
  --color-surface-chrome: rgb(36 47 61 / 96%);
}

:root[data-ui-theme="graphite"] {
  --color-canvas-background: #1d1e20;
  --color-surface-primary: #2a2b2e;
  --color-surface-raised: #333538;
  --color-surface-hover: #3e4145;
  --color-surface-input: var(--color-surface-raised);
  --color-surface-chrome: rgb(42 43 46 / 96%);
  --color-accent-primary: #b6c0cd;
  --color-accent-focus: #d3dbe5;
}

@media (prefers-contrast: more) {
  :root {
    --color-canvas-border: var(--color-content-secondary);
    --color-canvas-border-strong: var(--color-content-primary);
    --color-node-border: var(--color-content-secondary);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-feedback: 0ms;
    --motion-overlay: 0ms;
    --motion-focus: 0ms;
  }
}