:root {
	/* Palette */
	--palette-dark-1: #1a1a1a;
	--palette-dark-2: #2a2a2a;
	--palette-dark-3: #333;
	--palette-dark-4: #444;
	--palette-grey-1: #555;
	--palette-grey-2: #a0a0a0;
	--palette-grey-3: #bbb;
	--palette-grey-4: #888888;
	--palette-light-1: #e0e0e0;
	--palette-light-2: #f0f0f0;
	--palette-blue-primary: #00aaff;
	--palette-blue-primary-hover: #0088cc;
	--palette-yellow-highlight: #ffaa00;
	--palette-yellow-manual-selected: #ffee00;
	--palette-red-error: #ff6b6b;
	--palette-green-manual: #4CAF50;
	--palette-white: #ffffff;
	--palette-transparent: transparent;

	/* Semantic Colors - Application */
	--color-background-app: var(--palette-dark-1);
	--color-background-panel: var(--palette-dark-2);
	--color-background-canvas: var(--palette-dark-3);
	--color-text-primary: var(--palette-light-1);
	--color-text-secondary: var(--palette-grey-3);
	--color-text-error: var(--palette-red-error);
	--color-text-on-brand: var(--palette-white);
	--color-border-primary: var(--palette-dark-4);

	/* Semantic Colors - Brand & State */
	--color-brand-primary: var(--palette-blue-primary);
	--color-brand-primary-hover: var(--palette-blue-primary-hover);
	--color-highlight: var(--palette-yellow-highlight);
	--highlight-color: var(--color-highlight);
	--color-state-disabled-bg: var(--palette-grey-1);
	--color-state-disabled-border: var(--palette-grey-1);

	/* Semantic Colors - Origami Model */
	--color-paper-recto: var(--palette-light-2);
	--color-paper-verso: var(--palette-grey-2);
	--color-paper-border: var(--palette-dark-1);
	--color-crease: var(--palette-grey-4);
	--color-vertex-handle: var(--palette-blue-primary);
	--color-vertex-handle-selected: var(--palette-yellow-highlight);
	--color-vertex-handle-manual: var(--palette-green-manual);
	--color-vertex-handle-manual-selected: var(--palette-yellow-manual-selected);
	--color-construction-line: var(--palette-yellow-highlight);
	--color-edge-handle-hover: var(--palette-yellow-highlight);

	/* Layout */
	--layout-toolbar-width: 250px;
	--layout-panel-width: 250px;
	--layout-header-height: 80px;
	--resizer-width: 5px;
	--collapsed-panel-width: 10px;
	--panel-toggle-button-size: 24px;

	/* Spacing */
	--spacing-base: 15px;
	--spacing-small: 10px;
	--spacing-extra-small: 5px;
	--spacing-gap-component: 8px;

	/* Typography */
	--font-family-monospace: monospace;
	--font-size-small: 12px;
	--font-size-base: 13px;
	--font-size-medium: 14px;
	--font-size-large: 16px;

	/* Borders */
	--border-width-primary: 1px;
	--border-radius-small: 4px;

	/* Transitions */
	--transition-duration-fast: 0.2s;
	--transition-duration-medium: 0.3s;
	--transition-timing-function: ease;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	font-family: var(--font-family-monospace);
	background-color: var(--color-background-app);
	color: var(--color-text-primary);
	margin: 0;
	overflow: hidden;
	height: 100vh;
	display: grid;
	grid-template-columns: var(--layout-toolbar-width) 1fr var(--layout-panel-width);
	grid-template-rows: var(--layout-header-height) 1fr auto;
	grid-template-areas:
		"toolbar-left toolbar-top toolbar-right"
		"toolbar-left canvas-container toolbar-right"
		"toolbar-left page-footer toolbar-right";
	/* transition: grid-template-columns var(--transition-duration-medium) var(--transition-timing-function); */
}

body.is-resizing #origami-svg {
	pointer-events: none;
	cursor: col-resize;
}

body.is-panning #origami-svg {
	cursor: grabbing;
}

