/* ============================================================
   Open Design — neutral product workspace
   ============================================================ */
:root {
  /* Surface palette — neutral app chrome that does not bias generated artifacts.
     Keep warm/brand colors out of preview backgrounds; generated product UI
     must choose its own palette through the active skill/design brief. */
  --bg: #f7f7f8;
  --bg-app: #f7f7f8;
  --bg-panel: #fbfbfc;
  --bg-subtle: #f1f1f3;
  --bg-muted: #eaeaed;
  --bg-fill-tertiary: rgba(0, 0, 0, 0.03);
  --bg-fill-secondary: rgba(0, 0, 0, 0.06);
  --bg-fill: rgba(0, 0, 0, 0.12);
  --bg-elevated: #ffffff;
  --border: #e3e3e7;
  --border-strong: #d1d1d7;
  --border-soft: #ededf0;

  --text: #29292d;
  --text-strong: #171719;
  --text-muted: #71717a;
  --text-soft: #97979f;
  --text-faint: #b2b2b9;

  /* Accent — Open Design action color for app chrome only. */
  --accent: #2563eb;
  --accent-strong: #2358ce;
  --accent-soft: #ccdaf8;
  --accent-tint: #e1e9fa;
  --accent-hover: #245bd6;
  --on-accent-hover: #ffffff;
  --focus-accent: #2563eb;
  --accent-text: #2563eb;
  --focus-accent-soft: color-mix(in srgb, var(--focus-accent) 22%, var(--bg-panel));

  /* Semantic accent tints used by tool / status pills. */
  --green: #1f7a3a;
  --green-bg: #e8f7ee;
  --green-border: #c6ead2;
  --blue: #2348b8;
  --blue-bg: #e8efff;
  --blue-border: #c8d6ff;
  --purple: #6c3aa6;
  --purple-bg: #f3ecf9;
  --purple-border: #e4d4f1;
  --red: #9c2a25;
  --red-bg: #fdecea;
  --red-border: #f5c6c2;
  --amber: #b26200;
  --amber-bg: #fff3e0;

  --shadow-xs: 0 1px 0 rgba(18, 18, 20, 0.04);
  --shadow-sm: 0 1px 2px rgba(18, 18, 20, 0.06), 0 1px 4px rgba(18, 18, 20, 0.04);
  --shadow-md: 0 8px 24px rgba(18, 18, 20, 0.08), 0 2px 6px rgba(18, 18, 20, 0.04);
  --shadow-lg: 0 24px 64px rgba(18, 18, 20, 0.14), 0 8px 20px rgba(18, 18, 20, 0.06);

  /* Corner-radius scale — the only radii UI should reach for (Shape
     Consistency Lock). xs for inline code / micro-chips, sm for controls,
     base for cards/menus, md for medium containers, lg for large surfaces,
     pill for fully-rounded interactive. Off-scale values (7px, 9px, 10px
     literals) are drift; collapse them to the nearest token. */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* Motion — codifies the UI animation philosophy (see AGENTS.md). The
     built-in `ease` curve is too weak and `ease-in` is banned for UI;
     --ease-out is the single canonical curve for product transitions.
     Enter reads gentle, exit reads decisive (asymmetric durations);
     --dur-quick is for hover / focus micro-feedback. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-quick: 120ms;
  --dur-enter: 200ms;
  --dur-exit: 140ms;

  /* Legacy shared primitives still consume --selected. Keep those aliases on
     the same user-configured accent authority as current Tocer focus and
     selection roles instead of retaining a second fixed-blue theme. */
  --selected: var(--focus-accent);
  --selected-soft: var(--focus-accent-soft);
  --on-accent: #ffffff;

  --serif: 'Source Serif Pro', 'Source Serif 4', 'Iowan Old Style', 'Apple Garamond', Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei UI', 'Noto Sans', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  /* Tocer product UI roles. Keep feature styles on semantic product roles
     while the shared palette remains the single light/dark color authority. */
  --td-bg: var(--bg);
  --td-bg-app: var(--bg-app);
  --td-bg-panel: var(--bg-panel);
  --td-bg-subtle: var(--bg-subtle);
  --td-bg-hover: var(--bg-fill-secondary);
  --td-bg-selected: var(--accent-tint);
  --td-surface: var(--bg-panel);
  --td-surface-raised: var(--bg-elevated);
  --td-control-surface: var(--bg-elevated);
  /* Canvas surfaces use a slightly deeper neutral than app chrome. Keep the
     editor background token separate so document/prototype/design surfaces
     can share one explicit canvas authority. */
  --td-canvas: #e8e8e8;
  --td-editor-canvas: var(--bg-subtle);
  --td-text: var(--text);
  --td-text-strong: var(--text-strong);
  --td-text-muted: var(--text-muted);
  --td-border: var(--border);
  --td-border-strong: var(--border-strong);
  --td-border-subtle: var(--border-soft);
  --td-ai-divider: color-mix(in srgb, var(--td-text-muted) 12%, var(--td-canvas));
  --td-border-focus: var(--focus-accent);
  --td-accent: var(--accent);
  --td-primary: var(--accent);
  --td-primary-hover: var(--accent-hover);
  --td-primary-surface: var(--accent-tint);
  --td-primary-text: var(--on-accent);
  --td-primary-hover-text: var(--on-accent-hover);
  --td-focus: var(--focus-accent);
  --td-focus-ring: var(--focus-accent-soft);
  --td-action-text: var(--accent-text);
  --td-success: var(--green);
  --td-warning: var(--amber);
  --td-danger: var(--red);
  --td-guide: var(--purple);
  --td-measurement: var(--blue);
  --td-ai-presence: var(--purple);
  --td-edge-hit: var(--blue);
  --td-edge-selected: var(--purple);
  --td-danger-text: var(--red);
  --td-danger-border: var(--red-border);
  --td-danger-surface: var(--red-bg);
  --td-bg-warning: var(--amber-bg);
  --td-on-accent: var(--on-accent);
  --td-on-accent-hover: var(--on-accent-hover);
  --td-on-danger: var(--bg-app);
  --td-selection-surface: var(--accent-soft);
  --td-selection-fill: var(--accent-soft);
  --td-selection-stroke: var(--focus-accent);
  --td-selection-handle-fill: #ffffff;
  --td-selection-label-text: #ffffff;
  --td-artboard-surface: #ffffff;
  --td-frame-outline: var(--border-strong);
  --td-text-primary: var(--text);
  --td-radius-xs: var(--radius-xs);
  --td-radius-sm: var(--radius-sm);
  --td-radius: var(--radius);
  --td-radius-pill: var(--radius-pill);
  --td-radius-md: var(--radius-md);
  --td-shadow-sm: var(--shadow-sm);
  --td-shadow-lg: var(--shadow-lg);
  --td-font-ui: var(--sans);
  --td-row-height: 2rem;
  --td-control-height: 1.875rem;
  --td-icon-box: 1.75rem;
  --td-panel-width: 12rem;
  --td-panel-padding: 0.75rem;

  --prose-font-size: 15px;
  --prose-line-height: 1.75;
  /* Document header action rail + meeting recorder pill (VoicePill native zinc, light). */
  --recorder-pill-bg: #e4e4e7;
  --recorder-pill-icon: #71717a;
  --recorder-pill-accent: #3f3f46;
  --code-header-bg: #f4f5f7;
  --code-body-bg: #f9fafb;
  --code-font-size: 13px;
  --code-line-height: 1.65;
}

