/* BOXIE3D canonical tokens. Avi-approved neutral scale, 2026-10-28. */
:root{
 --gray-0:#151515;
 --gray-1:#181818;
 --gray-2:#1B1B1B;
 --gray-3:#1E1E1E;
 --gray-4:#212121;
 --gray-5:#242424;
 --gray-6:#272727;
 --gray-7:#2A2A2A;
 --gray-8:#2E2E2E;
 --gray-9:#313131;
 --gray-10:#343434;
 --gray-11:#383838;
 --gray-12:#3B3B3B;
 --gray-13:#3E3E3E;
 --gray-14:#424242;
 --gray-15:#454545;
 --gray-16:#494949;
 --gray-17:#4C4C4C;
 --gray-18:#505050;
 --gray-19:#535353;
 --gray-20:#575757;
 --gray-21:#5A5A5A;
 --gray-22:#5E5E5E;
 --gray-23:#626262;
 --gray-24:#656565;
 --gray-25:#696969;
 --gray-26:#6D6D6D;
 --gray-27:#717171;
 --gray-28:#747474;
 --gray-29:#787878;
 --gray-30:#7C7C7C;
 --gray-31:#808080;
 --gray-32:#848484;
 --gray-33:#878787;
 --gray-34:#8B8B8B;
 --gray-35:#8F8F8F;
 --gray-36:#939393;
 --gray-37:#979797;
 --gray-38:#9B9B9B;
 --gray-39:#9F9F9F;
 --gray-40:#A3A3A3;
 --gray-41:#A7A7A7;
 --gray-42:#ABABAB;
 --gray-43:#AFAFAF;
 --gray-44:#B3B3B3;
 --gray-45:#B8B8B8;
 --gray-46:#BCBCBC;
 --gray-47:#C0C0C0;
 --gray-48:#C4C4C4;
 --gray-49:#C8C8C8;
 --gray-50:#CCCCCC;
 --gray-51:#D0D0D0;
 --gray-52:#D5D5D5;
 --gray-53:#D9D9D9;
 --gray-54:#DDDDDD;
 --gray-55:#E1E1E1;
 --gray-56:#E6E6E6;
 --gray-57:#EAEAEA;
 --gray-58:#EEEEEE;
 --gray-59:#F3F3F3;
 --gray-60:#F7F7F7;

 --bg-app:var(--gray-0);--bg-rail:var(--gray-2);--bg-panel:var(--gray-4);--bg-raised:var(--gray-7);--bg-hover:var(--gray-7);
 --field:var(--gray-9);--field-hover:var(--gray-13);--selected:var(--gray-13);--line:var(--gray-7);--line-strong:var(--gray-17);--toggle-off:var(--gray-17);
 --text:var(--gray-58);--text-2:var(--gray-42);--text-muted:var(--gray-35);--text-hint:var(--gray-28);--text-disabled:var(--gray-22);--icon:var(--gray-49);
 --canvas:var(--gray-2);--surface:var(--bg-panel);--surface-2:var(--bg-raised);--ink:var(--text);--ink-2:var(--text-2);--muted:var(--text-muted);--subtle:var(--text-hint);--control-line:var(--line-strong);
 --field-disabled:var(--bg-raised);--focus-keyboard:var(--text-muted);--on-ink:var(--gray-60);--hover:var(--bg-hover);--rail:var(--bg-rail);
 --sidebar-button-bg:var(--gray-4);--sidebar-button-line:var(--gray-14);--sidebar-button-hover:color-mix(in srgb,var(--overlay-light) 3%,var(--sidebar-button-bg));
 --sidebar-info-text:var(--text-2);--sidebar-dropdown-bg:var(--gray-7);--sidebar-dropdown-divider:var(--gray-4);--sidebar-dropdown-arrow-width:29px;
 --tool-surface:var(--field);--label-surface:var(--field);--border-soft:var(--line);--border-hover:var(--line-strong);
 --tab-track:var(--bg-raised);--tab-selected:var(--selected);--tab-edge:var(--line-strong);--tab-muted:var(--text-muted);
 --shadow-color:var(--gray-0);--overlay-light:var(--gray-60);
 --toast-bg:var(--bg-raised);--toast-ink:var(--text);--toast-border:var(--line-strong);

 --font-app:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 --font-admin:var(--font-app);
 --blue:var(--primary-color);--blue-hover:var(--primary-color);
 --danger:#ffaaa2;--danger-bg:#492925;--success:#67c391;--warn:#e6b96f;--info:var(--primary-color);
 --control-height:28px;--control-radius:6px;--control-value-size:11px;--control-label-size:9.5px;
 --control-unit-width:30px;--control-gap:8px;--section-y:24px;--heading-gap:20px;--panel-gutter:16px;
 --section-line:var(--line-strong);--group-gap:16px;--section-heading-height:24px;
 --inspector-title-size:13px;--inspector-section-size:11.5px;--inspector-subtitle-size:11px;
 --radius-sm:4px;--radius-md:var(--control-radius);--radius-lg:10px;--radius-xl:12px;--radius-pill:999px;
 --space-1:4px;--space-2:6px;--space-3:8px;--space-4:12px;--space-5:16px;--space-6:20px;--space-7:24px;--space-8:32px;
 --disabled-opacity:.4;--motion-fast:150ms;
 --st-live-fg:var(--toast-success);--st-hired-fg:var(--toast-info);
 --toast-success:#1b7347;--toast-error:#b42318;--toast-warning:#e8590c;--toast-info:var(--primary-color);--shadow-soft:0 5px 18px color-mix(in srgb,var(--shadow-color) 20%,transparent);--shadow-card:0 4px 14px color-mix(in srgb,var(--shadow-color) 15%,transparent);--shadow-pop:0 8px 24px color-mix(in srgb,var(--shadow-color) 27%,transparent);--shadow-modal:0 24px 60px color-mix(in srgb,var(--shadow-color) 33%,transparent);}

/* Inspector palette contract. Change this mapping, never individual controls. */
:root{
 --sidebar-bg:var(--gray-4);--sidebar-raised:var(--gray-7);--sidebar-field:var(--gray-9);
 --sidebar-hover:var(--gray-13);--sidebar-selected:var(--gray-13);
 --sidebar-rule:var(--gray-17);--sidebar-rule-soft:var(--gray-7);--sidebar-control-line:var(--gray-17);
 --sidebar-title:var(--gray-60);--sidebar-label:var(--gray-42);--sidebar-meta:var(--gray-42);
 --sidebar-placeholder:var(--gray-42);--sidebar-unit:var(--gray-42);--sidebar-icon:var(--gray-49);
 --sidebar-focus:var(--gray-42);--sidebar-selection-mark:var(--gray-42);--sidebar-toggle-off:var(--gray-17);
 --sidebar-primary-bg:var(--blue-hover);--sidebar-primary-hover:color-mix(in srgb,var(--blue-hover) 90%,var(--gray-0));--sidebar-on-primary:var(--gray-60);
}
/* A complete alternative mapping for review; the editor remains standard by default. */
[data-sidebar-tone="deeper"]{
 --sidebar-bg:var(--gray-0);--sidebar-raised:var(--gray-4);--sidebar-field:var(--gray-7);
 --sidebar-hover:var(--gray-11);--sidebar-selected:var(--gray-11);
 --sidebar-rule:var(--gray-14);--sidebar-rule-soft:var(--gray-7);--sidebar-control-line:var(--gray-17);
}

:root{--field-label-size:10.5px;--field-label-line:9.5px;--field-label-weight:400;--field-label-color:var(--gray-42)}

:root{--button-primary-bg:var(--primary-color);--button-primary-hover:var(--primary-color);--button-primary-line:var(--primary-border-color);--button-secondary-bg:transparent;--button-secondary-hover:var(--gray-14);--button-secondary-line:var(--gray-17);--button-text:var(--gray-60)}

:root{--sidebar-divider:var(--gray-9);--field-short-width:64px}

:root{--chevron-width:10px;--chevron-height:5.833333px;--section-closed-text:var(--gray-42)}

:root{--section-closed-height:52.5px;--section-closed-inset:20px}

:root{--dropdown-bg:transparent;--dropdown-line:var(--gray-14);--dropdown-hover-line:var(--gray-20)}

:root{--dropdown-height:var(--control-height)}

:root{--section-hover-bg:var(--gray-5)}

:root{--control-row-height:34px;--control-row-gap:8px}

/* Sketch inference point, explicitly requested in Avi Shapr3D reference. */
:root{--sketch-midpoint:#AD6EFF}
/* High-contrast alignment over photos; widths stay in screen pixels. */
:root{--canvas-guide-color:var(--sketch-midpoint);--canvas-guide-halo:var(--gray-0);--canvas-guide-width:2px;--canvas-guide-halo-width:4px;--canvas-guide-dash:6 4}

:root{--sketch-ledge:#7edac5;--sketch-scoop:#e4cf91;--sketch-opening:#dfb5c5;}

/* Bottom tool rail dimensions — Avi, 2026-10-29. */
:root{--tool-rail-height:50px;--tool-rail-icon-size:16px}

/* Avi exact primary reference and switch thumb, 2026-10-29. */
:root{--primary-fill:var(--button-primary-bg);--primary-stroke:var(--button-primary-line);--primary-stroke-width:1px;--toggle-thumb:#CACACA;--toggle-on:var(--primary-fill);--sidebar-primary-bg:var(--primary-fill);--sidebar-primary-hover:var(--button-primary-hover)}

/* Exact off-switch reference — Avi, 2026-10-29. */
:root{--toggle-off:#3C3C3D;--toggle-off-stroke:#5D5D5E;--sidebar-toggle-off:var(--toggle-off)}

/* Shared drafting-grid surface. */
:root{--workspace-grid-size:24px;--workspace-grid-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px)}
:root{--import-grid-opacity:.35}

/* Photo Add details: drafting palette, independent of printed material colors. */
:root{--photo-plan-frame-fill:color-mix(in srgb,var(--primary-color) 22%,transparent);--photo-plan-frame-edge:var(--primary-color);--photo-plan-tool-fill:color-mix(in srgb,var(--primary-color) 38%,transparent);--photo-plan-tool-edge:var(--primary-color);--photo-plan-selected-edge:#B494CD;--photo-plan-circle:#83B8AA;--photo-plan-notch:var(--model-select-depth);--photo-plan-shape:#A78DBA;--photo-plan-rounded:var(--model-select-floor);--photo-plan-text:var(--model-select-gridfinity)}

:root{--photo-plan-rectangle:var(--photo-plan-rounded)}

/* Avi Figma rail, frame 1:1043, 2026-10-29. */
:root{--tool-rail-height:54px;--tool-rail-icon-size:18px;--tool-rail-surface:var(--gray-8);--tool-rail-edge:linear-gradient(180deg,var(--gray-14),var(--gray-10));--tool-rail-shadow:0 3px 8px color-mix(in srgb,var(--shadow-color) 20%,transparent),0 14px 14px color-mix(in srgb,var(--shadow-color) 18%,transparent),0 31px 19px color-mix(in srgb,var(--shadow-color) 10%,transparent),0 55px 22px color-mix(in srgb,var(--shadow-color) 3%,transparent);--tool-rail-active:var(--primary-surface);--tool-rail-active-line:var(--primary-border-color);--tool-rail-radius:12px;--tool-rail-padding:10px;--tool-rail-button-size:32px}

:root{--button-danger-bg:#B42332;--button-danger-hover:#C52B3B;--button-danger-line:#CC4855;--button-danger-text:var(--gray-60)}

/* Boxie3d Figma HHQRCAHh3bRjbHzyyIoPJV, nodes 1:2 / 1:4 / 1:8. */
:root{--action-height:32px;--action-radius:8px;--workflow-arrow-size:34px;--workflow-next-width:calc(var(--workflow-arrow-size) * 2);--workflow-arrow-gap:6px;--workflow-arrow-icon-width:9px;--workflow-arrow-icon-height:10px;--action-font:'Google Sans',sans-serif;--action-primary-fill:var(--primary-surface);--action-primary-edge:var(--primary-edge);--action-secondary-fill:linear-gradient(180deg,#414143 0%,#3c3c3e 100%);--action-secondary-edge:linear-gradient(180deg,#4b4b4d 0%,#3b3b3d 100%);--action-text:#fff}

/* One DSM primary family: all blue affordances inherit these Figma source values. */
:root{--primary-color:#194CFF;--primary-end:#0039FF;--primary-border-color:#0060FF;--primary-surface:linear-gradient(180deg,var(--primary-color) 0%,var(--primary-end) 100%);--primary-edge:linear-gradient(180deg,var(--primary-border-color) 0%,var(--primary-end) 100%)}

/* Shared action sizes and hover states — Avi, 2026-10-30. */
:root{--action-compact-height:28px;--action-compact-radius:6px;--action-primary-hover:linear-gradient(180deg,color-mix(in srgb,var(--primary-color) 88%,white),color-mix(in srgb,var(--primary-end) 88%,white));--action-secondary-hover:linear-gradient(180deg,color-mix(in srgb,#414143 82%,white),color-mix(in srgb,#3c3c3e 82%,white))}

/* Figma slider30:63/64/65/71. Exact sampled primary variant, not a consumer color. */
:root{--primary-range:#164AFF;--slider-active:var(--primary-range);--slider-track:var(--gray-13);--slider-track-height:3px;--slider-thumb-size:14px;--slider-halo-size:20px;--slider-thumb-image:url('/icons/boxie3d/range-thumb.svg');--slider-halo-image:url('/icons/boxie3d/range-halo.svg')}

/* Avi requested a subtle shared slider hover enlargement. */
:root{--slider-hover-scale:1.12}

/* Shared camera navigation component — shaded faces, no auxiliary controls. */
:root{--view-cube-size:104px;--view-cube-label-size:9px;--view-cube-inset:20px;--view-cube-top:var(--gray-20);--view-cube-front:var(--gray-11);--view-cube-side:var(--gray-6);--view-cube-edge:var(--gray-23);--view-cube-edge-dark:var(--gray-2);--view-cube-light:var(--gray-26);--view-cube-hover:var(--gray-24)}

/* Avi-selected existing pastel family for temporary model-part selection. */
:root{--model-select-depth:#E6D49B;--model-select-wall:#EDC29F;--model-select-corner:#CFB9E5;--model-select-gridfinity:#BFDDB7;--model-select-floor:#E1C1D1;--model-select-footprint:#B8DDEB;--model-select-height:#A8DCD0;--model-select-lip:#A8DCD0}

:root{--picker-floating-surface:var(--gray-3)}

:root{--model-selection-strength:.56;--model-hover-strength:.28;}

/* Shared floating glass surface and quiet cut-material hatch. */
:root{--glass-fallback:var(--gray-2);--glass-tint:color-mix(in srgb,var(--gray-2) 12%,transparent);--glass-sheen:none;--glass-edge:color-mix(in srgb,var(--overlay-light) 5%,transparent);--glass-blur:2px;--glass-saturation:120%;--glass-shadow:0 8px 24px color-mix(in srgb,var(--shadow-color) 20%,transparent);--section-hatch-ink:var(--gray-2);--section-hatch-opacity:.48}


:root{--section-dimension-ink:var(--model-select-depth)}

:root{--floating-title-size:13px;--floating-title-collapsed-size:11px}

:root{--floating-collapsed-width:164px;--floating-collapsed-inset:8px 10px}

:root{--popup-edge:color-mix(in srgb,var(--overlay-light) 7%,transparent);--popup-shadow:0 6px 18px color-mix(in srgb,var(--shadow-color) 18%,transparent)}

:root{--model-select-thickness:var(--model-select-footprint)}

:root{--workspace-title-size:13px}

/* Checkbox · Figma 71:273 and 71:274 */
:root{--checkbox-size:16px;--checkbox-radius:3px;--checkbox-fill:#3b3b3b;--checkbox-border:#424242}