body.left-panel-collapsed {
	grid-template-columns: var(--collapsed-panel-width) 1fr var(--layout-panel-width);
}

body.right-panel-collapsed {
	grid-template-columns: var(--layout-toolbar-width) 1fr var(--collapsed-panel-width);
}

body.left-panel-collapsed.right-panel-collapsed {
	grid-template-columns: var(--collapsed-panel-width) 1fr var(--collapsed-panel-width);
}
	
h4, p {
	margin-top: 0;
}

#resizer-left {
	right: calc(-1 * var(--resizer-width) / 2);
}

#resizer-right {
	right: calc(100% - var(--resizer-width) / 2);
}

.resizer {
	background-color: var(--palette-transparent);
	cursor: col-resize;
	position: absolute;
	top: 0;
	width: var(--resizer-width);
	height: 100%;
	z-index: 10;
	/* transition: background-color var(--transition-duration-fast) var(--transition-timing-function); */
}

.resizer:hover {
	background-color: var(--color-brand-primary);
}

.panel-toggle-button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: var(--panel-toggle-button-size);
	height: var(--panel-toggle-button-size);
	border-radius: 50%;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--color-border-primary);
	background-color: var(--color-background-panel);
	color: var(--color-text-primary);
	font-size: var(--font-size-base);
	z-index: 20;
}

.panel-toggle-button:hover {
	background-color: var(--color-brand-primary);
	color: var(--color-text-on-brand);
}

#toggle-toolbar-left {
	left: var(--layout-toolbar-width);
	transform: translate(-50%, -50%);
	transition: all 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);;
}

#toggle-toolbar-right {
	left: auto;
	right: var(--layout-panel-width);
	transform: translate(50%, -50%);
	transition: all 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);;
}

.left-panel-collapsed #toggle-toolbar-left {
	left: 25px;
	transition: all 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);;
}

.right-panel-collapsed #toggle-toolbar-right {
	right: 25px;
	transition: all 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);;
}

#canvas-container {
	grid-area: canvas-container;
}

#toolbar-top {
	grid-area: toolbar-top;
}

#toolbar-left {
	grid-area: toolbar-left;
	transition: all 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);;
}

#toolbar-right {
	grid-area: toolbar-right;
	transition: all 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);;
}

#page-footer {
	grid-area: page-footer;
}

header, nav, aside {
	background-color: var(--color-background-panel);
	border: var(--border-width-primary) solid var(--color-border-primary);
	padding: var(--spacing-base);
}

.left-panel-collapsed #toolbar-left,
.right-panel-collapsed #toolbar-right {
	padding: 0;
	transition: all 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);;
}

#canvas-container {
	background-color: var(--color-background-canvas);
	overflow: hidden;
	min-width: 0;
}

#toolbar-top {
	display: flex;
	justify-content: center;
	align-self: start;
	gap: var(--spacing-small);
	border-bottom: none;
	padding: var(--spacing-small);
	height: var(--layout-header-height);
}

#toolbar-left, #toolbar-right {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-base);
	position: relative;
}

#tool-info {
	border-top: var(--border-width-primary) solid var(--color-border-primary);
	padding-top: var(--spacing-base);
	font-size: var(--font-size-small);
}

#current-tool-desc hr {
	border-color: var(--color-border-primary);
	margin: var(--spacing-small) 0;
}

button {
	padding: var(--spacing-small) var(--spacing-base);
	font-size: var(--font-size-medium);
	font-family: inherit;
	cursor: pointer;
	border: var(--border-width-primary) solid var(--color-brand-primary);
	background-color: var(--color-brand-primary);
	color: var(--color-text-on-brand);
	transition: background-color var(--transition-duration-fast), border-color var(--transition-duration-fast);
	width: 100%;
}

#toolbar-top button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-gap-component);
}

button:hover {
	background-color: var(--color-brand-primary-hover);
	border-color: var(--color-brand-primary-hover);
}

button:disabled {
	background-color: var(--color-state-disabled-bg);
	border-color: var(--color-state-disabled-border);
	cursor: not-allowed;
}