:lang(zh-CN) {
  --td-font-ui: 'PingFang SC', 'Microsoft YaHei UI', 'Noto Sans CJK SC', var(--sans);
}

:lang(en) {
  --td-font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', var(--sans);
}

/* Dark theme variables — shared between explicit [data-theme="dark"] and the
   OS-level prefers-color-scheme media query (system mode = no data-theme attr). */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1e1e1e;
  --bg-app: #1e1e1e;
  --bg-panel: #2a2a2a;
  --bg-subtle: #242424;
  --bg-muted: #303030;
  --bg-fill-tertiary: rgba(255, 255, 255, 0.06);
  --bg-fill-secondary: #353535;
  --bg-fill: #3a3a3a;
  --bg-elevated: #1e1e1e;
  --td-canvas: #1c1c1c;
  --td-editor-canvas: #151515;
  --border: #3a3a3a;
  --border-strong: #4a4a4a;
  --border-soft: #3a3a3a;

  --text: #e0e0e0;
  --text-strong: #f5f5f5;
  --text-muted: #888888;
  --text-soft: #707070;
  --text-faint: #585858;

  --accent: #2563eb;
  --accent-strong: #4277ec;
  --accent-soft: #1d2b4a;
  --accent-tint: #1c2436;
  --accent-hover: #245bd6;
  --on-accent-hover: #ffffff;
  --focus-accent: #2563eb;
  --accent-text: #5c8af0;

  --green: #4caf72;
  --green-bg: #0f2a18;
  --green-border: #1a4028;
  --blue: #6b8fe8;
  --blue-bg: #0f1a38;
  --blue-border: #1a2c58;
  --purple: #a87dd4;
  --purple-bg: #1e1030;
  --purple-border: #321a50;
  --red: #e06b65;
  --red-bg: #2a0e0c;
  --red-border: #451714;
  --amber: #e09a40;
  --amber-bg: #2a1a04;

  --shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6), 0 8px 16px rgba(0, 0, 0, 0.3);

  /* Document header action rail + meeting recorder pill (VoicePill native zinc, dark). */
  --recorder-pill-bg: #27272a;
  --recorder-pill-icon: #a1a1aa;
  --recorder-pill-accent: #f5f5f5;
  --code-header-bg: #1e1e20;
  --code-body-bg: #18181b;
}

