/* ------------------------------------ *\
  #SPACING UTILITIES
\* ------------------------------------ */

/* 
 * Gap utilities for flexbox and grid, inspired by Tailwind CSS.
 * Use these classes to control the space between items in a container.
 */

.gap-0 { gap: 0; }
.gap-1 { gap: 0.25rem; } /* 4px */
.gap-2 { gap: 0.5rem; }  /* 8px */
.gap-3 { gap: 0.75rem; } /* 12px */
.gap-4 { gap: 1rem; }    /* 16px */
.gap-5 { gap: 1.25rem; } /* 20px */
.gap-6 { gap: 1.5rem; }  /* 24px */
.gap-8 { gap: 2rem; }    /* 32px */
.gap-10 { gap: 2.5rem; } /* 40px */
.gap-12 { gap: 3rem; }   /* 48px */
.gap-16 { gap: 4rem; }   /* 64px */
.gap-20 { gap: 5rem; }   /* 80px */

/* Column Gap */
.gap-x-0 { column-gap: 0; }
.gap-x-1 { column-gap: 0.25rem; }
.gap-x-2 { column-gap: 0.5rem; }
.gap-x-3 { column-gap: 0.75rem; }
.gap-x-4 { column-gap: 1rem; }
.gap-x-5 { column-gap: 1.25rem; }
.gap-x-6 { column-gap: 1.5rem; }
.gap-x-8 { column-gap: 2rem; }
.gap-x-10 { column-gap: 2.5rem; }
.gap-x-12 { column-gap: 3rem; }
.gap-x-16 { column-gap: 4rem; }
.gap-x-20 { column-gap: 5rem; }

/* Row Gap */
.gap-y-0 { row-gap: 0; }
.gap-y-1 { row-gap: 0.25rem; }
.gap-y-2 { row-gap: 0.5rem; }
.gap-y-3 { row-gap: 0.75rem; }
.gap-y-4 { row-gap: 1rem; }
.gap-y-5 { row-gap: 1.25rem; }
.gap-y-6 { row-gap: 1.5rem; }
.gap-y-8 { row-gap: 2rem; }
.gap-y-10 { row-gap: 2.5rem; }
.gap-y-12 { row-gap: 3rem; }
.gap-y-16 { row-gap: 4rem; }
.gap-y-20 { row-gap: 5rem; } 

/* ------------------------------------ *\
  #BORDER UTILITIES
\* ------------------------------------ */

/* 
 * Border utilities for consistent borders across components.
 * Use these classes to add borders with theme-aware colors.
 */

/* Border Width */
.border-0 { border: 0; }
.border { border: 1px solid var(--color-border); }
.border-2 { border: 2px solid var(--color-border); }
.border-4 { border: 4px solid var(--color-border); }
.border-8 { border: 8px solid var(--color-border); }

/* Border Directional */
.border-t { border-top: 1px solid var(--color-border); }
.border-r { border-right: 1px solid var(--color-border); }
.border-b { border-bottom: 1px solid var(--color-border); }
.border-l { border-left: 1px solid var(--color-border); }

.border-t-0 { border-top: 0; }
.border-r-0 { border-right: 0; }
.border-b-0 { border-bottom: 0; }
.border-l-0 { border-left: 0; }

.border-t-2 { border-top: 2px solid var(--color-border); }
.border-r-2 { border-right: 2px solid var(--color-border); }
.border-b-2 { border-bottom: 2px solid var(--color-border); }
.border-l-2 { border-left: 2px solid var(--color-border); }

/* Border Colors - Override default border colors */
.border-light { border-color: var(--color-border-light); }
.border-default { border-color: var(--color-border); }
.border-dark { border-color: var(--color-border-dark); }
.border-transparent { border-color: transparent; }

/* Border Styles */
.border-solid { border-style: solid; }
.border-dashed { border-style: dashed; }
.border-dotted { border-style: dotted; }
.border-none { border-style: none; }

/* Combined bottom border utilities */
.border-b-light { 
    border: none;
    border-bottom: 1px solid var(--color-border-light); 
}
.border-b-default { 
    border: none;
    border-bottom: 1px solid var(--color-border); 
}
.border-b-dark { 
    border: none;
    border-bottom: 1px solid var(--color-border-dark); 
}

/* ------------------------------------ *\
  #BUTTON UTILITIES
\* ------------------------------------ */

/* 
 * Button contrast and accessibility utilities.
 * Ensures proper contrast ratios for all button variants.
 */

/* Primary/Warning button contrast fix - ensure dark text on yellow */
.button.is-primary,
.button.is-warning,
.tag.is-primary,
.tag.is-warning {
    background-color: var(--color-workhorse-yellow) !important;
    color: var(--color-brown-dark) !important;
    border-color: var(--color-workhorse-yellow) !important;
    font-weight: var(--weight-semibold) !important;
}

.button.is-primary:hover,
.button.is-warning:hover {
    background-color: var(--color-brown-light) !important;
    color: var(--color-white) !important;
    border-color: var(--color-brown-light) !important;
}

.button.is-primary:focus,
.button.is-warning:focus {
    background-color: var(--color-workhorse-yellow) !important;
    color: var(--color-brown-dark) !important;
    border-color: var(--color-brown-light) !important;
    box-shadow: 0 0 0 0.125em rgba(190, 127, 81, 0.25) !important;
}

/* Outlined button variants - better contrast */
.button.is-primary.is-outlined,
.button.is-warning.is-outlined {
    background-color: transparent !important;
    color: var(--color-white) !important;
    border-color: var(--color-workhorse-yellow) !important;
    font-weight: var(--weight-semibold) !important;
}

.button.is-primary.is-outlined:hover,
.button.is-warning.is-outlined:hover {
    background-color: var(--color-workhorse-yellow) !important;
    color: var(--color-brown-dark) !important;
    border-color: var(--color-workhorse-yellow) !important;
}

.button.is-primary.is-outlined:focus,
.button.is-warning.is-outlined:focus {
    background-color: transparent !important;
    color: var(--color-white) !important;
    border-color: var(--color-workhorse-yellow) !important;
    box-shadow: 0 0 0 0.125em rgba(254, 209, 0, 0.25) !important;
}

/* Ensure proper contrast for text on all backgrounds */
.has-background-primary,
.has-background-warning {
    background-color: var(--color-workhorse-yellow) !important;
    color: var(--color-brown-dark) !important;
}

/* Link button improvements */
.button.is-text {
    color: var(--color-text-link) !important;
    text-decoration: none !important;
}

.button.is-text:hover {
    color: var(--color-white) !important;
    background-color: rgba(190, 127, 81, 0.1) !important;
}