/* Shared styles */
:root {
    --primary: #4f46e5;
    --secondary: #10b981;
    --dark: #1f2937;
    --light: #f3f4f6;
}

body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
}
.h-screen-minus-nav {
    height: calc(100vh - 64px);
}

#properties-panel {
    z-index: 10;
}

#canvas-container {
    z-index: 1;
}
/* Konva canvas styling */
#canvas-container {
    background-image: 
        linear-gradient(#e5e7eb 1px, transparent 1px),
        linear-gradient(90deg, #e5e7eb 1px, transparent 1px);
    background-size: 20px 20px;
}

.hovered-element {
    transition: all 0.2s ease;
    cursor: crosshair;
}

.hovered-element:hover {
    box-shadow: inset 0 0 0 2px rgba(79, 70, 229, 0.3);
}
/* Toolbar buttons */
.tool-button {
    @apply p-2 rounded-md hover:bg-gray-200 transition-colors;
}

.tool-button.active {
    @apply bg-blue-100 text-blue-600;
}

/* Fiber color swatches */
.color-swatch {
    @apply w-6 h-6 rounded-full cursor-pointer border border-gray-300 hover:border-gray-500;
}

/* Property form styles */
.property-field {
    @apply flex flex-col mb-3;
}

.property-field label {
    @apply text-sm font-medium text-gray-700 mb-1;
}

.property-field input, 
.property-field select {
    @apply px-2 py-1 border border-gray-300 rounded;
}