/* =========================================================
   UTILITIES FSM
   Classes de utilitat reutilitzables
   Únicament estils que es repeteixen múltiples vegades
   ========================================================= */

/* =========================================================
   RESET & NORMALIZE
   ========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body {
    background: var(--fsm-background);
    color: var(--fsm-text);
    font-family: Inter, "Segoe UI", system-ui, sans-serif;
    font-size: var(--fsm-text-base);
    line-height: var(--fsm-line-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--fsm-transition);
}

/* =========================================================
   TEXT UTILITIES
   ========================================================= */

.fsm-text-xs { font-size: var(--fsm-text-xs); }
.fsm-text-sm { font-size: var(--fsm-text-sm); }
.fsm-text-base { font-size: var(--fsm-text-base); }
.fsm-text-lg { font-size: var(--fsm-text-lg); }
.fsm-text-xl { font-size: var(--fsm-text-xl); }
.fsm-text-2xl { font-size: var(--fsm-text-2xl); }
.fsm-text-3xl { font-size: var(--fsm-text-3xl); }
.fsm-text-4xl { font-size: var(--fsm-text-4xl); }

.fsm-font-normal { font-weight: var(--fsm-font-normal); }
.fsm-font-medium { font-weight: var(--fsm-font-medium); }
.fsm-font-semibold { font-weight: var(--fsm-font-semibold); }
.fsm-font-bold { font-weight: var(--fsm-font-bold); }

.fsm-line-tight { line-height: var(--fsm-line-tight); }
.fsm-line-normal { line-height: var(--fsm-line-normal); }
.fsm-line-relaxed { line-height: var(--fsm-line-relaxed); }
.fsm-line-loose { line-height: var(--fsm-line-loose); }

/* Text alignment */
.fsm-text-left { text-align: left; }
.fsm-text-center { text-align: center; }
.fsm-text-right { text-align: right; }

/* Text colors */
.fsm-text-primary { color: var(--fsm-text); }
.fsm-text-secondary { color: var(--fsm-text-secondary); }
.fsm-text-tertiary { color: var(--fsm-text-tertiary); }
.fsm-text-success { color: var(--fsm-success); }
.fsm-text-warning { color: var(--fsm-warning); }
.fsm-text-danger { color: var(--fsm-danger); }
.fsm-text-info { color: var(--fsm-info); }

/* =========================================================
   SPACING UTILITIES
   ========================================================= */

/* Margin */
.fsm-m-0 { margin: 0; }
.fsm-m-xs { margin: var(--fsm-space-xs); }
.fsm-m-sm { margin: var(--fsm-space-sm); }
.fsm-m-md { margin: var(--fsm-space-md); }
.fsm-m-lg { margin: var(--fsm-space-lg); }
.fsm-m-xl { margin: var(--fsm-space-xl); }
.fsm-m-2xl { margin: var(--fsm-space-2xl); }

.fsm-mt-xs { margin-top: var(--fsm-space-xs); }
.fsm-mt-sm { margin-top: var(--fsm-space-sm); }
.fsm-mt-md { margin-top: var(--fsm-space-md); }
.fsm-mt-lg { margin-top: var(--fsm-space-lg); }
.fsm-mt-xl { margin-top: var(--fsm-space-xl); }
.fsm-mt-2xl { margin-top: var(--fsm-space-2xl); }

.fsm-mb-xs { margin-bottom: var(--fsm-space-xs); }
.fsm-mb-sm { margin-bottom: var(--fsm-space-sm); }
.fsm-mb-md { margin-bottom: var(--fsm-space-md); }
.fsm-mb-lg { margin-bottom: var(--fsm-space-lg); }
.fsm-mb-xl { margin-bottom: var(--fsm-space-xl); }
.fsm-mb-2xl { margin-bottom: var(--fsm-space-2xl); }

/* Padding */
.fsm-p-0 { padding: 0; }
.fsm-p-xs { padding: var(--fsm-space-xs); }
.fsm-p-sm { padding: var(--fsm-space-sm); }
.fsm-p-md { padding: var(--fsm-space-md); }
.fsm-p-lg { padding: var(--fsm-space-lg); }
.fsm-p-xl { padding: var(--fsm-space-xl); }
.fsm-p-2xl { padding: var(--fsm-space-2xl); }

.fsm-px-md { padding-left: var(--fsm-space-md); padding-right: var(--fsm-space-md); }
.fsm-px-lg { padding-left: var(--fsm-space-lg); padding-right: var(--fsm-space-lg); }

.fsm-py-md { padding-top: var(--fsm-space-md); padding-bottom: var(--fsm-space-md); }
.fsm-py-lg { padding-top: var(--fsm-space-lg); padding-bottom: var(--fsm-space-lg); }

/* =========================================================
   FLEXBOX UTILITIES
   ========================================================= */

