:root {
    --tool-primary: #ea8400;
    --tool-primary-hover: #d67300;
    --tool-primary-soft: rgba(234, 132, 0, 0.1);
    --tool-success: #10b981;
    --tool-danger: #ef4444;
    --tool-warning: #f59e0b;
    --tool-surface: #ffffff;
    --tool-surface-raised: #f8fafc;
    --tool-border: #e2e8f0;
    --tool-text: #1e293b;
    --tool-text-muted: #64748b;
    --tool-radius-sm: 6px;
    --tool-radius-md: 8px;
    --tool-radius-lg: 16px;
    --tool-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --tool-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.12);
    --tool-transition: 180ms ease;
}

.dark-mode,
:root.dark {
    --tool-primary: #ff9d1a;
    --tool-primary-hover: #ea8400;
    --tool-primary-soft: rgba(255, 157, 26, 0.15);
    --tool-surface: #1e293b;
    --tool-surface-raised: #334155;
    --tool-border: #475569;
    --tool-text: #f1f5f9;
    --tool-text-muted: #cbd5e1;
}

.tool-page {
    color: var(--tool-text);
}

.tool-page button,
.tool-page input,
.tool-page select,
.tool-page textarea {
    font: inherit;
}

.tool-page canvas {
    max-width: 100%;
}

.tool-toast-container,
.toast-container {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: var(--tool-surface);
    color: var(--tool-text);
    border-left: 4px solid var(--tool-primary);
    border-radius: var(--tool-radius-md);
    box-shadow: var(--tool-shadow-md);
    animation: tool-toast-in 0.25s ease, tool-toast-out 0.25s ease 2.75s forwards;
}

.toast.success {
    border-left-color: var(--tool-success);
}

.toast.error {
    border-left-color: var(--tool-danger);
}

.toast.warning {
    border-left-color: var(--tool-warning);
}

.toast-message {
    font-size: 0.9rem;
}

@keyframes tool-toast-in {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes tool-toast-out {
    to {
        opacity: 0;
    }
}

@media (max-width: 480px) {
    .tool-toast-container,
    .toast-container {
        left: 12px;
        right: 12px;
        bottom: 12px;
    }
}