.tool-button {
	background-color: var(--palette-transparent);
	color: var(--color-brand-primary);
}

.tool-button.active,
.tool-button:hover {
	background-color: var(--color-brand-primary);
	color: var(--color-text-on-brand);
}

.tool-group {
	display: flex;
	flex-direction: column;
}

#history-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

#history-list li {
	padding: var(--spacing-extra-small);
	font-size: var(--font-size-base);
	border-bottom: var(--border-width-primary) solid var(--color-border-primary);
	cursor: pointer;
	transition: background-color var(--transition-duration-fast), color var(--transition-duration-fast);
}

#history-list li:first-child {
	border-top: var(--border-width-primary) solid var(--color-border-primary);
}

#history-list li:hover,
#history-list li.active {
	background-color: var(--color-brand-primary);
	color: var(--color-text-on-brand);
}

#history-list li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--spacing-gap-component);
}

.history-item-text {
	flex-grow: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rename-history-button {
	background: none;
	border: none;
	color: var(--color-text-secondary);
	padding: var(--spacing-extra-small);
	margin: calc(-1 * var(--spacing-extra-small));
	width: auto;
	line-height: 1;
	flex-shrink: 0;
}

.rename-history-button:hover {
	color: var(--palette-blue-primary-hover);
	background: none;
}

.history-item-input {
	flex-grow: 1;
	background-color: var(--color-background-app);
	color: var(--color-text-primary);
	border: 1px solid var(--color-brand-primary);
	border-radius: var(--border-radius-small);
	padding: 2px 4px;
	font-family: inherit;
	font-size: inherit;
	width: 100%;
}

.left-panel-collapsed #toolbar-left > *:not(.panel-toggle-button),
.right-panel-collapsed #toolbar-right > *:not(.panel-toggle-button) {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.1s;
}

.left-panel-collapsed #toolbar-left,
.right-panel-collapsed #toolbar-right {
	overflow: hidden;
}

.left-panel-collapsed #toggle-toolbar-left i {
	transform: rotate(180deg);
}

.right-panel-collapsed #toggle-toolbar-right i {
	transform: rotate(180deg);
}

.left-panel-collapsed #resizer-left,
.right-panel-collapsed #resizer-right {
	display: none;
}

#origami-svg {
	display: block;
	width: 100%;
	height: 100%;
	cursor: crosshair;
}

svg.axiom6-selection-mode {
	cursor: pointer;
}

svg polygon {
	stroke: var(--color-paper-border);
	stroke-width: 0.5px;
	transition: fill var(--transition-duration-medium) var(--transition-timing-function);
}

svg .recto { fill: var(--color-paper-recto); }
svg .verso { fill: var(--color-paper-verso); }

svg .crease {
	stroke: var(--color-crease);
	stroke-width: 1px;
	pointer-events: none;
}

svg .vertex-handle {
	fill: var(--color-vertex-handle);
	stroke: var(--color-paper-border);
	stroke-width: 2px;
	cursor: pointer;
	transition: fill var(--transition-duration-fast), r var(--transition-duration-fast);
}

svg .vertex-handle.selected {
	fill: var(--color-vertex-handle-selected);
}

svg .vertex-handle.manual-vertex {
	fill: var(--color-vertex-handle-manual);
}

svg .vertex-handle.manual-vertex.selected {
	fill: var(--color-vertex-handle-manual-selected);
}

svg.xray-mode polygon {
	opacity: 0.6;
	stroke: var(--color-highlight);
	stroke-width: 1px;
}

svg .construction-line,
svg .preview-line {
	stroke: var(--color-construction-line);
	stroke-width: 1.5px;
	stroke-dasharray: 4;
	pointer-events: none;
}

svg .edge-handle {
	stroke: var(--palette-transparent);
	stroke-width: 10px;
	cursor: pointer;
}

svg .edge-handle:hover,
svg .edge-handle.selected {
	stroke: var(--color-edge-handle-hover);
	stroke-opacity: 0.7;
	stroke-width: 3px;
}