.fsm-flex { display: flex; }
.fsm-flex-col { flex-direction: column; }
.fsm-flex-row { flex-direction: row; }

.fsm-items-start { align-items: flex-start; }
.fsm-items-center { align-items: center; }
.fsm-items-end { align-items: flex-end; }

.fsm-justify-start { justify-content: flex-start; }
.fsm-justify-center { justify-content: center; }
.fsm-justify-end { justify-content: flex-end; }
.fsm-justify-between { justify-content: space-between; }

.fsm-gap-xs { gap: var(--fsm-space-xs); }
.fsm-gap-sm { gap: var(--fsm-space-sm); }
.fsm-gap-md { gap: var(--fsm-space-md); }
.fsm-gap-lg { gap: var(--fsm-space-lg); }
.fsm-gap-xl { gap: var(--fsm-space-xl); }

.fsm-flex-1 { flex: 1; }
.fsm-flex-wrap { flex-wrap: wrap; }

/* =========================================================
   GRID UTILITIES
   ========================================================= */

.fsm-grid { display: grid; }
.fsm-gap-md { gap: var(--fsm-space-md); }
.fsm-gap-lg { gap: var(--fsm-space-lg); }

/* =========================================================
   BACKGROUND UTILITIES
   ========================================================= */

.fsm-bg-primary { background: var(--fsm-primary); }
.fsm-bg-primary-dark { background: var(--fsm-primary-dark); }
.fsm-bg-primary-light { background: var(--fsm-primary-light); }
.fsm-bg-accent { background: var(--fsm-accent); }
.fsm-bg-accent-light { background: var(--fsm-accent-light); }

.fsm-bg-success { background: var(--fsm-success); }
.fsm-bg-warning { background: var(--fsm-warning); }
.fsm-bg-danger { background: var(--fsm-danger); }
.fsm-bg-info { background: var(--fsm-info); }

.fsm-bg-white { background: var(--fsm-card); }
.fsm-bg-light { background: var(--fsm-background); }

/* Gradient backgrounds */
.fsm-bg-gradient-primary { background: var(--fsm-gradient-primary); }
.fsm-bg-gradient-accent { background: var(--fsm-gradient-accent); }

/* =========================================================
   BORDER & RADIUS UTILITIES
   ========================================================= */

.fsm-border { border: 1px solid var(--fsm-border); }
.fsm-border-top { border-top: 1px solid var(--fsm-border); }
.fsm-border-bottom { border-bottom: 1px solid var(--fsm-border); }
.fsm-border-l { border-left: 4px solid var(--fsm-primary); }

.fsm-rounded-sm { border-radius: var(--fsm-radius-sm); }
.fsm-rounded-md { border-radius: var(--fsm-radius-md); }
.fsm-rounded-lg { border-radius: var(--fsm-radius-lg); }
.fsm-rounded-xl { border-radius: var(--fsm-radius-xl); }
.fsm-rounded-full { border-radius: var(--fsm-radius-full); }

/* =========================================================
   SHADOW UTILITIES
   ========================================================= */

.fsm-shadow-xs { box-shadow: var(--fsm-shadow-xs); }
.fsm-shadow-sm { box-shadow: var(--fsm-shadow-sm); }
.fsm-shadow-md { box-shadow: var(--fsm-shadow-md); }
.fsm-shadow-lg { box-shadow: var(--fsm-shadow-lg); }
.fsm-shadow-xl { box-shadow: var(--fsm-shadow-xl); }

/* =========================================================
   DISPLAY UTILITIES
   ========================================================= */

.fsm-hidden { display: none; }
.fsm-block { display: block; }
.fsm-inline { display: inline; }
.fsm-inline-block { display: inline-block; }

.fsm-w-full { width: 100%; }
.fsm-h-full { height: 100%; }

.fsm-overflow-hidden { overflow: hidden; }
.fsm-overflow-auto { overflow: auto; }

/* =========================================================
   OPACITY UTILITIES
   ========================================================= */

.fsm-opacity-5 { opacity: var(--fsm-opacity-5); }
.fsm-opacity-10 { opacity: var(--fsm-opacity-10); }
.fsm-opacity-20 { opacity: var(--fsm-opacity-20); }
.fsm-opacity-30 { opacity: var(--fsm-opacity-30); }
.fsm-opacity-50 { opacity: var(--fsm-opacity-50); }
.fsm-opacity-75 { opacity: var(--fsm-opacity-75); }

/* =========================================================
   ACCESSIBLE / HIDDEN UTILITIES
   ========================================================= */

.fsm-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =========================================================
   INTERACTION UTILITIES
   ========================================================= */

.fsm-cursor-pointer { cursor: pointer; }
.fsm-select-none { user-select: none; }
.fsm-select-all { user-select: all; }

.fsm-outline-none { outline: none; }
.fsm-focus-visible:focus-visible {
    outline: 2px solid var(--fsm-primary);
    outline-offset: 2px;
}