/* Configure Tailwind with Brand Colors */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --brand-dark: #154734;
    --brand-medium: #527758;
    --brand-light: #71b07b;
    --brand-bg: #EDEDED;
  }
}

.bg-brand-bg { background-color: var(--brand-bg); }
.bg-brand-dark { background-color: var(--brand-dark); }
.bg-brand-medium { background-color: var(--brand-medium); }
.bg-brand-light { background-color: var(--brand-light); }
.text-brand-dark { color: var(--brand-dark); }
.text-brand-medium { color: var(--brand-medium); }
.text-brand-light { color: var(--brand-light); }
.border-brand-light { border-color: var(--brand-light); }
.bg-brand-accent { background-color: #527758; }

.kanban-column {
    height: calc(100vh - 100px);
}

.order-card {
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    cursor: grab;
}
.order-card:active {
    cursor: grabbing;
}
.sortable-ghost {
    opacity: 0.4;
    background-color: #f3f4f6;
}
.icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: white;
    font-size: 10px;
}