/* System mode: follow OS preference when no explicit data-theme is set. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    color-scheme: dark;
    --bg: #1e1e1e;
    --bg-app: #1e1e1e;
    --bg-panel: #2a2a2a;
    --bg-subtle: #242424;
    --bg-muted: #303030;
    --bg-fill-tertiary: rgba(255, 255, 255, 0.06);
    --bg-fill-secondary: #353535;
    --bg-fill: #3a3a3a;
    --bg-elevated: #1e1e1e;
    --td-canvas: #1c1c1c;
    --td-editor-canvas: #151515;
    --border: #3a3a3a;
    --border-strong: #4a4a4a;
    --border-soft: #3a3a3a;

    --text: #e0e0e0;
    --text-strong: #f5f5f5;
    --text-muted: #888888;
    --text-soft: #707070;
    --text-faint: #585858;

    --accent: #2563eb;
    --accent-strong: #4277ec;
    --accent-soft: #1d2b4a;
    --accent-tint: #1c2436;
    --accent-hover: #245bd6;
    --on-accent-hover: #ffffff;
    --focus-accent: #2563eb;
    --accent-text: #5c8af0;

    --green: #4caf72;
    --green-bg: #0f2a18;
    --green-border: #1a4028;
    --blue: #6b8fe8;
    --blue-bg: #0f1a38;
    --blue-border: #1a2c58;
    --purple: #a87dd4;
    --purple-bg: #1e1030;
    --purple-border: #321a50;
    --red: #e06b65;
    --red-bg: #2a0e0c;
    --red-border: #451714;
    --amber: #e09a40;
    --amber-bg: #2a1a04;

    --shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6), 0 8px 16px rgba(0, 0, 0, 0.3);

    /* Document header action rail + meeting recorder pill (VoicePill native zinc, dark). */
    --recorder-pill-bg: #27272a;
    --recorder-pill-icon: #a1a1aa;
    --recorder-pill-accent: #f5f5f5;
    --code-header-bg: #1e1e20;
    --code-body-bg: #18181b;
  }
}