svg .fold-arrow {
	stroke: var(--color-highlight);
	stroke-width: 2px;
	marker-end: url(#arrowhead);
}

svg.xray-mode .hidden-edge {
	stroke: var(--color-highlight);
	stroke-width: 0.8px;
	stroke-dasharray: 2 3;
	pointer-events: none;
	opacity: 0.8;
}

svg .selection-label {
	font-family: var(--font-family-monospace);
	font-size: var(--font-size-large);
	fill: var(--color-highlight);
	stroke: var(--color-paper-border);
	stroke-width: 0.5px;
	paint-order: stroke;
	text-anchor: middle;
	dominant-baseline: central;
	pointer-events: none;
	font-weight: bold;
}

#error-console {
	margin-top: auto;
	border-top: var(--border-width-primary) solid var(--color-border-primary);
	padding-top: var(--spacing-base);
}

#error-message {
	color: var(--color-text-error);
	font-size: var(--font-size-small);
	margin: 0;
	min-height: 2.5em;
	word-wrap: break-word;
}

#info-content h5 {
	margin-bottom: var(--spacing-gap-component);
	font-size: var(--font-size-medium);
	border-bottom: var(--border-width-primary) solid var(--color-border-primary);
	padding-bottom: var(--spacing-extra-small);
}

#info-content .stats-header {
	margin-top: 20px;
}

.info-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--spacing-gap-component) 0;
	font-size: var(--font-size-base);
}

.info-label {
	display: flex;
	align-items: center;
	gap: var(--spacing-gap-component);
	color: var(--color-text-secondary);
}

.info-value {
	font-weight: bold;
}

.progress-bar-container {
	height: var(--spacing-gap-component);
	background-color: var(--color-background-app);
	border-radius: var(--border-radius-small);
	overflow: hidden;
	border: var(--border-width-primary) solid var(--color-border-primary);
}

#selection-progress-bar {
	height: 100%;
	width: 0%;
	background-color: var(--color-brand-primary);
	border-radius: var(--border-radius-small);
	transition: width var(--transition-duration-medium) var(--transition-timing-function);
}

#lang-selector {
	display: flex;
	gap: var(--spacing-extra-small);
	align-self: center;
	margin-top: auto;
	padding: var(--spacing-base) 0;
}

.lang-button {
	padding: var(--spacing-extra-small) var(--spacing-small);
	font-size: var(--font-size-small);
	min-width: 40px;
	width: auto;
	background-color: var(--palette-transparent);
	border: var(--border-width-primary) solid var(--color-border-primary);
	color: var(--color-text-primary);
}

.lang-button.active {
	background-color: var(--color-brand-primary);
	border-color: var(--color-brand-primary);
	color: var(--color-text-on-brand);
}

#page-footer {
	text-align: center;
	padding: var(--spacing-small);
	background-color: var(--color-background-panel);
	border-top: var(--border-width-primary) solid var(--color-border-primary);
	font-size: var(--font-size-small);
}

#page-footer p {
	margin: 0;
	color: var(--color-text-secondary);
}

#page-footer a {
	color: var(--color-text-primary);
	text-decoration: none;
	transition: color var(--transition-duration-fast) var(--transition-timing-function);
}

#page-footer a:hover {
	color: var(--color-brand-primary);
	text-decoration: underline;
}

#welcome-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	padding: var(--spacing-base);
}

#welcome-modal {
	background-color: var(--color-background-panel);
	padding: calc(var(--spacing-base) * 2);
	border-radius: var(--border-radius-small);
	border: 1px solid var(--color-border-primary);
	max-width: 500px;
	text-align: center;
	line-height: 1.6;
}

#welcome-modal h3 {
	margin-top: 0;
	color: var(--color-highlight);
}

#welcome-modal p {
	margin-bottom: var(--spacing-base);
	color: var(--color-text-secondary);
}

#welcome-modal button {
	width: auto;
	min-width: 120px;
}

.hidden {
	display: none;
}